About SCSS

| |

Something about scss.

语法格式 (Syntax)

Sass 有两种语法格式。

  • SCSS (Sassy CSS) 这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。此外，SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax)，以及早期的 IE 滤镜写法。文件名为 .scss。

  • 最早的 Sass 语法格式，被称为缩进格式 (Indented Sass) 简称 “Sass”，是一种简化格式。它使用 “缩进” 代替 “花括号” 表示属性属于某个选择器，用 “换行” 代替 “分号” 分隔属性，很多人认为这样做比 SCSS 更容易阅读，书写也更快速。缩进格式也可以使用 Sass 的全部功能，只是与 SCSS 相比个别地方采取了不同的表达方式，文件名为 .scss。

条件

@if @else

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$boolean: true !default;
 
@mixin simple-mixin {
  @if $boolean {
    display: block;
  }
  @else {
    display: none;
  }
}
 
.some-selector {
  @include simple-mixin;
}

循环

@for

同for循环

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// 0、1、2、3
@for $i from 0 through 3 {
  .test-#{$i} {
    animation: bounce-in .5s ease-in-out #{$i * .1}s;
  }

  .temp-#{$i} {
    width: 100px * $i;
  }
}

// 0、1、2
@for $i from 0 to 3 {

}

@each

用于循环数组:

1
@each $var in <list>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

$list: adam john wynn mason kuroir;
 
@mixin author-images {
  @each $author in $list {
    .photo-#{$author} {
        background: url("/images/avatars/#{$author}.png") no-repeat;
    }
  }
}

.author-bio {
  @include author-images;
}

@while

1
2
3
4
5
6
7
8
9
10

$types: 4;
$type-width: 20px;
 
@while $types > 0 {
  .while-#{$types} {
    width: $type-width + $types;
  }
  $types: $types - 1;
}

sass-loader

scss文件

在webpack中处理scss文件需要配置sass-loader：

1
2
3
4
5
6
{
  loader: 'sass-loader',
  options: {
    outputStyle: 'expanded'
  }
}

outputStyle为scss转css时的输出格式，具体解释可看：sass文档

如果不配置该项，sass-loader会默认outputStyle="compressed"：

1
2
3
4
5
6
// sass-loader/lib/normalizeOptions.js

// opt.outputStyle
if (!options.outputStyle && loaderContext.minimize) {
  options.outputStyle = "compressed"; // 压缩
}

这会导致一个问题，在使用px2rem时，有时会使用 /*px*/ /*no*/这样的注释，outputStyle = "compressed"压缩会删除注释。
因此配置outputStyle: 'expanded'可以解决这个问题。相关的blog有webpack 中 postcss-px2rem 生产环境中注释失效。
sass-loader就让它只负责转scss文件，压缩的事情就交给webpack其他专业的压缩工具。

sass文件

另外，在处理.sass文件时，需配置indentedSyntax: true，声明处理的是sass文件

1
2
3
4
5
6
7
{
  loader: 'sass-loader',
  options: {
    indentedSyntax: true,
    outputStyle: 'expanded'
  }
}