SASS Guide


SASS规范指南,SASS 代码的基本规范和原则与 CSS 编码规范 保持一致。


文档目录

  1. 编码
  2. 代码组织
  3. @import 语句
  4. 变量
  5. 继承

1 编码

【强制】 使用UTF-8编码,每个SASS文件的第一行必须是定义编码的 @charset "UTF-8";

如果没定义编码,很有可能会出现跨平台兼容问题。

2 代码组织

【强制】 代码必须按如下形式按顺序组织:

  1. 全局的变量声明 || @import
  2. 样式声明;

示例:

$base-font-size          : 12px !default; // 字号
$base-font-family        : "Hiragino Sans GB", "Microsoft Yahei", "WenQuanYi Micro Hei", sans-serif !default; // 字体族

@import "base/config";
@import "biz/page";

body {
    background: #fff;
}

3 @import 语句

【强制】 同一个SASS文件中的所有的 @import必须放在同一块,不允许分开:

【建议】 使用双引号引入SASS文件,至少同一项目要保持一致:

4 变量

【强制】 变量命名必须采用 @foo-bar 形式,不允许使用 @fooBar 形式;

示例:

/* Not so great */
$cardColor: #fff;

/* Better */
$card-color: #fff;

5 继承

【强制】 使用继承时,如果在声明块内书写 @extend 语句,必须写在开头;

示例:

/* Not so great */
.selector {
    color: #fff;
    @extend sameStyle;
}

/* Better */
.selector {
    @extend sameStyle;
    color: #fff;
}