SASS 规范

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

/* SASS */
.ms
  width: 10px;
  .container
     width: 100%;

/* SCSS */
.ms {
  width: 100%;
  .container {
    width: 100%;
  }
}

使用

SCSS 语法对 css 语法具备友好的兼容性与扩展性，统一约定采取 SCSS 语法编写样式。

.ms {
  width: 100%;
  .container {
    width: 100%;
  }
}

注释

SCSS 文件编写：全部遵循 CSS 注释规范

变量

项目中，样式变量统一声明在 variables.scss 文件中。

$color: blue;
.ms {
  color: $color;
  border-color: $color;
}

混合(mixin)

项目中，根据业务功能自定义模块，在需要使用地方通过 @include 调用。

@mixin icon($x: 0, $y: 0) {
  background: url(/img/icon.png);
}
.ms-name {
  @include icon(-10px, 0);
}
.ms-age {
  @include icon(-10px, 0);
}

继承(extend)

.ms-name {
  font-size: 12px;
  color: blue;
}
.ms-age {
  font-size: 12px;
  color: blue;
  font-weight: 600;
}

写法 1:

.ms-name {
  font-size: 12px;
  color: blue;
}
.ms-age {
  @extend .ms-name;
  font-weight: 600;
}

写法 2:

%size-color {
  font-size: 12px;
  color: blue;
}
.ms-name {
  @extend %size-color;
}
.ms-age {
  @extend %size-color;
  font-weight: 600;
}

for 循环

.ms-1 {
  background-position: 0 -20px;
}
.ms-2 {
  background-position: 0 -40px;
}
.ms-3 {
  background-position: 0 -60px;
}

写法：

@for $i from 1 through 3 {
  .ms-#{$i} {
    background-position: 0 (-20px) * $i;
  }
}

each 循环

.ms-name {
  background-image: url(img/icon-name.png);
}
.ms-age {
  background-image: url(img/icon-age.png);
}

写法：

@each $name in name, age {
  .ms-#{$name} {
    background-image: url(img/icon-#{$name}.png);
  }
}

function 函数

@function pxToRem($px) {
  @return $px / 10px * 1rem;
}
.ms {
  font-size: pxToRem(12px);
}

嵌套层级限制

• scss 统一约定 SCSS 嵌套层级为 3 层，超过 3 层需从新评估编写；层级过深，css 选择器有性能消耗。

官方文档参考：