【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);
}