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

Sass

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

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

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

编码格式

团队约定

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

更多关于 SASS 编码：

SASS注释规范

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

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

SCSS 文件内

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

标准的注释规范如下：

嵌套规范

选择器嵌套

  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.     }

混合(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;
  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 文件，占位选择器以 % 标识定义，通过 调用

  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.     font-size: 12px;
  14.     color: red;
  15. }
  16. .jdc_2 {
  17.     @extend .jdc_1;
  19. }
  21. // 或者
  22. %font_red {
  23.     font-size: 12px;
  24.     color: red;
  25. }
  26. .jdc_1 {
  27.     @extend %font_red;
  28. }
  29. .jdc_2 {
  30.     @extend %font_red;
  31.     font-weight: bold;
  32. }

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

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;

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