css前處理器scss/sass語法以及使用

半糖也甜吖發表於2023-01-05
CSS

scss

scss在css基礎語法上面增加了變數 (variables)、巢狀 (nested rules)、混合 (mixins)、匯入 (inline imports) 等高階功能，使用scss可以很方便的提高開發效率
scss語法以.scss檔案字尾結尾，其中語法格式有兩種sass,scss,兩種語法在書寫風格有差異，如下程式碼所示

scss

.container {
    width: 100px;
    height: 100%;
    .nav {
        width: 100px;
    }
}

sass

.container 
    width: 100px;
    height: 100%;
    .nav 
        width: 100px;

語法

巢狀規則 (常用)

scss允許將一套css樣式嵌入另一套樣式中，外層的容器將作為內層容器的父選擇器，如下程式碼

.container {
    width: 500px;
    height: 100px;
    header {
        width: 100%;
        height: 20%;
    }
    main {
        width: 100%;
        height: 20%;
    }
    footer {
        width: 100%;
        height: 20%;
    }
}

編譯後

.container {
    width: 500px;
    height: 100px;
}
.container header {
    width: 100%;
    height: 20%;
}
.container main {
    width: 100%;
    height: 20%;
}
.container footer {
    width: 100%;
    height: 20%;
}

父選擇器 (常用)

有時需要在內層樣式內選擇外層的父元素，那麼就可以使用&符號，如下程式碼所示

.container {
    width: 500px;
    height: 100px;
    &_header {
        width: 100%;
        height: 20%;
        &:hover {
            color: red($color: #000000);
        }
    }
    &_main {
        width: 100%;
        height: 20%;
        &:disabled {
            color: red;
        }
    }
    &_footer {
        width: 100%;
        height: 20%;
        &::after {
            position: absolute;
            content: '';
        }
    }
}

編譯後

.container {
    width: 500px;
    height: 100px;
}
.container_header {
    width: 100%;
    height: 20%;
}
.container_header:hover {
    color: 0;
}
.container_main {
    width: 100%;
    height: 20%;
}
.container_main:disabled {
    color: red;
}
.container_footer {
    width: 100%;
    height: 20%;
}
.container_footer::after {
    position: absolute;
    content: '';
}

屬性簡寫 (不常用)

.container {
    width: 500px;
    height: 100px;
    font: {
        family: fantasy;
        size: 30em;
        weight: bold;
    }
    background: {
        image: url('xxx');
        size: 100%;
    }
}

編譯後

.container {
    width: 500px;
    height: 100px;
    font-family: fantasy;
    font-size: 30em;
    font-weight: bold;
    background-image: url('xxx');
    background-size: 100%;
}

變數 (常用)

scss中使用$符號定義變數

  • 全域性變數
    在scss檔案頂部定義的變數，為全域性變數
$font-color: red;
$font-size: 18px;
$font-size-base: $font-size;

.text {
    color: $font-color;
    font-size: $font-size;
}

span {
    font-size: $font-size-base;
}

編譯後

.text {
    color: red;
    font-size: 18px;
}

span {
    font-size: 18px;
}
  • 區域性變數
    在屬性內定義的變數為塊級變數
.text {
    $font-color: red;
    $font-size: 18px;
    $font-size-base: $font-size;
    h1 {
        color: $font-color;
        font-size: $font-size;
        span {
            color: $font-color;
            font-size: $font-size;
        }
    }
}

編譯後

.text h1 {
    color: red;
    font-size: 18px;
}
.text h1 span {
    color: red;
    font-size: 18px;
}

運算 (常用)

scss中支援+ - * /運算

$base-width: 10;
$small-width: 30;
$large-width: $base-width + $small-width;

.div {
    width: $large-width + px;
}

.div1 {
    width: $small-width - $base-width + px;
}

.div2 {
    width: $small-width * $base-width + px;
}

.div2 {
    width: calc($small-width / $base-width) + px;
}

編譯後

.div {
    width: 40px;
}

.div1 {
    width: 20px;
}

.div2 {
    width: 300px;
}

.div2 {
    width: 3px;
}

@extend

scss允許使用@extend整合其他樣式規則

.item {
    width: 100%;
    height: 20%;
    background-color: red;
}

.item-1 {
    @extend .item;
    border: 1px solid blue;
}

.item-2 {
    @extend .item;
    border: 2px solid blue;
}

編譯後

.item,
.item-2,
.item-1 {
    width: 100%;
    height: 20%;
    background-color: red;
}

.item-1 {
    border: 1px solid blue;
}

.item-2 {
    border: 2px solid blue;
}

@if

當條件滿足時，輸入對應的樣式

p {
    @if 1 + 1 == 2 {
        border: 1px solid;
    }
    @if 5 < 3 {
        border: 2px dotted;
    }
    @if null {
        border: 3px double;
    }
}

$type: monster;
p {
    @if $type == ocean {
        color: blue;
    } @else if $type == matador {
        color: red;
    } @else if $type == monster {
        color: green;
    } @else {
        color: black;
    }
}

編譯後

p {
    border: 1px solid;
}

p {
    color: green;
}

@for

  • 語法一：@for $var from <start> through <end>
    從start開始，包含end
@for $i from 1 through 3 {
    .item-#{$i} {
        width: 2em * $i;
    }
}

編譯後

.item-1 {
    width: 2em;
}

.item-2 {
    width: 4em;
}

.item-3 {
    width: 6em;
}
  • 語法二：@for $var from <start> to <end>
    從start開始，不包含end
@for $i from 1 to 3 {
    .item-#{$i} {
        width: 2em * $i;
    }
}

編譯後

.item-1 {
    width: 2em;
}

.item-2 {
    width: 4em;
}

相關文章