Sass Basics

https://sass-lang.com/guide

#Preprocessing

Sass 这一预处理工具,能够帮助我写作更具健壮性、可维护的 CSS。

可通过 yarn global add sass 全局安装。之后可以在 Terminal 执行:

1
2
3
4
5
6
# compile one file
sass input.scss output.css
# watch individual files or directories
sass --watch input.scss output.css
# watch input folder and ouput folder
sass --watch app/sass:public/stylesheets

#Variables

变量(Variables)可以存储需要重复使用的信息。

1
2
3
4
5
6
7
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
1
2
3
4
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

#Nesting

Sass 能够处理和 HTML 一样,写出嵌套的 CSS。但注意不要滥用。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

#Partials

还可以创建一些小的代码片段,包含在一个主 Sass 文件中。代码片段可视为模块化的组件。代码片段文件的命名: _filename.scss ,有了 _ 在编译时 不会生成 *.css 文件。在主 Sass 文件中,使用 @use 调用 partial 文件。

#Modules

目前只有 Dart Sass 支持使用 @use 导入模块,其他分支(LibSass,Ruby Sass)需使用 @import rule ,后者已经不鼓励使用

1
2
3
4
5
6
7
8
// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
1
2
3
4
5
6
7
// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}
1
2
3
4
5
6
7
8
9
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

.inverse {
  background-color: #333;
  color: white;
}

Mixins Extend/Inheritance Operators

Layout of comment panels