sass学习

基本规则:

1. 变量用$定义
2. 伪类用&定义

3. 样式可嵌套定义,如

   #example{ 
    a {
    body.ie & hover { color: red }
    color: white;
    }
       div {background:black;}
   }

4. body.ie & hover { color: red } <=> body.ie #example a:hover { color: red }
5. 嵌套规则适用群组选择器,> + ~选择器(sass的嵌套其实就是拼接空格)

6. border: {

   style:                 
    left:             
    right:

   }
   <=>

   border-style:
    border-left:
    border-right:

@import的使用:

原生的只有执行到才会加载,速度较慢;而sass的@import在生成文件时就导入,相当于合并css文件

1. 局部文件,约定用下划线定义,如(_example.scss),局部scss文件不会单独编译,只会存在于引用的文件中.
2. 局部文件中的变量添加!default( 如 $val = red !default; ),代表默认值,未定义时生效,全局变量添加!global.
3. 嵌套中可调用局部文件,只在当前嵌套中有效
4. 使用原生@import的情况:
   文件后缀为.css；
   文件名为URL地址（如http://www.sass.hk/css/css.css；
   文件名为CSS的url()值

静默注释

编译后不会显示,格式: // 注释

混合器

1. 通过@mixin mixin($a:red,$b)定义,@include 调用,:后面为默认值
2. 使用时机: 能否为这个混合器想出一个好的简短的名字

继承

1. @extend定义,继承与父样式有关的一切样式(如: .child @extend .father)
2. 可以使用选择器,只对选择器命中的样式生效(后面部分),也对子类生效(前面部分).
3. 继承相当于 .father .child,因此会出现复杂的选择器.

4. 为了避免生成大量选择器,不要在css规则中使用后代选择器

   .foo .bar { @extend .baz; }
    .bip .baz { a: b; }

   这个例子有三个情况 foo->bip->bar 、(foo,bip)->foo->bar、bip-> bar,如果其中一条规则的后代选择器更复杂则代码量呈指数增长.

理解

scss本质上是字符串的格式编译，比如变量，因为是从上到下格式化成css，所以变量只能写在最前面，编译器读取变量值然后替换引用的部分；又比如伪类、嵌套样式，&则不添加空格直接拼接，：则添加一个-字符。