Sass學習筆記

Sass筆記

介紹

• Sass 是 CSS 預處理器(CSS Preprocessor）的一種

預處理器是讓開發者撰寫一些類似 CSS 語法的指令，再轉為瀏覽器能懂的 CSS

• SASS / SCSS 檔案需編譯為 CSS 檔
• Sass 支持所有現代瀏覽器，並且與 CSS3 兼容。
• 節省許多時間，因為減少了 CSS 的重複

SASS vs. SCSS

Sass 和 SCSS 是兩種不同的 Sass 語法格式

SCSS（Sassy CSS）

使用.scss文件擴展名稱，使用常規的 CSS 語法和大括號來結構化代碼，需加上 {} ;。

/* .scss file */
$bgcolor: blue;
 
/* use variables */
body {
  background-color: $bgcolor;
}

.container {
  width: 100%;
}

SASS（Indented Sass）

使用.sass文件擴展名稱，使用縮排而不是括號，取消{} ;，它不完全符合 CSS 語法，但編寫起來更快。

此寫法請注意縮排

/* .sass file */
$bgcolor: blue
 
body
  background-color: $bgcolor

.container
  width: 100%

css output

以上兩種寫法皆輸出

/* .css file */
body {
  background-color: blue; 
}

.container {
  width: 100%; 
}

變數Variables

Sass 允許使用者宣告變數並賦值，這些變數可以在樣式表中重複使用，方便開發者管理和維護樣式。

Sass

$deefBlue: #032f3e

#main-nav{
    background: $deefBlue;
}

Css

#main-nav{
    background: #032f3e;
}

巢狀寫法Nesting Styles

Sass 支持將樣式規則嵌套，這使得開發者可以更加清晰地了解樣式規則的關係，同時也能減少重複代碼的量。

Sass

#main-nav{
    ul{
        width: 100%;
    }
}

Css

#main-nav ul{
    width: 100%;
}

@Mixins 和 @Include

Sass 提供了 Mixin 的功能，這可以讓開發者定義可重複使用的樣式片段，以減少代碼的重複性。

1. 用@mixin定義
2. 用@include使用

// create mixin
@mixin banner{
    width: 100%;
    position: relative;
    color: white;
    .banner-content{
        position: absolute;
    }
}

// use mixin
.lead-banner{
    @include banner;
}

@content

@content 是 Sass 中的一個關鍵字，用於在 @mixin 或 @function 規則中引入外部內容。具體來說，@content 可以在 @mixin 或 @function 中的某個位置插入外部代碼塊，以生成動態的 CSS。

範例

在這個例子中，我們定義了一個@mixin media()，它根據輸入的裝置類型，定義對應的 CSS 裝置查詢。然後在每個 @media 區塊中，使用 @content 區塊引入 @mixin 被調用時的內容。

@mixin media($media) {
  @if $media == 'tablet' {
    @media (min-width: 768px) and (max-width: 991px) {
      @content;
    }
  } @else if $media == 'desktop' {
    @media (min-width: 992px) {
      @content;
    }
  }
}

.element {
  width: 100px;

  @include media('tablet') {
    width: 50%;
  }

  @include media('desktop') {
    width: 75%;
  }
}

在編譯後的 CSS 中，可以看到 Sass 的 @content 區塊被嵌入到對應的 @media 區塊中，並且在不同的裝置查詢下，.element 元素的寬度被設定為不同的值。

.element {
  width: 100px;
}

@media (min-width: 768px) and (max-width: 991px) {
  .element {
    width: 50%;
  }
}

@media (min-width: 992px) {
  .element {
    width: 75%;
  }
}

匯入檔案Import File

導入其他Sass檔案

/scss/variables.scss

$deefBlue: #032f3e
$deefRed: #960000

/scss/style.scss

@import 'variables';

@use

與 @import 指令相比，@use 指令更加優秀，因為它可以避免代碼重複和命名衝突。

以這種方式加載的任何樣式都將在編譯的CSS輸出中只包含一次，無論這些樣式被加載了多少次

基本範例

默認情況下，模塊的命名空間就是你導入的檔案名稱，沒有文件擴展名稱。

Sass

// src/_corners.scss
$radius: 3px;

@mixin rounded {
  border-radius: $radius;
}

// style.scss
@use "src/corners";

.button {
  @include corners.rounded;
  padding: 5px + corners.$radius;
}

css

.button {
  border-radius: 3px;
  padding: 8px;
}

加上命名空間

你可能想要選擇一個不同的命名空間，可能原先名稱太長，想要使用一個較短的名稱

Sass

// src/_corners.scss
$radius: 3px;

@mixin rounded {
  border-radius: $radius;
}
// style.scss
@use "src/corners" as c;

.button {
  @include c.rounded;
  padding: 5px + c.$radius;
}

css

.button {
  border-radius: 3px;
  padding: 8px;
}

甚至可以加載沒有命名空間的模塊 @use "<url>" as *。不過，我們建議您只對您編寫的樣式表執行此操作，否則，導入的新成員可能會與原先樣式名稱相同，導致衝突。

Sass

// src/_corners.scss
$radius: 3px;

@mixin rounded {
  border-radius: $radius;
}
// style.scss
@use "src/corners" as *;

.button {
  @include rounded;
  padding: 5px + $radius;
}

css

.button {
  border-radius: 3px;
  padding: 8px;
}

私有成員

你可能不希望你定義的所有變數都可以在 scss 之外使用，只要在變數的前面加上 - 或 _前綴，來讓它們變成私有成員。

以下範例會報錯

// src/_corners.scss
$_radius: 3px;

@mixin rounded {
  border-radius: $_radius;
}
// style.scss
@use "src/corners" as c;

// This is an error! $_radius isn't visible outside of `_corners.scss`.
.button {
  @include c.rounded;
  padding: 5px + c.$_radius; // error
}

@forward

當必須在多個 scss 中重複使用一組樣式表時，我們可以將所有樣式表合併到一個入口點，使用 @forward 並在其他 scss 中 @use 在使用。

以下是一個使用 @forward 的 Sass 範例：

// src/_list.scss
@mixin list-reset {
  margin: 0;
  padding: 0;
  list-style: none;
}

// bootstrap.scss
@forward "src/list";

// styles.scss
@use "bootstrap";

li {
  @include bootstrap.list-reset;
}

css

li {
  margin: 0;
  padding: 0;
  list-style: none;
}

運算

Sass 允許使用者在樣式表中進行算數運算、邏輯運算和字串操作等運算。

算術運算

在下面範例中，我們使用了算術運算符號 / 來計算 $margin 的值，這個值將用於設定 .element 元素的 margin-left 屬性。

Sass

$width: 300px;
$padding: 20px;
$margin: $width / 2 - $padding;

.element {
  width: $width;
  padding: $padding;
  margin-left: $margin;
}

css

.element {
  width: 300px;
  padding: 20px;
  margin-left: 130px; }

比較運算

在下面範例中，我們使用了比較運算符號 == 來比較 $primary-color 和 $secondary-color 的值是否相等。如果相等，就設定文字顏色為紅色，否則設定為藍色。

Sass

$primary-color: #007bff;
$secondary-color: #6c757d;

.element {
  color: if($primary-color == $secondary-color, #ff0000, #0000ff);
}

css

.element {
  color: #0000ff; }

字符串運算

在下面範例中，我們使用了字符串運算符號 + 來結合多個字符串，同時也使用了 unquote() 函數將引號添加到字串周圍，以保持 CSS 規則的正確性

Sass

$font-family: Helvetica Neue, Helvetica, Arial, sans-serif;

.element {
  font-family: unquote('"') + $font-family + unquote('"');
}

css

.element {
  font-family: "Helvetica Neue, Helvetica, Arial, sans-serif"; }

函數

Sass 允許使用者定義和調用函數，這可以簡化樣式表的編寫，使其更加靈活和易於維護。

自定義函數

使用@function定義函數並使用@return回傳

在這個例子中，我們使用了 Sass 的 @function 規則定義一個函數 calculate-rem()，該函數將像素值轉換為 rem 單位。然後我們使用這個函數將 .element 元素的 font-size 屬性設定為 1.5rem。

Sass

@function calculate-rem($size) {
  @return $size / 16px;
}

.element {
  font-size: calculate-rem(24px) + rem;
}

css

.element {
  font-size: 1.5rem; }

內建函數

更多模塊請參考Sass Built-In Modules

darken() 函數

在這個例子中，我們使用了 Sass 內置的 darken() 函數，將 $primary-color 變暗 20%，並將結果應用到 .element 元素的 color 屬性中。

Sass

$primary-color: #007bff;

.element {
  color: darken($primary-color, 20%);
}

css

.element {
  color: #004a99; }

lighten() 函數

在這個例子中，我們使用了 Sass 內置的 lighten() 函數，將 $secondary-color 變亮 15%，並將結果應用到 .element 元素的 background-color 屬性中。

$secondary-color: #6c757d;

.element {
  background-color: lighten($secondary-color, 15%);
}

css

.element {
  background-color: #939ba2; }

if() 函數

在這個例子中，我們使用了 Sass 內置的 if() 函數，根據 $screen-size 的值，將 .element 元素的 width 屬性設定為 100% 或 50%。

Sass

$screen-size: 768px;

.element {
  width: if($screen-size >= 768px, 100%, 50%);
}

css

.element {
  width: 100%; }

繼承

Sass 允許使用者通過 @extend 指令實現樣式規則的繼承，這可以讓代碼更加簡潔和易於維護。

以下為 Sass 中使用繼承的範例:

在這個範例中，我們定義了一個 %button 的 placeholder 選擇器，用於保存一些通用的按鈕樣式。然後在 .button-primary 和 .button-danger 類別中，使用 @extend 關鍵字繼承 %button 選擇器的樣式，並且覆蓋 background-color 屬性，以實現不同類型的按鈕樣式。

%button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: #333;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  cursor: pointer;
}

.button-primary {
  @extend %button;
  background-color: #007bff;
}

.button-danger {
  @extend %button;
  background-color: #dc3545;
}

編譯後的 CSS 代碼如下：

可以看到，編譯後的 CSS 中，.button-primary 和 .button-danger 類別都繼承了 %button 選擇器的樣式，同時根據自己的需要修改了 background-color 屬性的值，實現了不同類型的按鈕樣式。這樣，我們就可以通過 Sass 的繼承機制，實現代碼的重用和簡化。

.button-primary, .button-danger {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: #333;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  cursor: pointer;
}

.button-primary {
  background-color: #007bff;
}

.button-danger {
  background-color: #dc3545;
}

@debug查看變量或表達式的值

在 Sass 中，@debug 是一個用於輸出調試信息的指令。它可以將一些調試信息輸出到控制台，方便開發人員進行調試和錯誤排查。

查看以下範例，當編譯 Sass 代碼時，這三個調試信息將被輸出到控制台。

使用 @debug 時需要注意，只有在開發過程中才應該使用它，不應該在生產環境中使用。因為它會將調試信息輸出到控制台，影響代碼的執行效率。

$font-size: 16px;
$line-height: 1.5;
$font-color: #333;

body {
  font-size: $font-size;
  line-height: $line-height;
  color: $font-color;

  @debug "Font size: #{$font-size}";
  @debug "Line height: #{$line-height}";
  @debug "Font color: #{$font-color}";
}

@error錯誤排查

在 Sass 中，@error 是一個用於輸出錯誤信息的指令。當 Sass 遇到某些錯誤時，可以使用 @error 指令輸出錯誤信息，一旦錯誤被打印出來，Sass 就停止編譯樣式表並告訴任何正在運行它的系統發生了錯誤。

在這個範例中，當 Sass 編譯這個代碼時，如果 $font-size 的值小於 12px，就會觸發 @error，輸出一條錯誤信息到控制台，並且終止 Sass 編譯。這可以幫助開發人員快速發現代碼中的錯誤。

在實際開發中，建議在 @if 或 @each 等指令中使用 @error，以及在代碼庫或模塊中定義一些較為嚴格的規則，以提高代碼的可讀性和可維護性。

$font-size: 16px;

body {
  @if $font-size < 12px {
    @error "The font size is too small!";
  }

  font-size: $font-size;
}

學習資源

Learn Sass | Codecademy

Sass Tutorial - W3Schools

官網