我們一起聊聊Sass 完整指南

作者：CUGGZ 2022-11-12 12:33:38

Sass 是一個 CSS 預(yù)處理器，完全兼容所有版本的 CSS。實際上，Sass 并沒有真正為 CSS 語言添加任何新功能。只是在許多情況下可以可以幫助我們減少 CSS 重復(fù)的代碼，節(jié)省開發(fā)時間。下面就來看看 Sass 中常用的功能吧！

1. 注釋

在 Sass 中支持兩種類型的注釋：

// 注釋一

/* 注釋二 */

需要注意，當 Sass 編譯成CSS時，第一種注釋不會編譯到CSS中（只在Sass文件中可見），第二種注釋會編譯到CSS中。

2. 嵌套

嵌套的寫法是Sass的一大特點，通過嵌套這些代碼，可以得到類似HTML結(jié)構(gòu)的CSS代碼，使代碼更具可讀性。

nav {
    background : #C39BD3;
    padding : 10px;
    height: 50px;
  
    ul {
        display: flex;
        list-style : none;
        justify-content: flex-end;

        li {
            color: white;
            margin-right: 10px;
        } 
    }
}

那為什么要使用嵌套呢？在CSS中，如果想為其父元素的繼承元素定義樣式，就必須每次都選擇父元素：

html, body {
    height: 100%;
}

html #root, body #root {
    height: 100%;
}

html .div-with-button, body .div-with-button {
    background-color: black;
}

html .div-with-button button, body .div-with-button button {
    background-color: #e4c681;
}

html .div-with-button button:hover, body .div-with-button button:hover {
    background-color: #ffe082;
}

在Sass中就可以這樣寫，這樣寫就會使代碼更加清晰、條理和簡潔：

html, body {
  height: 100%;

  #root {
    height: 100%;
  }

  .div-with-button {
    background-color: black;

    button {
      background-color: #e4c681;

      &:hover {
        background-color: #ffe082;
      }
    }
  }
}

注意，在編寫Sass時，要嵌套嵌套太深，盡量不要超過三層，超過之后就會導(dǎo)致代碼難以維護，并且在編譯為CSS時就會出現(xiàn)不必要的選擇器，就會導(dǎo)致CSS文件變大。

我們還可以在嵌套中使用 &，比如鼠標在按鈕上懸浮時，改變顏色。在CSS中是這樣的：

button {
  background-color: #535353;
  color: #000;
}
button:hover {
  background-color: #000;
  color: #fff;
}

在Sass中就可以這么寫：

button {
  background-color: #535353;
  color: #000;
  &:hover {
    background-color: #000;
    color: #fff;
  }
}

通常，& 總是指向它上面的元素，可以用于偽類和偽元素：

.box {
  &:focus{} 
  &:hover{}
  &:active{}
  &:first-child{} 
  &:nth-child(2){}
  &::after{} 
  &::before{} 
}

編譯后的CSS代碼如下：

.box:focus{} 
.box:hover{}
.box:active{}
.box:frist-child{}
.box:nth-child(2){}
.box::after{}
.box::before{}

此外，如果類以相同的詞開頭（比如box-yellow和box-red），就可以嵌套它們：

.box {
  &-yellow {
    background: #ff6347;
  }
  &-red {
    background: #ffd700;
  }
  &-green {
    background: #9acd32;
  }
}

編譯成CSS就是這樣的：

.box-yellow {
  background: #ff6347;
}
.box-red {
  background: #ffd700;
}
.box-green {
  background: #9acd32;
}

Sass還支持使用:來嵌套屬性：

add-icon {
  background : {
    image: url("./assets/arrow-right-solid.svg");
    position: center center;
    repeat: no-repeat;
    size: 14px 14px;
  }
}

上面的代碼編譯為如下CSS：

.add-icon {
  background-image: url("./assets/arrow-right-solid.svg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
}

3. 變量

變量是用來儲存數(shù)據(jù)的，在Sass中，我們可以將任何有效的CSS值保存在變量中。變量使用$符號定義：

$red: #ee4444;
$black: #222;
$bg-color: #3e5e9e;
$link-color: red;
$p-color: #282A36;

$font-p: 13px;
$font-h1: 28px;

$base-font: 'Noto Sans KR', sans-serif;

變量的使用：

body {
    background-color : $bg-color;
    font-size : $font-p;
    font-family : $base-font;
}

h1 {
    font-size: $font-h1;
    color: $black;
}

p {
    font-size: $font-p;
    color: $black;
}

a {
    color: $link-color;
}

當Sass編譯成CSS時，所有的變量都會被替換為定義的變量值。變量可以減少重復(fù)、進行復(fù)雜的數(shù)學(xué)運算等。

需要注意，CSS變量是有范圍的，位于頂層的變量都是全局變量，在塊中定義的變量都是局部變量。全局變量可以在任何地方使用，局部變量只能在變量定義的塊中使用。

$my-global-variable: "global";

div {
  $my-local-variables: "local";
}

變量值是可以覆蓋的：

$color: #fefefe;
.content {
  background-color: $color;
}

$color: #939393;
.footer {
  background-color: $color;
}

在上面的代碼中，content的背景顏色是#fefefe，而footer的背景顏色是#939393。要想改變?nèi)肿兞浚托枰砑?global修飾符：

$color: #111;
.content {
  $color: #222;
  background-color: $color;
}
.footer {
  $color: #333 !global;
}

除此之外，Sass變量是可以指定默認值的：

$message-color: blue !default;

.message {
    color: $message-color;
}

編譯成的CSS代碼如下：

p.message {
  color: blue;
}

我們可以在 @import 之前覆蓋模塊默認值：

$message-color: black;
@import 'my-module';

.message {
    color: $message-color;
}

編譯成的CSS代碼如下：

p.message {
  color: black;
}

也就是說，帶有 !default 的變量只有在沒有值的情況下才會生效。

4. Mixins 和 Include

mixin 是一組可以重用的 CSS 聲明，語法類似于JavaScript中的函數(shù)，使用 @mixin 指令來代替 function 關(guān)鍵字。調(diào)用 mixin 是通過 @include 語句完成的。

以下是用 mixins 使元素水平垂直居中的方法：

@mixin absolute-center() {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
}

.element {
  @include absolute-center();
}

當然，mixin也是支持傳遞參數(shù)的：

@mixin square($size) {
  width:$size;
  height:$size;
}
div {
  @include square(60px);
  background-color:#000;
}

參數(shù)可以是可選的，可選參數(shù)的定義和Sass變量的定義形式是一樣的：

@mixin square($width: 50px) {
  width:$size;
  height:$size;
}

我們還可以將 CSS 規(guī)則傳遞給 mixins。這些規(guī)則可以在使用 @content 的 mixin 中使用。

@mixin hover-not-disabled {
  &:not([disabled]):hover {
    @content;
  }
}
.button {
  border: 1px solid black;
  @include hover-not-disabled {
    border-color: blue;
  }
}

這樣mixin中的@content在編譯后就會變成border-color: blue;這樣寫有助于減少&:not([disabled]):hover部分的重復(fù)。

5. @import 和 @use

在CSS中我們通常會創(chuàng)建多個CSS文件并在需要時引入：

<link rel="stylesheet" href="/path/to/css/1"></link>
<link rel="stylesheet" href="/path/to/css/2"></link> 
<link rel="stylesheet" href="/path/to/css/3"></link>

這樣做會使瀏覽器發(fā)出多個HTTP請求，從而在一定程度上降低應(yīng)用的速度。而Sass會在代碼發(fā)動到瀏覽器之前進行代碼組合，這樣只需要請求一個CSS文件。

下面來看看如何使用 @import 將文件分塊并導(dǎo)入到一個父文件中：

body {
  padding:0;
  margin:0;
}

body, html {
  width:100%;
  min-height:100%;
}

@import 'normalize';

content {
  max-width:660px;
}

假設(shè) normalize.scss 和 styles.scss 都在同一個文件夾中，可以將一個導(dǎo)入另一個，如上所示。在使用@import時，所有變量、mixin 等都可以全局訪問，因為一切都是全局的，所以庫必須為其所有成員添加前綴以避免命名沖突。因此不建議使用 @import。

可以使用 @use 來代替，它的基本用法與@import 相同：

@use 'normalize';

content {
  max-width:660px;
}

使用 @use 導(dǎo)入的文件稱為模塊。要使用這些模塊的 mixin 或變量，必須使用命名空間來調(diào)用它們。默認情況下，命名空間是文件名（不帶擴展名）。

$accent-color: #535353;
@mixin dark-background {
  background-color:#000;
  color:#fff;
}

@use 'src/colors';
body {
  color: colors.$accent-color;
}
.dark-region {
  @include colors.dark-background;
}

還可以使用 as 來使用自定義命名空間：

@use 'src/colors' as c;
body  {
  color: c.$accent-color;
}

當 _ 被添加到 SCSS 文件的文件名前時，解析器知道它是一個部分文件并且它僅用于導(dǎo)入。導(dǎo)入時，_ 部分是可選的。注意，這里使用 src/colors 來導(dǎo)入 src/_colors.scss。

6. 算術(shù)運算符

在CSS中可以使用calc()進行數(shù)學(xué)計算，Sass 支持直接使用+、-、/、*、% 操作符對值和變量進行計算：

$content-width: 600px;
content {
  width:$content-width;
}
.inner-content {
  width: $content-width - 60px; 
}
.outer-content {
  width: $content-width + 60px;
}

7. 流程控制1111111111111111111111

在 Sass 中有四種類型的流程控制規(guī)則：@if /@else、@each、@for 和@while。其中 @if 和 @else 類似于 JavaScript 中的 if 和 else。

@mixin theme($is-dark: false) {
  @if $is-dark {

  }
  @else {
    
  }
}

@each 類似于 JavaScript 中的 for of：

$sizes: 40px, 50px, 80px;
@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

注意：#{$size} 表示法用于使用變量制作動態(tài)屬性名稱和選擇器，這稱為插值。

@for 類似于 JavaScript 中的 for 循環(huán)：

@for $i from 1 through 4 {
  .bubble-#{$i} {
    transition-delay: .3 * $i;
  }
}

@while（不常用）類似于 JavaScript 中的 while 循環(huán)。

8. 擴展/繼承

有時需要編寫一個僅用于擴展的樣式規(guī)則。在這種情況下，可以使用占位符選擇器，它看起來像以 % 而不是 . 開頭的類選擇器。

%flex {
  display: flex;
}

.some-class {
  height: 50%;
  background-color: black;
}

%flex_with_color {
  @extend %flex;
  @extend .some-class;
}

%button_styles {
  height: 50px;
  width: 200px;
}

div {
  @extend %flex_with_color;

  button {
    @extend %button_styles;
    color: #424242;
    background-color: #d966fb;
  }
}

上面的代碼編譯成CSS之后將是這樣的：

div {
  display: flex;
}

.some-class, div {
  height: 50%;
  background-color: black;
}

div button {
  height: 50px;
  width: 200px;
}

div button {
  color: #424242;
  background-color: #d966fb;
}

9. 媒體查詢

在Sass中可以這樣來使用媒體查詢：

body {
    article {
        p {
            font-size: 100%;
            color: black;
            padding: 10px;

            @media (max-width: 768px) {
                font-size: 150%;
            }
        }
    }
}

編譯成的CSS代碼如下：

body article p {
  font-size: 100%;
  color: black;
  padding: 10px;
}

@media (max-width: 768px) {
  body article p {
    font-size: 150%;
  }
}

媒體查詢是支持嵌套的，并將所有適用的查詢與 and 運算符結(jié)合起來：

p {
    @media (max-width: 768px) {
        font-size: 150%; 
        @media (orientation: landscape) {
            line-height: 75%; 
        }
    }
}

編譯成的CSS代碼如下：

@media (max-width: 768px) {
  p {
    font-size: 150%;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  p {
    line-height: 75%;
  }
}

責(zé)任編輯：武曉燕來源：前端充電寶