iT邦幫忙

0

菜雞SCSS初體驗

還記得前兩週我都在學習如何手刻RWD網頁,不只有許多的HTML結構要去注意。
就連CSS樣式也希望能使用模組化的方式建構。
總之,就是要讓code不要太冗長不好管理。

在這個時候就遇到了一個叫做SCSS的好東西!

還記得剛開始碰程式時,有跟著別人使用過一次的經驗。
那時候只覺得...
恩?
當工程師覺得一件事很麻煩費時的時候,居然是再用另一種語言去簡化它嗎?!
在我看起來怎麼變得更麻煩...
然後腦袋還是打結,程式碼還是繼續看不懂...

之後持續看了各種前端的課程又過了半年,練習了一些版型,開始接觸了RWD...
恩!開始操作SCSS的時候真的猶如天降甘霖!!

當我意識到SCSS可以大大簡化我寫CSS的時間時,我馬上自告奮勇地在心裡下了決定。
下次再寫RWD的時候絕對要用上SCSS!


初期在寫css時,越寫到後面就越來越長,
選擇器也要一直選一直選、選了又選的無奈感...
明明只是簡單的一頁式網頁,都有可能讓css變得又臭又長。

當我開始寫RWD時,又更難了。因為要設定至少兩個斷點,
要滑到最下面寫pad的寬度,又要滑到更下面寫mobile的寬度。
真的深刻體會前人所說,花最長時間的不是寫code,是找code和看code。

而SCSS新增了嵌套、變數、混入、共用、函式這幾大功能,
就大大解決了很多傳統css會遇到的問題。

變數-Variables
有點像是JavaScript一樣,可以用$字號取一個變數名稱,然後賦予一個值。
通常會設定顏色、字型,或各種需要重複用到的東西上面。

$font-style: 'Roboto', sans-serif;
$primary:rgb(65, 103, 136);

h1{
    font-family: $font-style;
    color: $primary;
}

SCSS使用$字號命名變數的寫法

h1{
    font-family:"Roboto",sans-serif;
    color:#416788
    }

編譯後的css

嵌套-Nesting
嵌套的使用就像我們平常在寫HTML的階層一樣,可以更清楚顯示階層,也避免一直重複選擇器的困擾。

.nav-link{
    display: flex;
    list-style: none;
    
    li{
        margin-right: 10px;
    }
    a{
        display: block;
        text-decoration: none;
        color: black;
        padding: 5px;
    }
}

SCSS可以將樣式用階層的方式撰寫,減少重複選取問題。

.nav-link {
    display: flex; 
    list-style: none; 
}
    
.nav-link li { 
    margin-right: 10px; 
}
    
.nav-link a { 
    display: block; 
    text-decoration: none; 
    color: black; 
    padding: 5px; 
}

編譯後的css

混入-Mixin
當一段css會一直被重複使用到,就可以把那段css設定成一個mixin,
可以在其中輸入不同的“參數”去做出改變,甚至還可以讓RWD撰寫起來更加輕鬆。

@mixin square($W-size, $H-size, $color, $radius: 0) {
    width: $W-size;
    height: $H-size;
    background: $color;

    @if $radius != 0 {
      border-radius: $radius;
    }
}

.box {
    @include square(100px, 100px, red, $radius: 4px);
}  
    
.card {
    @include square(200px, 300px, rgb(220, 223, 220), $radius: 10px);
}

SCSS將類似樣式組成@mixin,運用參數去改變不同之處。

.box {
  width: 100px;
  height: 100px;
  background: red;
  border-radius: 4px; 
}

.card {
  width: 200px;
  height: 300px;
  background: #dcdfdc;
  border-radius: 10px; 
}

編譯後的css

混入-Mixins運用在RWD的寫法

@mixin pad{
    @media(max-width:768px){
      @content;
    }
  }
  @mixin mobile{
    @media(max-width:576px){
      @content;
    }
  }
  
.box {
    height: 100px;
    width: 100px;
    background: #000;
    
    @include pad{
        background: red;
    }
    
    @include mobile{
        background: yellow;
    }
  }

SCSS用@Mixin和@content的搭配,
當設定不同斷點時可以直接寫在要變換的樣式之下。
就不用一直把css拉到最下面寫樣式,或是重複寫@midia的斷點。

.box {
  height: 100px;
  width: 100px;
  background: #000; 
  }
  @media (max-width: 768px) {
    .box {
      background: red; 
      } 
  }
  @media (max-width: 576px) {
    .box {
      background: yellow; 
      } 
  }

編譯後的css

共用-Extends
當選擇器中包含了一些相同樣式時,又不想重複的寫同個樣式,就可以使用上這個功能。

%message-shared {
    border: 1px solid rgb(0, 0, 0);
    padding: 20px;
  }
  
  .box {
    @extend %message-shared;
}
  .error {
    @extend %message-shared;
    border-color: red;
}
  .banner {
    @extend %message-shared;
    padding: 50px;
}
  .btn {
    @extend %message-shared;
    border-radius: 20px;
}

SCSS使用%寫樣式,之後可以重複使用。也可以之後寫上另外要更改的樣式。

.box, .error, .banner, .btn {
  border: 1px solid black;
  padding: 20px; 
  }

.error {
  border-color: red;
  }

.banner {
  padding: 50px;
  }

.btn {
  border-radius: 20px; 
  }

編譯後的css

混入-Mixins 與 共用-Extends
這兩個其實有點像,都可以把相同樣式打包起來重複使用,
但是mixins是可以加入不同“參數”去做變化,而共用卻是比較適用於“一模一樣”的樣式更加適合。
能理解最後的code會怎麼呈現之後可以更很好理解。

.box {
  border: 1px solid black;
  padding: 20px;
  }

.error {
  border: 1px solid black;
  padding: 20px;
  border-color: red;
  }

.banner {
  border: 1px solid black;
  padding: 20px;
  padding: 50px; 
  }

.btn {
  border: 1px solid black;
  padding: 20px;
  border-radius: 20px; 
  }

Mixin的方式編譯出來的css,同樣的樣式重複再選擇器中出現。

.box, .error, .banner, .btn {
  border: 1px solid black;
  padding: 20px; 
  }

.error {
  border-color: red; 
  }

.banner {
  padding: 50px; 
  }

.btn {
  border-radius: 20px; 
  }

共用的方式編譯出的css,把相同樣式的選擇器寫在一起,大大省掉了相同的code。
另外修改的樣式,也因為權重的先後而有所更改。

函式-Function
最後一個是函式,我並沒有使用過。
看起來更像是混入和變數的混合使用方法...
所以這邊沒辦法給大家很好的介紹:(

下方是我學習SCSS時找到的一些參考資料能更好的解說以上內容。
在此附上我在學習SCSS時找到的一些資料。

最後提醒:
SCSS是需要經過編譯,HTML才能辨識出樣式的,
所以link的是經過編譯後的css,並不是SCSS本身。

下方的參考資料也附上了一些如何設定的解說!

那我們就下次見嚕~

參考資料:
使用VSCode外掛自動編譯SASS/SCSS
SCSS重點筆記
Sass/SCSS 基本語法介紹,搞懂CSS 預處理器
如何利用 Sass 的 @mixin 功能,讓撰寫 RWD 網站變的輕而易舉


尚未有邦友留言

立即登入留言