Sass / SCSS簡明入門

時間 2021-04-02

標籤 css html 前端 git 程序員 github web 面試 express segmentfault 欄目 CSS 简体版

原文原文鏈接

Sass / SCSS簡介

Sass 是 CSS3 的擴展，添加了嵌套規則、變量、mixins、選擇器繼承等。能夠用命令行工具或網絡框架插件將其轉換爲格式良好的標準 CSS。

Sass（Syntactically Awesome StyleSheets）是 CSS 的一種擴展，是 CSS的超集（經過編譯生成瀏覽器能夠處理傳統 CSS）。Sass 的出現是爲了解決在大型項目中傳統 CSS 會遇到的重複、可維護性差等問題（添加了嵌套的規則、變量、mixins、選擇器繼承等特性）。讓開發者能夠編寫簡潔、富語意（expressive ）、可複用、可維護性和可延展性性佳的 CSS 代碼。css

Sass 的語法分爲新的 SCSS（Sassy CSS，Sass 3，文件名稱 *.scss）和舊的 SASS（ Haml 風格，因爲不用大括號格式，使用了縮緊，不能直接用 CSS 語法，學習曲線較高等特性，文件名稱爲*.sass）。因爲新的 SCSS 語法是 CSS3 的超集，因此把傳統的 CSS3 直接複製過來也不會出錯，學習曲線相對比較平緩，因此咱們將使用SCSS語法。html

SASS 初體驗

在開始介紹 SASS 特性以前先來學習如何將 Sass 轉譯成 CSS。前端

首先，先按照官網先安裝Sass，而後在項目文件夾創建一個 main.scss 文件，文件內容以下：git

// 引用
@import url(https://fonts.googleapis.com/css?family=Pacifico);
//Add variables here:

h1 {
  font-family: Roboto, sans-serif;
  text-align: center;
}

.banner {
  font-family: 'Pacifico', cursive;
  height: 400px;
  background-image: url("lemonade.jpg");
}

.container {
  text-align: center;
  font-family: 'Pacifico', cursive;
}

在終端下用如下命令進行轉譯：程序員

sass main.scss main.css

這時你就會看到文件夾中多了 main.css 和 main.css.map 兩個文件，前者是轉譯事後的 CSS 文件，大部分是方便使用瀏覽器調試工具在進行調試時連結原文件和轉譯文件1⃣️方便調試。github

1. 變量：變量能夠用來儲存值，方便重複利用

在 Sass 中用 $ 來表示變量，變量的數據型態能夠是數字、字符串、布爾值、null值、甚至能夠使用 List 和 Map。web

變量的使用：面試

$translucent-white: rgba(255,255,255,0.3);
p {
    background-color: $translucent-white;
}

List 能夠用空格或逗號分隔屬性值：express

$font-style-2: Helvetica, Arial, sans-serif;
$standard-border: 4px solid black;

p {
    border: $standard-border;
}

// maps key:value
$font-style-2: (key1: value1, key2: value2);

2. 嵌套：下降父元素重複性

轉譯前：segmentfault

.parent {
    color: blue;
    .child {
        font-size: 12px;
    }
}



轉譯後：

轉譯後：

.parent {
    color: blue;
}

.parent .child {
    font-size: 12px;
}
```



在 Nesting 中不僅只有 child selectors 能夠使用，還能夠使用在相同的 Properties 上：

在Nesting中且只有子選擇器能夠使用，還能夠使用在相同的

.parent {
font : {
    family: Roboto, sans-serif;
    size: 12px;
    decoration: none;
  }
}

轉譯後：

.parent {
    font-family: Roboto, sans-serif;
    font-size: 12px;
    font-decoration: none;
}

3. Mixins：減小編寫僞元素時的重複

如：::before，:: after，::hover，在 Sass 中使用 ＆ 表明父元素

轉譯前：

.notecard{ 
    &:hover{
        @include transform (rotatey(-180deg));  
    }
}

轉譯後：

.notecard:hover {
    transform: rotatey(-180deg);
}

重用羣組的 CSS，例如跨瀏覽器的前綴，使用 @include 加入羣組：

轉譯前：

@mixin backface-visibility {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
}
.notecard {
    .front, .back {
        width: 100%;
        height: 100%;
        position: absolute;
        @include backface_visibility;
    }
}

轉譯後：

.notecard .front, .notecard .back {
    width: 100%;
    height: 100%;
    position: absolute;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
}

@mixin 也能夠經過 @include 使用參數，也能夠使用默認值：

@mixin backface-visibility($visibility:hidden) { //Add an argument
    backface-visibility: $visibility;
    -webkit-backface-visibility: $visibility;
    -moz-backface-visibility: $visibility;
    -ms-backface-visibility: $visibility;
    -o-backface-visibility: $visibility;
}

.front, .back {
    @include backface-visibility(hidden);
}

有時咱們也須要處理一些複雜的參數：

@mixin stripes($direction, $width-percent, $stripe-color, $stripe-background: #FFF) {
    background: repeating-linear-gradient(
        $direction,
        $stripe-background,
        $stripe-background ($width-percent - 1),
        $stripe-color 1%,
        $stripe-background $width-percent
    );
}

用 Map 傳入變量：

$college-ruled-style: ( 
    direction: to bottom,
    width-percent: 15%,
    stripe-color: blue,
    stripe-background: white
);

變量用 ... 進行傳遞：

.definition {
    width: 100%;
    height: 100%;
    @include stripes($college-ruled-style...);
}

還有種狀況是字符串：

轉譯前：

// 使用 #{$file} 接收
@mixin photo-content($file) {
    content: url(#{$file}.jpg); //string interpolation
    object-fit: cover;
}

.photo { 
    @include photo-content('titanosaur');
    width: 60%;
    margin: 0px auto; 
}

轉譯後：

.photo { 
    content: url(titanosaur.jpg);
    width: 60%;
    margin: 0px auto; 
}

更能夠搭配 Nesting 使用：

還能夠搭配 Nesting ：

@mixin hover-color($color) {
    &:hover {
        color: $color;
    }
 }

 .word {
    @include hover-color(red);
 }

4. 函數

在 Sass 中也能夠經過內置函數簡單設定顏色、漸變等，例如：adjust-hue（$color，$degrees），fade-out：

$lagoon-blue: fade-out(#62fdca, 0.5);

更多的內建函數能夠參考高壓博文文檔（http://sass-lang.com/document...）

5. 操做符：經過加減乘除和求餘數等運算符方便的計算所需的屬性值

顏色加法：

$color: #010203 + #040506;
/*
01 + 04 = 05
02 + 05 = 07
03 + 06 = 09
color: #050709;
*/

在使用 / 時須要注意：

width: $variable/6; // 除法
line-height: (600px)/9; // 除法
margin-left: 20-10 px/ 2; // 除法
font-size: 10px/8px; //沒法計算

也能夠使用 @each 語法循環 list 內容：

$list: (orange, purple, teal);

@each $item in $list {
    .#{$item} {
          background: $item;
    }
}

使用 @for 循環，並加入條件判斷：

@for $i from 1 through $total {
    .ray:nth-child(#{$i}) {
        background: adjust-hue(blue, $i * $step);
        // 
        width: if($i % 2 == 0, 300px, 350px);
        margin-left: if($i % 2 == 0, 0px, 50px);
    }
}

6. @include 引用：用於引入其餘 Sass、SCSS 文件：

我們一般使用 `Partials` 去處理特定功能，方便管理和維護。如下是引用 `_variables.scss` 檔案範例，其中檔名前的 `_` 表示引用前要先 compile：

咱們一般用 Partials 去處理特定功能，方便管理和維護。如下是引用 _variables.scss 文件，其中文件名前的 _ 表示引用前要先編譯：

@import "variables";

7. @extend ：

編譯前：

.lemonade {
    border: 1px yellow;
    background-color: #fdd;
}
.strawberry {
    @extend .lemonade;
    border-color: pink;
}

轉譯後：

.lemonade, .strawberry {
    border: 1px yellow;
    background-color: #fdd;
}

.strawberry {
    @extend .lemonade;
    border-color: pink;
}

搭配佔位符使用：

轉譯前：

a%drink {
    font-size: 2em;
    background-color: $lemon-yellow;
}

.lemonade {
    @extend %drink;
    //more rules
}

轉譯後

a.lemonade {
  font-size: 2em;
  background-color: $lemon-yellow;
}

.lemonade {
 //more rules
}

8.`@mixin` 和 `@extend` 的比較

轉譯前：

@mixin no-variable {
    font-size: 12px;
    color: #FFF;
    opacity: .9;
}

%placeholder {
    font-size: 12px;
    color: #FFF;
    opacity: .9;
}

span {
    @extend %placeholder;
}

div {
    @extend %placeholder;
}

p {
    @include no-variable;
}

h1 {
    @include no-variable;
}

轉譯後：

span, div{
font-size: 12px;
color: #FFF;
opacity: .9;
}

p {
font-size: 12px;
color: #FFF;
opacity: .9;
//rules specific to ps
}

h1 {
font-size: 12px;
color: #FFF;
opacity: .9;
//rules specific to ps
}

9. Sass文件夾結構

sass/
    components/
        _buttons.scss
    helpers/
        _variables.scss
        _functions.scss
        _mixins.scss
    layout/
        _grid.scss
        _header.scss
        _footer.scss
    pages/
        _home.scss
        _contact.scss

總結

以上是 Sass/SCSS 簡明入門，在這篇文章中咱們大體上介紹了 Sass 使用語法。除了 Sass 外上還有不少 CSS 的變形，包括語法比較容易學的 LESS、具備組件化思想的 CSS in JS，主要解決全局問題和模塊引用的 CSS Modules，取經於 JavaScript Task Runner 的 PostCSS，網格樣式表單 GSS 等，這些最終都是要解決傳統 CSS 不易維護，重用性差的問題。實際上有些人以爲使用預處理器更好維護，也有些人認爲進行編譯很麻煩，到於要不要用，用哪一種類型的 CSS 預處理器，必需要在團隊內部進行討論和規範。