【Sass】常用知识点总结

• 如何编译Sass
• Partials
• Variables
  • colors
  • font stacks
  • 全局变量
• Mixins
  • 全局mixin
  • 推荐的mixin插件
    • Bourbon
• Extend/Inheritance
• Maps
• Function

如何编译Sass

全局安装

npm install sass -g

编译

watch 单一文件

sass watch scss/app.scss css/app.css

watch 整个文件夹

sass watch scss:css

注意中间有个冒号！！！

Partials

你可以创建一些只包含很少的代码片段的partial Sass files，然后可以把它们 import 到其他 Sass文件中。这种方式可以很好地模块化你的 CSS, 便于以后维护。一个 partial Sass 文件命名通常以下划线开头，比如 _partial.scss.

这样命名的好处是：Sass 会知道这是一个 partial 文件，它需要被import到其他文件中，在编译时，不会单独编译它。

例如：定义了以下 partial 文件，并在 app.scss 中引入。

// app.scss
// IMPORT ALL SASS DIRECTORY FILES

@import '0-plugins/_plugins-dir';
@import '1-base/_base-dir';
@import '2-layouts/_layouts-dir';
@import '3-modules/_modules-dir'

在 import 文件时，并不需要包含文件的扩展名.scss不需要写。

当watch整个文件夹，在terminal敲入

sass --watch scss:css

会发现，Sass只编译了 app.scss

这是我们想要的结果，不会编译其他多余的partial 文件。如果命名不是以下划线开始，所有文件都会编译了。就会变成这样：

另外，在 app.scss 中 import partial 文件时，可以不加下划线。

// IMPORT ALL SASS DIRECTORY FILES

@import '0-plugins/plugins-dir';
@import '1-base/base-dir';
@import '2-layouts/layouts-dir';
@import '3-modules/modules-dir'

编译是没有问题的。

关于如何组织Sass文件的结构

推荐的 是SMACSS，一本书《Scalabel and Modular Architectrue for CSS》，介绍了模块化CSS的一些规则和建议。

可以在线阅读和下载。

Variables

变量可以帮助我们保存一些想要重复使用的信息，比如 colors, font stacks, padding的值等等。 Sass 使用 $ 来识别一个变量名.

colors

// _box.scss

// VARIABLES
$base-color: yellow;

.box {
    height: 100px;
    width: 100px;
    background-color: $base-color;
}

font stacks

//_base.scss

// VARIABLES

$font-stack-serif: Georgia, Times, serif;
$font-stack-sans-serif: Helvetica, Arial, sans-serif;

body {
    background: orangered;
    color: white;
}

h1 {
    font-family: $font-stack-serif;
}

h2, h3 {
    font-family: $font-stack-sans-serif;
}

全局变量

如果我们在不同的 scss 文件中都定义了自己的变量，会显得很乱，也不便于以后维护。

推荐的做法是，定义一个全局的_variables.scss文件，将所有的变量放在这里。

// GLOBAL VARIABLES

$brand-color:pink;
$base-color: yellow;
$base-font-color: white;

$font-stack-serif: Georgia, Times, serif;
$font-stack-sans-serif: Helvetica, Arial, sans-serif;

$font-size-base: 18px;

然后在 app.scss 的第一行引入它。

// app.scss
// IMPORT ALL SASS DIRECTORY FILES

@import 'variables';
@import '0-plugins/plugins-dir';
@import '1-base/base-dir';
@import '2-layouts/layouts-dir';
@import '3-modules/modules-dir'

在其他文件中使用变量。

// _base.scss

body {
    background: $brand-color;
    color: $base-font-color;
    font-size: $font-size-base;
}

h1 {
    font-family: $font-stack-serif;
}

h2, h3 {
    font-family: $font-stack-sans-serif;
}

Mixins

mixin 是用来解决重复代码的，比较像没有返回值的函数，可以传入参数。

官网示范的一个用法是，解决CSS3属性的不同vender prefies的问题。其实，任何你需要reuse的代码，都可以使用mixin。

在CSS3的一些属性中，有些属性由于不同 vender prefixes的存在，变得非常冗长，例如 transform box-shadow border-radius 等等。

.box {
    -webkit-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    transform: rotate(30deg);
}

rotate(30deg) 写了3遍。

使用 mixin 可以解决这个问题，因为 mixin 可以像函数一样传入参数。

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.box { @include transform(rotate(30deg)); }

在Angular中，编译器会自动加上vender prefixes，所以在写scss时，可以不加这些prefixes。

全局mixin

再复杂一点：

// _box.scss

.box {
    height: 100px;
    width: 100px;
    display: inline-block;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    
    -webkit-box-shadow: 0 5px 10px #555;
    -moz-box-shadow: 0 5px 10px #555;
    box-shadow: 0 5px 10px #555;

    background: orangered;
    background: -webkit-linear-gradient(orangered, yellow);
    background: -o-linear-gradient(orangered, yellow);
    background: -moz-linear-gradient(orangered, yellow);
    background: linear-gradient(orangered, yellow);
}

为了保持各个module的清爽，新建一个文件_mixins.scss来设置全局的mixins。在 app.scss 中导入它。

// app.scss

@import 'variables';
@import 'mixins';
@import '0-plugins/plugins-dir';
@import '1-base/base-dir';
@import '2-layouts/layouts-dir';
@import '3-modules/modules-dir'

定义mixin

// _mixins.scss

// GLOBAL MIXINS

@mixin box($radius, $shadowColor, $gradientColor1, $gradientColor2) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
    
    -webkit-box-shadow: 0 5px 10px $shadowColor;
    -moz-box-shadow: 0 5px 10px $shadowColor;
    box-shadow: 0 5px 10px $shadowColor;

    background: $gradientColor1;
    background: -webkit-linear-gradient($gradientColor1, $gradientColor2);
    background: -o-linear-gradient($gradientColor1, $gradientColor2);
    background: -moz-linear-gradient($gradientColor1, $gradientColor2);
    background: linear-gradient($gradientColor1, $gradientColor2);
}

在 _box.scss 中使用

// BOX

.box {
    height: 100px;
    width: 100px;
    display: inline-block;
    @include box(100%, #555, orangered, yellow);
}

这样可以传入不同的参数来实现不同的box啦。

#box2 {
    @include box(20px, #000, #639, #fc3);
}

#box3 {
    @include box(5px, #ddd, black, teal);
}

消除了很多重复性代码。

推荐的mixin插件

Bourbon

Bourbon is a lightweight Sass tool set

https://www.bourbon.io/

如果不知道怎么组织自己的mixin，可以参考它的写法。

例如 clearfix

@mixin clearfix {
  &::after {
    clear: both;
    content: "";
    display: block;
  }
}

使用：

.element {
  @include clearfix;
}

Extend/Inheritance

Sass的这一特性依然是为了遵循Dry principle，减少重复代码。你可以使用 @extend 来共享属性。

比如，我们要创建一个message module，它有3个状态，success、warning和error。

// index.html
<body>
   <div class="message success"></div>
   <div class="message warning"></div>
   <div class="message error"></div>
</body>

我们可以使用嵌套，将样式定义成这样：

// _message.scss

.message {
  width: 100%;
  height: 50px;
  background: #000; 
  margin: 10px auto;
  &.success {
    background: green;
  } 
  &.warning {
    background: orange;
  } 
  &.error {
    background: red;
  } 
}

还可以使用extend来共享属性。

%message {
  width: 100%;
  height: 50px;
  background: #000; 
  margin: 10px auto;
}

.success {
    @extend %message;
    background: green;
}

.warning {
    @extend %message;
    background: orange;
}

.error {
    @extend %message;
    background: red;
}

html中不需要再加message class，更加简洁。

<body>
   <div class="success"></div>
   <div class="warning"></div>
   <div class="error"></div>
</body>

Maps

Sass提供了可以保存键值对的Maps结构。

$map: (key1: value1, key2: value2, key3: value3);

例如，我们在scss中会定义很多颜色值，一般使用变量就可以了。

$primary-color: #005DFF;
$accent-color: #FFF6BB;
$border-color: #ddd;

// other variables

body {
    background-color: $primary-color;
    color: $accenet-color;
}

当还定义了其他很多变量后，就显得十分杂乱。可以单独将所有颜色值封装成一个Maps结构，再使用map-get($map,$key)来获取值。

$colors: (
    primary: #005DFF,
    accent: #FFF6BB,
    border: #ddd
);

body {
    background-color: map-get($colors, primary);
    color: map-get($colors, accent);
}

Function

function是有返回值的，最后要加 @return

比如在上例中，为了获取颜色值，我们会多次使用map-get($map,$key) ，看起来代码很长，可以自定义一个获取颜色的function来reuse这段代码。

$colors: (
    primary: #005DFF,
    accent: #FFF6BB,
    border: #ddd
);

@function color($color-name) {
    @return map-get($colors, $color-name);
}

body {
    background-color: color(primary);
    color: color(accent);
}