1.优越体现
- 可以定义变量，方便统一修改和维护。
- 可以进行选择器的嵌套，表示层级关系。
- 如导入其他sass文件，最后编译为一个css文件，优于纯css的@import。
- 可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用。
- 可通过@extend来实现代码组合声明，使代码更加优越简洁。
- 可进行简单的加减乘除运算等。
- 集成了大量的颜色函数，让变换颜色更加简单。
2.语法
- 文件名后缀
- sass：不使用大括号和分号
- scss：使用大括号和分号，建议使用
- 导入(可以忽略后缀名)
@import "a";
- 注释
- 变量
$fontSize: 12px;
body{
font-size:$fontSize;
}
- 默认变量：加上！default
- 特殊变量：以#{$variables}形式使用
- 多值变量：list，map
- 全局变量：加上！global
- 嵌套：选择器嵌套，属性嵌套
- @at-root：跳出选择器嵌套
- 混合(mixin)：用@mixin声明，通过@include来调用
@mixin center-block {
margin-left:auto;
margin-right:auto;
}
.demo{
@include center-block;
}
- 继承：使用关键词@extend
- 函数：以@fuction开始
- 运算：注意运算符前后留一个空格
- 条件判断及循环
- @if判断
- 三目判断
- @for循环
- @each循环
3.sass安装
- ruby安装
- 官网下载ruby
- 安装时勾选Add Ruby executables to your PATH
- sass安装
- 打开Start Command Prompt with Ruby
- 命令行输入
gem inatall sass
4.使用
sass test.scss
sass test.scss test.css
- nested：嵌套缩进的css代码，它是默认值。
- expanded：没有缩进的、扩展的css代码。
- compact：简洁格式的css代码。
- compressed：压缩后的css代码。
sass --style compressed test.sass test.css
// watch a file
sass --watch input.scss:output.css
// watch a directory
sass --watch app/sass:public/stylesheets
