Try   HackMD

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

官網

Last changed by 
 
王冠智
解決不了問題，就解決提出問題的人 https://joe94113.github.io/
0
294

Read more

紀錄在Laravel中使用Line message api以及LIFF

首先先到LINE Developers建立一個message api

Sep 27, 2024
Laravel 11 使用 Pusher Channels 實現廣播功能完整教程

紀錄一下使用踩到的坑以及銜接步驟

Sep 20, 2024
Laravel 跨網站自動登入實踐：利用 JWT 深入解析

Laravel A網站到B網站無須再次登入

Jun 20, 2024
基于微服务架构的物联网中间件设计

目前已有不少基於面向服務架構和基於微服務架構的物聯網中間件的研究成果。面向服務架構是一種將軟件系統分解為一系列可復用的服務的方法，通常使用企業服務總線作為服務間的通信機制。基於面向服務架構的物聯網中間件可以實現設備的服務化，但也存在一些缺點，例如架構的複雜性、開發和維護的成本、服務的耦合性、設備的持續集成和動態擴展的困難等。微服務架構是一種將軟件系統分解為一系列高內聚低耦合的微服務的方法，通常使用輕量級的通信協議作為服務間的通信機制。基於微服務架構的物聯網中間件可以充分利用微服務的優勢，例如架構的靈活性、開發和部署的速度、服務的獨立性、設備的多樣性和動態性的支持等。我們對比了一些現有的物聯網中間件的研究成果，發現它們都沒有充分考慮物聯網設備在通信協議、傳輸網絡、數據處理分級等方面的異構性，也沒有詳細地考慮多用戶場景下的服務衝突問題以及第三方物聯網系統的互操作支持。

Jun 18, 2024
Read more from 王冠智
Published on HackMD