SCSS @mixin和class 區別

@mixin用法可以參閱SCSS @mixin一章節。

CSS class樣式類可以參閱CSS 類選擇器一章節。

混合器和class樣式類功能非常類似，都可以組織一大段程式碼，也可以實現複用。

但是兩者還是有很大區別的，下面做一下介紹：

最重要的區別就是類名是在html使用，而混合器是在樣式表中應用的。

這意味著類名具有語義化含義，而不僅是一種展示性描述：用來描述html元素的含義而不是元素的外觀。

而另一方面，混合器是展示性的描述，用來描述一條css規則應用之後會產生怎樣的效果。

一.class樣式類程式碼：

[HTML] 純文字檢視 複製程式碼
<div class="notice">註冊賬號才能使</div>

class屬性值具有語義，它表明這個div的作用大體是用來實現一個通知之類的功能。

二.SCSS混合器程式碼：

[Scss] 純文字檢視 複製程式碼
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

rounded-corners混合器是展示性的，描述包含它的css規則最終的視覺樣式，尤其是邊框角的視覺樣式。

混合器和類配合使用寫出整潔的html和css，因為使用語義化的類名亦可以幫你避免重複使用混合器。

為了保持你的html和css的易讀性和可維護性，在寫樣式的過程中一定要銘記二者的區別。