DAY6-寫CSS很痛苦嗎?SCSS快速入門介紹

寫CSS最痛苦的事情是什麼?

介紹SCSS之前,先想想寫CSS最痛苦的地方是什麼?

  • 寫法很囉唆
  • 不容易維護

例如以下這個例子

div {
    color: #d7d7d7;
}

div ul{
    color: #40809d;
}

div ul span .highlight{
    color: #40809d;
}

寫法很囉唆

假如這是一個元件,裡面還有一系列的元素,彼此之間有階層的關係。如果要設計這個元素的樣式的話,就不斷重複寫。而且重複寫了幾次,寫了好幾層也不但輕易看出他們之間彼此的關係

不容易維護

假設顏色 #40809d 是主視覺的顏色。如果有一天設計師想要修改主視覺顏色。那麼身為前端工程師的我們卻沒有方法可以一鍵修改,豈不是尷尬?以這個例子為例,就要修改兩個地方。假如這份樣式原本不是自己寫的,交接時也沒有交代清楚,就不知道有多少地方要改。

如果用SCSS寫呢?

$primaryColor: #40809d;
div{
    color: #d7d7d7;
    ul{
        color: $primaryColor;
        span{
            .highlight{
                color: $primaryColor;
            }
        }
    }
}
  • 巢狀的寫法,不但可以減少寫很多重複的元素,也可以讓元素之間的關係更清晰
  • 使用變數定義顏色,如果修改的話,只需要修改變數的定義的話,就可以修改所有使用到這個變數的樣式。

什麼是SCSS?

SCSS是CSS的超集合,基本上和CSS的寫法幾乎一模一樣。只是SCSS多了變數和各種模組化的用法。讓樣式檔案經過工程化和模組化之後,不僅減少開發時間,也增加維護時的彈性,應付更多不同的需求。

變數

可以像Javascript一樣,將值用變數儲存起來,可以重複使用。如果要修改,只要修改變數的值後,就可以全部套用。

$primaryColor: #393b3e;
$secondaryColor: #40809d;
$tltleFontSize: 96px;
$columnGap: 4px;

變數除了宣告以外,也可以做運算

$standardFontSize: 96px;
h1{
  font-size: $standardFontSize;
}
h2{
  font-size: $standardFontSize / 2;
}

例如副標的文字大小要是主標的一半,可以使用四則運算的方式訂定規則,這樣更加容易維護。

使用情境

一般來說,網站大多有主視覺配色和副視覺配色等設定。可以將這些設定宣告成變數,套用在專案當中。未來如果要修改設定,只要修改變數就好,不必再到處修改

巢狀

巢狀寫法

巢狀的寫法可使使用中括號來表之間的上下關係,越多括號代表越下層

.parent{
  color:blue;
  .child{
    font-size:12px;
    .grandson{
      border: 1px solid #fff;
    }
  }
}

這樣的寫法編譯後等同於CSS的

.parent {
  color: blue;
}

.parent .child {
  font-size: 12px;
}

.parent .child .grandson{
  border:1px solid #fff
}

平級(&)

巢狀的寫法是指class之間有上下階層的關係,但是如果要寫平級的class,可以使用(&)代表平級

假設有一個html的結構是這樣

<div class="title highlight">
  這是重點
</div>

想要宣告一個同時擁有title和highlight的class的樣式可以這樣宣告

.title{
    &.highlight{
        color:yellow
    }
}

偽類(:)

CSS中有許多偽類可以使用,例如input就有hover、focus等不同狀態,可以使用(:)代表偽類。更可以搭配平級的用法,一次訂好各種不同的狀態

input{
    &:focus{
        color:red
    }
    &:hover{
        color: blue;
    }
}

mixin

mixin的用法很像是CSS的function或是一群值的組合

例如以下範例為一個表格的樣式設定

@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td,
  th {
    padding: 2px;
  }
}

使用 @mixin 加名稱,來宣告一組樣式的設定

#data {
  @include table-base;
}

如果要使用的話,使用 @include 來引入設定

這樣的寫法編譯後等同於CSS

#data th {
  text-align: center;
  font-weight: bold;
}
#data td,
#data th {
  padding: 2px;
}

mixin與變數的搭配

說mixin很像function,那必定得能輸入參數,並且用參數做一些事情。

@mixin version($color) {
    background-color: $color;
    ::placeholder {
        color: $color;
    }
    .top-info{
        .ui-inputgroup .ui-inputgroup-addon{
            background-color: $white;
            width: 50px;;
            i{
                color:$color;
            }
        }
        .ui-button{
            background-color: $white;
            color:$color;
            padding-top: 10px;
            padding-bottom: 10px;
        }
    }   
}

例如mixin中,使用變數 $color 去當作參數,然後直接套用到使用到的CSS屬性。這樣要使用的時候,再由外部呼叫的時候,決定賦予這個變數什麼顏色。

@include version($darkOrange)

範例

https://codepen.io/tso1158687/pen/MWyzeZj