1.嵌套

  1. /*主要防止结构错乱*/
  2. /*支持css写法*/
  3. /*特殊写法*/
  4. .main{
  5.   .child{} /*相当于:.main .child{}*/
  6.   &:nth-child(1) /*相当于:.main:nth-child(1){}*/
  7.   &-a /*相当于:.main-a{}*/
  8. }

2.变量

  1. /*$变量名：变量值,例如：$color：red*/
  3. /*数字，1, 2, 13, 10px*/
  4. /*字符串，有引号字符串与无引号字符串，"foo", 'bar', baz*/
  5. /*颜色，blue, #04a3f9, rgba(255,0,0,0.5)*/
  6. /*布尔型，true, false*/
  7. /*空值，null*/
  8. /*数组 (list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif*/
  9. /*maps, 相当于 JavaScript 的 object，(key1: value1, key2: value2)*/
  11. /*常规用法*/
  12. $color:red
  13. text{color：color}
  15. /*属性名/选择器中使用变量*/
  16. $a='wa'
  17. .main-#{$a}{}     /*main-wa{}*/

3.支持运算:

  1. /*+, -, *, /, %*/
  2. /*关系运算 <, >, <=, >=*/
  3. /*相等运算 ==, !=*/
  4. /*布尔型的 and or 以及 not 运算*/

4.混合器

  1. /*定义混合*/
  2. @mixin link-colors($normal:red, $hover, $visited) {
  3.   color: $normal;
  4.   &:hover { color: $hover; }
  5.   &:visited { color: $visited; }
  6. }
  8. /*调用混合*/
  9. a {
  10.   @include link-colors(blue, red, green);
  11. }

5.继承

  1. //通过选择器继承继承样式
  2. .error {
  3.   border: 1px red;
  4.   background-color: #fdd;
  5. }
  6. .seriousError {
  7.   @extend .error;
  8.   border-width: 3px;
  9. }

6.导入文件

  1. @import  'sss.scss'     /*会被编译chengcss*/
  2. @import  '_sss.scss'    /*不会被编译chengcss*/
  4. /*局部导入*/
  5. .blue-theme {@import"blue-theme"}

7.SASS函数

这个不是很重要，上面这些会了就行，此处记录几个常用的

  1. /*循环-数字*/
  2. @for $i from <start> through <end>{}
  4. /*循环变量*/
  5. @each $author in $list {   }
  7. /*循环判断*/
  8. @while $types > 0 {
  9.  $types: $types - 1;
  10. }
  12. /*判断*/
  13. @if 1==2{}@else{}