嗨各位，今天是鐵人賽第13天，昨天講了一些基本語法，我們今天也是繼續補充一些語法，那我們廢話不多說直接開始。

基本巢狀結構

在編寫CSS的時候會有一些階層結構複雜的情況，我在暑假有遇到過這個問題，先來看我暑假寫的某段CSS改寫

.container {
  background-color: #f0f0f0;
  padding: 20px;
}

.container h1 {
  color: #333;
  font-size: 24px;
}

.container p {
  color: #666;
  font-size: 16px;
}

然而在SCSS中可以有更好的寫法還有更好的可讀性，以下是範例

.container {
  background-color: #f0f0f0;
  padding: 20px;

  h1 {
    color: #333;
    font-size: 24px;
  }

  p {
    color: #666;
    font-size: 16px;
  }
}

是不是有更簡單也好讀的感覺，巢狀界是這麼簡單，還有就是之前提到過的:hover、:active、:link等偽類選擇器要怎麼寫成巢狀，來看下面的範例:

<div class="hello">
    <span>你好</span>
</div>

.hrllo{
color: yellow;
}
.hello:hover{
    color: blue;
}

那寫成Scss

.hello{
    color: yellow;
    &:hover{
        color: blue;
    }
}

偽元素前面要加"&"代表其作用，就是這麼簡單。

@mixin

允許定義一組樣式，然後在需要的地方重複使用這些樣式，就像是函數一樣。

如果我們要定義可以使用@mixin指令，放在你的SCSS前面，像是:

@mixin test{
    background-color: $first-color;
    color: $secound-color;
    font-size: $size;
}

這樣就能定義了一個名為test的混合。那我們該如何使用呢?

@include

可以使用"@include"來使用@mixin，我們直接來看範例:

// 使用混合
.element {
  @include test;
}

這樣就能使.element具有test定義的所有樣式。

傳遞參數

@mixin還可以接受參數，使其更靈活，那麼該如何寫呢?我們也是直接看範例:

// 定義接受參數
@mixin text($font-size, $color) {
  font-size: $font-size;
  color: $color;
  line-height: 1.5;
}

然後使用@include傳遞參數

.element {
  @include text-style(18px, #3498db);
}

這樣就就能使.element具有不同的字體大小和顏色。

@mixin的優勢

• 代碼可重復利用： 可以將常用的樣式定義為@mixin，並在整個樣式表重用它們，從而減少代碼重複。

• 可維護性： 如果需要更改樣式，只需修改混合的定義，而不必更改每個具體的樣式規則。

• 可讀性： 混合可以使樣式表更具可讀性，因為你可以將相關的樣式組織在一起。

今天的介紹就在此告一段落，那我們明天鐵人賽再見吧~