bootstrap sass的使用方法：1、下载Ruby；2、从官网下载Sass；3、通过“@mixin”来定义代码块；4、通过“@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相同 直接写在里面就好了
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);}//编译后的CSSbutton { -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; }
登录后复制
