本文操作环境: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; }
Salin selepas log masuk
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); } //编译后的CSS button { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }
Salin selepas log masuk
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; }
Salin selepas log masuk
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; }
Salin selepas log masuk