sass基本使用整理

1、使用变量（使用$符号标识变量）比如$highlight-color

• 变量声明：可以在css规则块定义之外存在。当定义在css规则块内，则该变量只能在规则块内使用
• 变量引用：border: 1px solid $highlight-color;
• 变量命名：可以使用中划线和下划线，效果相同
• 通过 #{} 插值语句可以在选择器或属性名中使用变量

$name: foo;

$attr: border;

p.#{$name} {

  #{$attr}-color: blue;

}

2、嵌套css规则

• 避免了重复输入父选择器，易于管理
• ：hover的伪类嵌套需要使用父选择器 &
• 在父选择器之前添加选择器body.ie & { color: green }
• 群组选择器.button, button
• 组合选择器：>、+（元素a后紧跟的b元素）和~（跟在a后的同层b元素）

   dl > {

     dt { color: #333 }

     dd { color: #555 }

   }

3、嵌套属性

• 规则：把属性名从中划线-的地方断开，在根属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中
• border-styleborder-widthborder-color以及border-*等可以写成 border: { style,width,color }
• 缩写形式

nav {

  border: 1px solid #ccc {

      left: 0px;

      right: 0px;

  }

}

4、导入sass样式文件

• @import规则，它允许在一个css文件中导入其他css文件
• 静默注释，以//开头，不会出现在生成的css文件中

5、混合器

• 混合器使用@mixin标识符定义

@mixin rounded-corners {

  -moz-border-radius: 5px;

  -webkit-border-radius: 5px;

  border-radius: 5px;

}

• 在样式表中通过@include来使用这个混合器

notice {

  background-color: green;

  border: 2px solid #00aa00;

  @include rounded-corners;

}

• 混合器中的CSS规则

@mixin no-bullets {

  list-style: none;

  li {

    list-style-image: none;

    list-style-type: none;

    margin-left: 0px;

  }

}

ul.plain {

  color: #444;

  @include no-bullets;

}

ul.plain {

  color: #444;

  list-style: none;

}

ul.plain li {

  list-style-image: none;

  list-style-type: none;

  margin-left: 0px;

}

• 混合器传参

@mixin link-colors($normal, $hover, $visited) {

  color: $normal;

  &:hover { color: $hover; }

  &:visited { color: $visited; }

}

a {

  @include link-colors(blue, red, green);

}

a { color: blue; }

a:hover { color: red; }

a:visited { color: green; }

• 默认参数值（为了在@include混合器时不必传入所有的参数）

@mixin link-colors(

    $normal,

    $hover: $normal,

    $visited: $normal

){

  color: $normal;

  &:hover { color: $hover; }

  &:visited { color: $visited; }

}

6、选择器继承

• 通过@extend语法，选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式

//通过选择器继承继承样式

.error {

  border: 1px solid red;

  background-color: #fdd;

}

.seriousError {

  @extend .error;

  border-width: 3px;

}