Bootstrap中sass怎么安装和使用
导读：相信很多人对“Bootstrap中sass怎么安装和使用”都不太了解，下面小编为你详细解释一下这个问题，希望对你有一定的帮助 bootstrap sass的使用方法：首先下载Ruby；然后从官网下载Sass；接...
相信很多人对“Bootstrap中sass怎么安装和使用”都不太了解，下面小编为你详细解释一下这个问题，希望对你有一定的帮助bootstrap sass的使用方法：首先下载Ruby；然后从官网下载Sass；接着用“@mixin”来定义代码块；最后用“@include”来复用即可。
本文操作环境：Windows7系统、bootstrap3、Dell G3电脑。
安装
Sass是由Ruby编写的，所以想使用Sass必须要先下载Ruby，Ruby只是为Sass运行提供支持，不懂Ruby也不碍事
安装好Ruby之后 再从官网下载Sass，就可以使用了
Sass用法
1、变量
Sass通过美元符号使用变量
//Sass源码
$highlight-color: #000000;
.selected {
border: 1px solid $highlight-color;
}
//编译后的CSS
.selected {
border: 1px solid #000000;
}
2、嵌套
Sass的嵌套和Less相同 直接写在里面就好了（推荐：《bootstrap教程》）
3、代码重用 @mixin @include @extend @function @import
Sass可以用@mixin 来定义代码块 然后用@include 来复用 @mixin同样也支持参数
//Sass源码
@mixin border-radius($radius){
-moz-border-radius:$radius;
-webkit-border-radius:$radius;
border-radius:$radius;
}
button{
@include border-radius(5px);
}
//编译后的CSS
button {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
Sass可以使用@extend 来继承一个类
//Sass源码
.block{
padding: 15px;
margin-bottom: 15px;
}
.block-primary{
@extend .block;
color: #00aff0;
}
//编译后的CSS
.block, .block-primary {
padding: 15px;
margin-bottom: 15px;
}
.block-primary {
color: #00aff0;
}
Sass 还可以使用@import来导入外部文件 可以使用@function 来定义函数
4、Sass支持分支和循环 @if @else if @else @for @while
//Sass源码
@mixin add-background($color){
background: $color;
@if $color==#000000{
color: #666666;
}
@else {
color: #ffffff;
}
}
.section-primary{
@include add-background(#ffffff);
}
//编译后的CSS
.section-primary {
background: #ffffff;
color: #ffffff;
}
到此这篇关于“Bootstrap中sass怎么安装和使用”的文章就介绍到这了，感谢各位的阅读，更多相关Bootstrap中sass怎么安装和使用内容，欢迎关注网络资讯频道，小编将为大家输出更多高质量的实用文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： Bootstrap中sass怎么安装和使用
本文地址： https://pptw.com/jishu/654885.html