iT邦幫忙

2

SCSS - 基礎功能介紹

SASS / SCSS 簡介

SASS 是 CSS 的預處理器,它能編譯出原生 CSS,且提供了更多程式面的東西來撰寫 CSS,讓其更簡潔、更好維護,而 SASS 分為 SASSSCSS 兩種,兩者皆稱為 SASS,讓我們看看差異

sass

  • 使用縮排區隔程式碼
  • 無法相容原生 CSS
  • 檔名為 *.sass
.text-primary
  color: #007bff

scss

  • 使用大括號區隔程式碼
  • 可完全相容原生 CSS
  • 檔名為 *.scss
.text-primary {
  color: #007bff;
}

另外兩者有些語法上的不同,但大部份都是相同的唷~

安裝環境

常用的編譯方法有三種,分別為以下

  1. 編譯套件: 透過 WebpackGulp 等套件,整合 sass-loader 來編譯
  2. 編譯軟體: 透過 Prepros 等軟體編譯
  3. 編輯器插件: VSCode 的 Live Sass Compiler 等來做編譯,設定部分可參考這裡

變數

CSS 本來就可以撰寫變數,而 SCSS 則讓變數的寫法更容易,只須在開頭加上 $ 即可,變數讓我們更好的控管 CSS,遇到需重複使用的數值即可宣告為變數,後續如果客戶要修改也只要調整一個變數,便可達到全站修改

編譯前

$primary: #007bff;
$font-size: 20px;
.text-primary {
  color: $primary;
  font-size: $font-size;
}

編譯後

.text-primary {
  color: #007bff;
  font-size: 20px;
}

運算

SASS 可以直接使用加、減、乘、除等來做基本的運算,但是單位須特別注意,否則會出錯,另外如果兩個相同單位相除後,單位會被互相抵消,所以也可以利用此特性做單位的換算

編譯前

$font-size: 20px;
$lv: 2;
.text1 {
  font-size: $font-size + 10px;
}
.text2 {
  font-size: $font-size - 4px;
}
.text3 {
  font-size: $font-size * $lv;
}
.text4 {
  font-size: $font-size / $lv;
}
.text5 {
  font-size: (5px/5px)rem;
}

編譯後

.text1 {
  font-size: 30px;
}
.text2 {
  font-size: 16px;
}
.text3 {
  font-size: 40px;
}
.text4 {
  font-size: 10px;
}
.text5 {
  font-size: 1 rem;
}

巢狀與連接符 ( & )

巢狀寫法可以讓 CSS 更好管理,連接符則替代父選擇器,省下了重複撰寫的時間,但過於巢狀也會導致程式碼不好維護,盡量在三層內解決

編譯前

$primary: #007bff;
$font-size: 20px;
.navbar {
  color: $primary;
  font: {
    family: '微軟正黑體';
    size: $font-size / 2;
  }
  .logo {
    width: 50px;
  }
  &:hover {
    color: #000;
  }
  &-item {
    font-weight: bold;
  }
}

編譯後

.navbar {
  color: #007bff;
  font-family: '微軟正黑體';
  font-size: 10px;
}
.navbar .logo {
  width: 50px;
}
.navbar:hover {
  color: #000;
}
.navbar-item {
  font-weight: bold;
}

@mixin

@mixin 的寫法為在前方先宣告,後面接上名字,參數帶入與不帶入都行,如要帶入參數則使用 (),撰寫樣式時用 @include 來載入,此方法可以減少重複撰寫程式碼

  • 字串內寫入變數: 使用 #{...},並將變數寫在裡面
  • 預設值: 在變數後方加上 :,並寫入數值

編譯前

@mixin color {
  color: blue;
}
@mixin shape($img, $radius: 10px) {
  width: 100px;
  height: 100px;
  background-image: url('~/assets/images/#{$img}');
  border-radius: $radius;
}
.square {
  @include color;
  @include shape('hero.png');
}
.round {
  @include color;
  @include shape('hero.png', 50px);
}

編譯後

.square {
  color: blue;
  width: 100px;
  height: 100px;
  background-image: url("~/assets/images/hero.png");
  border-radius: 10px;
}
.round {
  color: blue;
  width: 100px;
  height: 100px;
  background-image: url("~/assets/images/hero.png");
  border-radius: 50px;
}

@extend

@extend 會將同樣的程式碼整合在一起,用法則是在需要增加樣式的地方加上 @extend,通常會搭配 % 一起使用,前方加上 % 的樣式不會被編譯,這樣一來樣式就會被收集到該位置,但建議將樣式放在最上面,以防覆寫掉其他樣式

編譯前

%link-btn {
  display: inline-block;
  text-decoration: none;
}
.link-primary {
  color: blue;
  @extend %link-btn;
}
.link-secondary {
  color: red;
  @extend %link-btn;
}

編譯後

.link-primary, .link-secondary {
  display: inline-block;
  text-decoration: none;
}
.link-primary {
  color: blue;
}
.link-secondary {
  color: red;
}

@mixin 與 @extend 的差異

@mixin@extend 皆可達到減少撰寫重複程式碼的目的,那怎麼選擇呢 ?

  • @mixin: 將樣式碼寫入 class 內,可用變數
  • @extend: 將樣式獨立出來,不可用變數

基本上 @extend 是將 CSS 集中,所以程式碼較少,相反的,@mixin 則是寫一次就多產生一次 CSS,所以程式碼較多,較簡單的分辨方式是,如需使用變數就使用 @mixin,不需要則使用 @extend

@function

我認為 @function@mixin 是有點像的,都是在做運算處理,兩者的差異在於 @function 必須使用 @return 來返回結果,且輸出的是一個值,並非一段 CSS 樣式

編譯前

$base-font-size: 16px;
$space: 4px;
@function font($lv: 0) {
  @return ($base-font-size + $space * $lv) / $base-font-size * 1rem;
}
.h6 {
  font-size: font();
}
.h5 {
  font-size: font(1);
}
.h4 {
  font-size: font(2);
}

編譯後

.h6 {
  font-size: 1rem;
}
.h5 {
  font-size: 1.25rem;
}
.h4 {
  font-size: 1.5rem;
}

@function 結合 @mixin

@function 有時也會拿來與 @mixin 做結合,並應用在一些字級或是單位的換算,以下做了一個產生對應字級,並且換算 rem 的範例

編譯前

$base-font-size: 16px;
$space: 4px;
@function font($lv) {
  @return ($base-font-size + $space * $lv) / $base-font-size * 1rem;
}
@function line($fontSize) {
  @return $fontSize * 1.5;
}
@mixin baseFont($lv: 0) {
  font-size: font($lv);
  line-height: line(font($lv));
}
.h6 {
  @include baseFont();
}
.h5 {
  @include baseFont(1);
}
.h4 {
  @include baseFont(2);
}

編譯後

.h6 {
  font-size: 1rem;
  line-height: 1.5rem;
}
.h5 {
  font-size: 1.25rem;
  line-height: 1.875rem;
}
.h4 {
  font-size: 1.5rem;
  line-height: 2.25rem;
}

SASS 內建 @function

SASS 內有幫我們寫好許多好用的 @function 可直接使用,這邊以顏色為例

編譯前

.h1 {
  // 調暗 20%
  color: darken(#007bff, 20%);
}
.h2 {
  // 調亮 20%
  color: lighten(#007bff, 20%);
}
.h3 {
  // 互補色
  color: complement(#007bff);
}
.h4 {
  // 提高飽和度 20%
  color: saturate(#007bff, 20%);
}
.h5 {
  // 降低飽和度 20%
  color: desaturate(#007bff, 20%);
}

編譯後

.h1 {
  color: #004a99;
}
.h2 {
  color: #66b0ff;
}
.h3 {
  color: #ff8400;
}
.h4 {
  color: #007bff;
}
.h5 {
  color: #1a7ce6;
}

SASS 還有非常多的內建的 @function 可使用,詳細可參考官網

@import

import 並不是 SASS 特有的功能,但是 SASS 擴展了此功能,讓其可以載入 .sass.scss 檔,將 SASS 分為數個檔案彙整至一隻檔案可減少請求數,也方便維護與管理

  • 可以載入 .css
  • 若沒有輸入檔名,則預設為 .sass.scss
  • 若檔名前加上 _ 則該檔案不會被編譯
  • 編譯有順序性,因此需先載入變數等必要檔案

import 檔案的順序各位可以自己思考,這邊分享一下小弟的順序

@import './src/scss/_function';
@import './src/scss/_mixin';
@import './src/scss/_reset';
@import './src/scss/_extend';
@import './src/scss/_layout';
@import './src/scss/_pages';
@import './src/scss/_button';

小結

SASS 熟悉後其實是非常好用的,開發效率也提升了許多,最重要的是客戶修改的時候可以省下非常多時間,或許剛開使不習慣,但可以循序漸進,從簡單的 變數巢狀 開始寫,最後再慢慢的用到 @function@mixin,那就開始動手寫自己的 SASS 吧!


尚未有邦友留言

立即登入留言