基本定义
css预处理器，生成文件后缀scss，可以编译成css文件，被html引用，但不能替代css。
安装流程
- 安装ruby，并设置环境变量
- 安装sass，
gem install sass - 基本命令行
(1): 显示scss文件转化的css文件：sass t.scss;
(2): 编译成对应css文件：sass t.scss t.css;
(3): 编译成四种风格中的一种：sass --style compressed t.scss t.css
(4): 监听文件或者目录，自动编译：sass --watch t.scss:t.css或者sass --watch app/t.css:pubic/stylesheet
四种编译风格
- nested：嵌套缩进的css代码，它是默认值。
- expanded：没有缩进的、扩展的css代码。
- compact：简洁格式的css代码。
- compressed：压缩后的css代码。
基本语法
$black:#000 //变量定义
border-#{$side}-radius: 5px; //变量嵌套在字符串中 #{}
right:$argu*.3 //可以计算
div{a{...}}; //可以嵌套
p{border:{color:#000}} //属性可以嵌套，需要用冒号
a{&:hover{color:#000}} //可以用&引用父元素，
/*!重要注释，压缩会保留
*/
复用
- 继承
@extend
.class2 {@extend .class1;} - Mixin 重用代码块
@minxin 定义
@include 调用
@minxin keymap($value: 10px){ //可以指定参数和缺省
left：$value
}
div{
@include keymap
}
//实例，用来生成浏览器前缀
@mixin rounded($vert, $horz, $radius: 10px) {
border-#{$vert}-#{$horz}-radius: $radius;
-moz-border-radius-#{$vert}#{$horz}: $radius;
-webkit-border-#{$vert}-#{$horz}-radius: $radius;
}
插入文件
@import 等同于css的 @import 命令
颜色函数
- lighten(#cc3, 10%) // #d6d65c
- darken(#cc3, 10%) // #a3a329
- grayscale(#cc3) // #808080
- complement(#cc3) // #33c
高级用法，添加函数写法
函数保留字需要加上@：@for
可以自定义函数
@function pow($x,$y){
@if($x>$y){
@for $i from 0 through 1{
$x : 1;
}
}@else{
$y:1;
}
@return $x+$y;
}
$res:pow(1,0)+px;
div{
@if(true){
font-size:$res;
}@else{
font-size: 10px;
}
}
//编译结果
div {
font-size: 1px; }