iT邦幫忙

2021 iThome 鐵人賽

DAY 1
0
Modern Web

這個網站也太嗨!30 個網頁動態提案系列 第 1

#0 - SCSS 不負責任快速入門

在鐵人賽正式開始之前,想先寫一下SCSS。
因為我的CSS全部都是SCSS寫的...怕大家看不懂馬上棄看 QQ
這一篇是簡易的SCSS小抄說明,主要針對文章中出現SCSS的部分做簡單說明。

會用SCSS是之前公司內部的風格,而SCSS用過真的回不去,主要原因是:

  1. 可階層化,可折疊!
  2. 可模組化,重複利用!

SCSS是CSS 預處理器的一種,可以說是 CSS 語法的擴充,
是為了彌補 CSS 在大型專案維護性的不足,
SCSS的變數、混入、繼承等功能,
讓我們可以更有結構地撰寫簡潔、清晰且好維護的 CSS 程式碼。
(參考:Sass/SCSS 基本語法介紹,搞懂CSS 預處理器


起手式:SCSS環境

想要練習SCSS的話,最快的方法是Codepen CSS的設定按鈕(右上角的 * )
選取SCSS編譯器就可以使用。(會幫你把SCSS變成瀏覽器看懂的語言)

使用 Vue-Cli 在安裝時就會問你要不要SCSS,也可以 npm/yarn SCSS套件,
並在撰寫的時候宣告: Vue Cli傳送器

一般寫網頁的時候就是要另外安裝SCSS 編譯器,搭配VS code套件。
我是用Live Sass Compiler
也可以用Gulp快速轉譯打包SCSS,可以看看這個影片:
Browsersync + Sass + Gulp in 15 minutes


階層化 - 折疊起來讓code好清楚!

SCSS 最基本的用法就是階層,就把他下面那一層塞進去{}裡面就好~
而 & —>就是指同階層的意思

//SCSS
.container{
	.content{
		blablabla
	}
	&:before{
		hahaha
	}
}

//CSS
.container>.content{
blablabla
}

.container::before{
hahaha
}


變數 - 重複利用變數,改樣式好輕鬆~

雖然CSS也有變數,但SCSS也很好用!在全域的地方宣告即可,不用多打什麼字~
但記得和其他CSS參數一起插入時,要使用#{}把變數匡起來

$color: rgb(255,255,255);

.container{
background: $color;
}

//官方案例
.icon-#{$name} {
background-image: url("/icons/#{$name}.svg");
position: absolute;
#{$top-or-bottom}: 0;
#{$left-or-right}: 0;
}

mixin - 多個變數組合重複利用!更強大

在JS裡面,我們可以透過混合來重複利用類別。JS mixin的用法
SCSS裡面也有一樣的用法:

//SCSS
@mixin transition{
  transition: all 500ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
}

.menu-icon_hamburger{
     border-radius: 5px;
     @include transition;
}

//轉譯 CSS

.menu-icon_hamburger {
  border-radius: 5px;
  transition: all 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

還可以把變數丟進去

@mixin flex($direction){
flex-direction: $direction;
}

header{
@include flex(column);
}

@extend - 繼承別人就不用努力寫樣式惹

當你需要使用另外一個class的樣式時,使用繼承的方式,就可以把他的樣式摳過來~

//scss
.button-basic  {
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-blue  {
  @extend .button-basic;
  background-color: blue;
}

//CSS
.button-basic,.button-blue  {
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-blue  {
  background-color: blue;
}

@for - 處理同類型元素好方便~

可以用for循環,來幫忙一次選取相同的元素~和做相同變量的變化
其他還有while / each等類似的功能,有興趣可以爬一下文件~

$base-color: #036;

@for $i from 1 through 3 {
  ul:nth-child(3n + #{$i}) {
    background-color: lighten($base-color, $i * 5%);
  }
}

@import - 分開管理再匯入真方便!

可以將SCSS變量和內容分開放置,才不會搞得一個文件落落長不好看~再用import的方法將他匯入到文件中。
另外可以在_.scss文件名稱前,加上下底線,告訴SCSS編譯器不用單獨編譯這個文件,這樣就不會有很多文件需要被匯入了。

文件: _list.scss

//可以省略下底線和.scss
@import "list";
...開始寫SCSS

其他

SCSS也可以使用清單,像陣列那樣使用

//官方案例
$sizes: 40px, 50px, 80px;

@each $size in $sizes {
  .icon-#{$size} {
    font-size: $size;
    height: $size;
    width: $size;
  }
}

還有很多好玩的功能再請大家自己去翻閱官方文件囉!


以上!

SCSS官方網站:https://sass-lang.com/ 可以再看更多SCSS的用法~

有任何錯誤或意見請批評指教
/images/emoticon/emoticon37.gif


下一篇
#0-好的動態讓你成為網站界愛馬仕、特斯拉!(前言)
系列文
這個網站也太嗨!30 個網頁動態提案33

尚未有邦友留言

立即登入留言