语法选用

SASS有两种语法格式，一种是 SCSS (Sassy CSS)，另一种是缩进格式（Indented Syntax），有时称之为 Sass。

SCSS

SCSS语法基于 CSS 语法扩展，每一个有效的 CSS 文件都是一个有效的具有相同含义的 SCSS 文件，换种说法就是 SCSS 能识别大多数的 CSS hacks 写法和浏览器前缀写法以及早期的 IE 滤镜写法，这种格式以 .scss 作为扩展名。

Sass

Sass 使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，很多人认为这样做比 SCSS 更容易阅读，书写也更快速。缩进格式也可以使用 Sass 的全部功能，只是与 SCSS 相比个别地方采取了不同的表达方式，具体请查看 the indented syntax reference。这种格式以 .sass 作为拓展名。

更详细的用法请阅读 SASS 官网文档：DOCUMENTATION

团队约定

考虑到 SCSS 语法对 CSS 语法友好的兼容性和扩展性，我们在使用 SASS 编写样式的时候，统一使用 SCSS 语法

编码格式

When running on Ruby 1.9 and later, Sass is aware of the character encoding of documents. Sass follows the CSS spec to determine the encoding of a stylesheet, and falls back to the Ruby string encoding. This means that it first checks the Unicode byte order mark, then the @charset declaration, then the Ruby string encoding. If none of these are set, it will assume the document is in UTF-8.

当在 Ruby1.9或更新的版本运行的时候，SASS 能识辨文档的字符编码。SASS 遵循 CSS 规范去确定样式文件的编码，进而转回 Ruby 字符串编码。这意味着SASS编译的时候会首先检测 BOM，然后到 @charset 声明，再到 Ruby 字符串编码，如果以上都没有设置，SASS 会认为文档的编码为 UTF-8

团队约定

严格遵守上面 “CSS规范” 中的 “编码规范”

更多关于 SASS 编码：SASS Encodings

SASS注释规范

SASS支持 CSS 标准的多行注释 /* */，同时也支持单行注释 //。

  • 多行注释在使用非 Compressed 模式进行编译后的输出文件中会保留下来，单行注释 // 侧会被移除
  • 多行注释和单行注释在 SASS 编译后输出的压缩 CSS 文件都会被移除
  • 当多行注释内容第一个字符是感叹号 “!” 的时候，即 /*! */，SASS 无论用哪一种编译方式编译注释都会保留
  • 注释内容可以加入 SASS 变量

团队约定

SCSS 文件内

  • 全部遵循 CSS 注释规范
  • 不使用 /*! */ 注释方式
  • 注释内不放 SASS 变量

标准的注释规范如下：

  1. @charset "UTF-8";
  3. /**
  4.  * @desc File Info
  5.  * @author liqinuo
  6.  * @date 2015-10-10
  7.  */
  9. /* Module A
  10. ----------------------------------------------------------------*/
  11. .mod_a {}
  13. /* module A logo */
  14. .mod_a_logo {}
  16. /* module A nav */
  17. .mod_a_nav {}
  20. /* Module B
  21. ----------------------------------------------------------------*/
  22. .mod_b {}
  24. /* module B logo */
  25. .mod_b_logo {}
  27. /* module B nav */
  28. .mod_b_nav {}

嵌套规范

选择器嵌套

  1. /* CSS */
  2. .jdc {}
  3. body .jdc {}
  5. /* SCSS */
  6. .jdc {
  7.     body & {}
  8. }
  1. /* CSS */
  2. .jdc {}
  3. .jdc_cover {}
  4. .jdc_info {}
  5. .jdc_info_name {}
  7. /* SCSS */
  8. .jdc {
  9.     &_cover {}
  10.     &_info {
  11.         &_name {}
  12.     }
  13. }

属性嵌套

  1. /* CSS */
  2. .jdc {
  3.     background-color: red;
  4.     background-repeat: no-repeat;
  5.     background-image: url(/img/icon.png);
  6.     background-position: 0 0;
  7. }
  9. /* SCSS */
  10. .jdc {
  11.     background: {
  12.         color: red;
  13.         repeat: no-repeat;
  14.         image: url(/img/icon.png);
  15.         position: 0 0;
  16.     }
  17. }

变量

可复用属性尽量抽离为页面变量，易于统一维护

  1. // CSS
  2. .jdc {
  3.     color: red;
  4.     border-color: red;
  5. }
  7. // SCSS
  8. $color: red;
  9. .jdc {
  10.     color: $color;
  11.     border-color: $color;
  12. }

混合(mixin)

根据功能定义模块，然后在需要使用的地方通过 @include 调用，避免编码时重复输入代码段

  1. // CSS
  2. .jdc_1 {
  3.     -webkit-border-radius: 5px;
  4.     border-radius: 5px;
  5. }
  6. .jdc_2 {
  7.     -webkit-border-radius: 10px;
  8.     border-radius: 10px;
  9. }
  11. // SCSS
  12. @mixin radius($radius:5px) {
  13.     -webkit-border-radius: $radius;
  14.     border-radius: $radius;
  15. }
  16. .jdc_1 {
  17.     @include radius; //参数使用默认值
  18. }
  19. .jdc_2 {
  20.     @include radius(10px);
  21. }
  25. // CSS
  26. .jdc_1 {
  27.     background: url(/img/icon.png) no-repeat -10px 0;
  28. }
  29. .jdc_2 {
  30.     background: url(/img/icon.png) no-repeat -20px 0;
  31. }
  33. // SCSS
  34. @mixin icon($x:0, $y:0) {
  35.     background: url(/img/icon.png) no-repeat $x, $y;
  36. }
  37. .jdc_1 {
  38.     @include icon(-10px, 0);
  39. }
  40. .jdc_2 {
  41.     @include icon(-20px, 0);
  42. }

占位选择器 %

如果不调用则不会有任何多余的 css 文件，占位选择器以 % 标识定义，通过 @extend 调用

  1. //scss
  2. %borderbox {
  3.     -webkit-box-sizing: border-box;
  4.     box-sizing: border-box;
  5. }
  6. .jdc {
  7.     @extend %borderbox;
  8. }

extend 继承

  1. // CSS
  2. .jdc_1 {
  3.     font-size: 12px;
  4.     color: red;
  5. }
  6. .jdc_2 {
  7.     font-size: 12px;
  8.     color: red;
  9.     font-weight: bold;
  10. }
  12. // SCSS
  13. .jdc_1 {
  14.     font-size: 12px;
  15.     color: red;
  16. }
  17. .jdc_2 {
  18.     @extend .jdc_1;
  19.     font-weight: bold;
  20. }
  22. // 或者
  23. %font_red {
  24.     font-size: 12px;
  25.     color: red;
  26. }
  27. .jdc_1 {
  28.     @extend %font_red;
  29. }
  30. .jdc_2 {
  31.     @extend %font_red;
  32.     font-weight: bold;
  33. }

for 循环

  1. // CSS
  2. .jdc_1 {background-position: 0 -20px;}
  3. .jdc_2 {background-position: 0 -40px;}
  4. .jdc_3 {background-position: 0 -60px;}
  6. // SCSS
  7. @for $i from 1 through 3 {
  8.     .jdc_#{$i} {
  9.         background-position: 0 (-20px) * $i;
  10.     }
  11. }

注意：#{} 是连接符，变量连接使用时需要依赖

each 循环

  1. // CSS
  2. .jdc_list {
  3.     background-image: url(/img/jdc_list.png);
  4. }
  5. .jdc_detail {
  6.     background-image: url(/img/jdc_detail.png);
  7. }
  9. // SCSS
  10. @each $name in list, detail {
  11.     .jdc_#{$name} {
  12.         background-image: url(/img/jdc_#{$name}.png);
  13.     }
  14. }
  17. // CSS
  18. .jdc_list {
  19.     background-image: url(/img/jdc_list.png);
  20.     background-color: red;
  21. }
  22. .jdc_detail {
  23.     background-image: url(/img/jdc_detail.png);
  24.     background-color: blue;
  25. }
  27. // SCSS
  28. @each $name, $color in (list, red), (detail, blue) {
  29.     .jdc_#{$name} {
  30.         background-image: url(/img/jdc_#{$name}.png);
  31.         background-color: $color;
  32.     }
  33. }

function 函数

  1. @function pxToRem($px) {
  2.     @return $px / 10px * 1rem;
  3. }
  4. .jdc {
  5.     font-size: pxToRem(12px);
  6. }

运算规范

运算符之间空出一个空格

  1. .jdc {
  2.     width: 100px - 50px;
  3.     height: 30px / 5;
  4. }

注意运算单位，单位同时参与运算，所以 10px 不等于 10，乘除运算时需要特别注意

  1. // 正确的运算格式
  2. .jdc {
  3.     width: 100px - 50px;
  4.     width: 100px + 50px;
  5.     width: 100px * 2;
  6.     width: 100px / 2;
  7. }