特点

  • 引入变量
  • $ 用来标识变量

1.声明变量

  1. $highlight-color: #F90;
  • 任何可以用作css属性值的赋值都 可以用作sass的变量值，甚至是以空格分割的多个属性值，如$basic-border: 1px solid black;，或以逗号分割的多个属性值，如$plain-font: “Myriad Pro”、Myriad、”Helvetica Neue”、Helvetica、”Liberation Sans”、Arial和sans-serif; sans-serif
  • 变量可以在css规则块定义之外存在。当变量定义在css规则块内，那么该变量只能在此规则块内使用
  • 凡是css属性的标准值（比如说1px或者bold）可存在的地方，变量就可以使用
  1. $highlight-color: #F90;
  2. .selected {
  3.   border: 1px solid $highlight-color;
  4. }
  • 在声明变量时，变量值也可以引用其他变量
  1. $highlight-color: #F90;
  2. $highlight-border: 1px solid $highlight-color;
  3. .selected {
  4.   border: $highlight-border;
  5. }
  • 在sass的大 多数地方，中划线命名的内容和下划线命名的内容是互通的，除了变量，也包括对混合器和Sass函数的命名。但是在sass中纯css部分不互通，比如类名、ID或属性名。
  1. $link-color: blue;
  2. a {
  3.   color: $link_color;
  4. }
  5. //在上例中，$link-color和$link_color其实指向的是同一个变量

2.嵌套规则

  • 父选择器 &
  • 群组选择器嵌套
  • 同层组合器
    • 同层相邻组合选择器+
    • 同层全体组合选择器~
  • 嵌套属性
  1. nav {
  2.   border: {
  3.   style: solid;
  4.   width: 1px;
  5.   color: #ccc;
  6.   }
  7. }
  8. nav {
  9.   border-style: solid;
  10.   border-width: 1px;
  11.   border-color: #ccc;
  12. }
  1. nav {
  2.   border: 1px solid #ccc {
  3.   left: 0px;
  4.   right: 0px;
  5.   }
  6. }
  8. nav {
  9.   border: 1px solid #ccc;
  10.   border-left: 0px;
  11.   border-right: 0px;
  12. }

3.导入

@import规则，它允许在一个css文件中导入其他css文件。然而，后果是只有执行到@import时，浏览器才会去下载其他css文件，这导致页面加载起来特别慢

sass也有一个@import规则，但不同的是，sass的@import规则在生成css文件时就把相关文件导入进来。这意味着所有相关的样式被归纳到了同一个css文件中，而无需发起额外的下载请求。另外，所有在被导入文件中定义的变量和混合器（参见2.5节）均可在导入文件中使用

  • 使用sass的@import规则并不需要指明被导入文件的全名。你可以省略.sass或.scss文件后缀
  • sass局部文件的文件名以下划线开头。这样，sass就不会在编译时单独编译这个文件输出css，而只把这个文件用作导入。当你@import一个局部文件时，还可以不写文件的全名，即省略文件名开头的下划线
  • 默认值 !default
  • 导入嵌套
  1. //_blue-theme.scss的局部文件
  2. aside {
  3.   background: blue;
  4.   color: white;
  5. }
  8. ---------------------------
  9. 导入
  10. .blue-theme {@import "blue-theme"}
  12. //生成的结果跟你直接在.blue-theme选择器内写_blue-theme.scss文件的内容完全一样。
  14. .blue-theme {
  15.   aside {
  16.     background: blue;
  17.     color: #fff;
  18.   }
  19. }
  • 静默注释 //

    4.混合器@mixin

    ```css @mixin rounded-corners { -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }

notice { background-color: green; border: 2px solid #00aa00; @include rounded-corners;

}

.notice { background-color: green; border: 2px solid #00aa00; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; }

  2. - 混合器传值
  4. ```css
  5. @mixin link-colors($normal, $hover, $visited) {
  6.   color: $normal;
  7.   &:hover { color: $hover; }
  8.   &:visited { color: $visited; }
  9. }
  11. a {
  12.   @include link-colors(blue, red, green);
  13. }
  15. //或者
  16. a {
  17.     @include link-colors(
  18.       $normal: blue,
  19.       $visited: green,
  20.       $hover: red
  21.   );
  22. }
  • 默认参数值
  1. @mixin link-colors(
  2.     $normal,
  3.     $hover: $normal,
  4.     $visited: $normal
  5.   )
  6. {
  7.   color: $normal;
  8.   &:hover { color: $hover; }
  9.   &:visited { color: $visited; }
  10. }

6.精简

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

7.运算和函数

todo