0%

CSS 預處理器- Sass/SCSS 基本介紹

前言

CSS預處理器,增加了一些編寫的特性,也可以說是運用程式化的方式寫CSS。

  • 其中SASS最廣泛使用:Sass包含SASS與SCSS兩種
    • 兩者之間不同之處有以下兩點:
    • 1.文件擴展名不同,Sass 是以“.sass”後綴為擴展名,而SCSS 是以“.scss”後綴為擴展名
    • 2.語法書寫方式不同,Sass是以嚴格的縮進式語法規則來書寫,不帶大括號({})和分號(;),而SCSS的語法書寫和我們的CSS語法書寫方式非常類似。

      安裝sass

      sass-github
  • 在專案底下,安裝
    1
    npm install -g sass
  • 安裝後,建立index.scss檔案
  • 手動轉擋
    • 會出現css檔案

使用node-sass編譯

  1. 先取得package.json檔案
    安裝語法:npm init --yes
    (要注意安裝的路徑位置)

  2. 安裝node-sass
  • npm i -g node-sass (i -> install)
  • 查尋安裝是否完成
  1. 將檔案編譯為css
    建立css(資料夾)

    使用watch,使每次修改sass檔案時,會自動編譯到css中

  • 在package.jason檔案中的"scripts"
  • 要注意編譯資料的位置
    • css :為資料夾路徑
    • scss/main.scss:建立的css路徑
1
2
3
"scripts": {
"watch": "node-sass -o css scss/main.scss -w"
}
  • 在終端機要輸入
    npm run watchcontrol+c退出

基本語法實作

變數

  • 在變數前加上$,來宣告要使用的變數
  • 運用抽取變數方式,使運用版面顏色時,可以有一致性,修改版面時也較快速
  • 變數:數量不要超過10個,自己在記憶上會混亂
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    // 創造顏色、字大小的變數
    $white:#fff;
    $black:#000;
    .button{
    text-align:center;
    background-color:$black;
    border:1px solid $black;
    color:$white;
    }

    $font-lg:40px;
    $font-md:30px;
    $font-sm:20px;

    .footer h3{
    font-size: $font-md;
    color: $color-secondary;
    text-align: center;

    }

    scope of sass variable

  • 一般常見屬於global scope
  • 如果將變數設在,標間架構中->local scope
  • 在後面加上!global就變成全域

PS: 還是建議以global 的方式進行修改,才不會造成維護的混亂

  • 命名中使用-以及_,在sass中是一樣的
    • $font-lg改為$font_lg一樣也會有效

Nested 巢狀

1.針對nav下的ulli

1
2
3
4
5
6
7
8
9
10
11
.nav{
background-color: $color-primary;
ul li{
list-style: none;
}
a{
text-decoration: none;
font-size: $font-sm;
color: $color-secondary;
}
}
  • 轉換為css
    1
    2
    3
    4
    5
    6
    7
    8
    .nav {
    background-color: orange; }
    .nav ul li {
    list-style: none; }
    .nav a {
    text-decoration: none;
    font-size: 20px;
    color: gray; }

2.增加hover的效果

  • &,來指出parent element:在這便是指<a>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.nav{
background-color: $color-primary;
ul li{
list-style: none;
}
a{
text-decoration: none;
font-size: $font-sm;
color: $color-secondary;
&:hover{
color: $color-tertiary;
}
}
}
  • 轉換為css
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .nav {
    background-color: orange; }
    .nav ul li {
    list-style: none; }
    .nav a {
    text-decoration: none;
    font-size: 20px;
    color: gray; }
    .nav a:hover {
    color: royalblue; }

巢狀層級不可以太多層,否則會出現效率問題

@import 是什麼

  • import 讓我們可以拉出特定區塊或是根據功能性不同拆成不同區塊,來撰寫scss,並利用@import放入主要的scss檔案,最後彙整到同一個css之中。
  • 再用一個css引入(@import),各個功能
  • 要引入的檔案命名:在要import的檔案要加_

六角學院

_test.scss為撰寫footer樣式的檔案

1
2
3
4
.footer h3{
font-style:italic ;
border: blue 3px solid;
}

main.scss 要引入檔案的主要檔案

1
@import "test";

轉譯為css(main.css)

1
2
3
.footer h3 {
font-style: italic;
border: blue 3px solid; }

@mixin 與 @include

  • 當在多個地方想使用同一種style的方式。可以組成一組的樣式,並於scss中重複使用。
  • @mixin 開頭,並自定義一個名稱
  • 需要它的時候就用 @include呼叫
  1. 設定對齊方式
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    @mixin horizontal-list{
    li{
    display:inline-block;
    margin:{
    left:-2px;
    right:2em;
    }
    }
    }

    /*當要引用時*/
    nav ul{
    @include horizontal-list
    }

  2. 調整字體大小(以帶參數的方式)
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    // 發現h1,h3樣式一樣
    @mixin headingStyles($fontSize){
    //以代參數方式來放入不同字體大小的變數設定
    font-size: $fontSize;
    color: $color-secondary;
    text-align: center;
    }


    .banner h1{

    @include headingStyles($font-lg);
    }
    .footer h3{

    @include headingStyles($font-md);
    }
  • 在css的地方,可以看到字的大小不同
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .banner h1 {
    font-size: 40px;
    color: gray;
    text-align: center; }

    .footer h3 {
    font-size: 30px;
    color: gray;
    text-align: center; }

  1. 加入動畫效果
  • footer h3加上hover
  • @mixin transition($param...)加上設定參數特性
    • 當要同時設定特性中的多個值時,要記得在參數後面加上...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 發現h1,h3樣式一樣
@mixin headingStyles($fontSize){
//以代參數方式來放入不同字體大小的變數設定
font-size: $fontSize;
color: $color-secondary;
text-align: center;
}

@mixin transition($param...) {
transition: $param;
}
.banner h1{

@include headingStyles($font-lg);
}
.footer h3{

@include headingStyles($font-md);
@include transition(color .5s ,background-color 1s);
&:hover{
color:$color-tertiary;
background-color: $color-primary;
}
}
  • 轉譯為css
    1
    2
    3
    4
    5
    6
    7
    8
    .footer h3 {
    font-size: 30px;
    color: gray;
    text-align: center;
    transition: color 0.5s, background-color 1s; }
    .footer h3:hover {
    color: royalblue;
    background-color: orange; }

Day27:小事之 Transition 與 Animation
CSS3 Animation

新手也可以輕鬆玩轉 SASS - @mixin and @include

Functions

  • 透過函式的建立,可以在需要使用時,不斷地呼叫使用
  • @function fontSize($size){ @return $size*2; }建立函式
1
2
3
4
5
6
7
8
9
10
11
12
13
@function fontSize($size){
@return $size*2;
}


h1{


.banner p{
font-size: fontSize($font-sm);
//字的大小會變成 20px*2 =>40px
}

轉譯為css

1
2
.banner p {
font-size: 40px; }
  • 將文字大小,預先設定預設值
1
2
3
4
5
6
7
8
9
10
//設定預設為25px
@function fontSize($size:25px){
@return $size*2;
}



.footer p{
font-size: fontSize();
}

轉譯為css

1
2
3
.footer p {
font-size: 50px; }
/* 25*2=>50 */
  • 若插入數字
1
2
3
4
.footer p{
font-size: fontSize(30px);
}

  • 轉譯為css
    1
    2
    3
    .footer p {
    font-size: 60px; }
    /* 30*2=>50 */

    內建函式介紹

  1. lighten()
    1
    2
    .nav{
    background-color: lighten($color-primary,20%);}
    css
    1
    2
    .nav {
    background-color: #ffc966; }
  • 顏色變淡
  1. darken()
    1
    2
    .nav{
    background-color: darken($color-primary,20%);}
  • 編譯為css
    1
    2
    .nav {
    background-color: #996300; }

3.transparentize()

  • 透明度從0-1 (1是完全透明)
    1
    2
    .nav{
    background-color: transparentize($color-primary,0.6);}
  • 編譯為css
    1
    2
    .nav {
    background-color: rgba(255, 165, 0, 0.4); }

4.mix()

  • 將顏色混合
    1
    2
    .nav{
    background-color: mix(blue,green);}
    css
    1
    2
    .nav {
    background-color: #004080; }

加入百分比(利用百分比來調配顏色的比重)

  • mix(blue,green,10%)表示只有10%的藍色,90%為綠色
    1
    2
    .nav{
    background-color: mix(blue,green,10%);}
    css
    1
    2
    .nav {
    background-color: #00731a; }

補充scss檔案編制

  • 主要視自己專案上的區分來編制
    vendor:外部套件,放置bootstrap或其他frameworks、liberaries、hover.css
    utils(helpers):工具類的class,放置字的大小、margin、border顏色設置、hover效果
    partials:放置一些部分區域的css,如:nav、footer; layout: (共通的佈局)如表頭、表尾,就是每頁都會出現
    而這幾個檔案,放在main.scss要有順序

    base:p段落、h1..等的全站設定(css reset)
    components :元件,如按鈕、卡片的設定

參考資料:alphacamp-Sass/SCSS 基本語法介紹,搞懂CSS 預處理器