何時在Sass中使用@extend和@mixin

我在學習薩斯在official tutorial。何時在Sass中使用@extend和@mixin

當我學到@mixin和@extend時，我知道它們都是用於CSS代碼重用，但我無法弄清楚何時使用哪一個。對我來說有兩點不同。

@mixin可以接受的參數（但@extend不能？），這是很好的，它像一個功能。
@extend可以讓你的輸出CSS包含更少的代碼，就像在這個官方教程中輸出CSS (.message, .success, .error, .warning { })一樣。

目前，我只知道，如果我想採取額外的論據，我將使用@mixin。如果我想要減少輸出CSS代碼，我將使用@extend。除了那兩個，我可以選擇其中一個來使用。我對麼？

來源

2017-08-26 EntryLeveDeveloper

你是對的。

如果您希望輸出根據您的調用方式而改變，您應該使用mixin。

因此，在某些情況下，使用%placeholder和@extend會產生更少的CSS。認識@extend創建關係很重要。無論何時使用@extend，您都會在樣式表的其他地方移植選擇器，以便與其他正在移植的選擇器共享特徵。

EXTEND

例如

.awesome { 
    width: 100%; 
    height: 100%; 
} 

body { 
    @extend .awesome; 
} 
p { 
    @extend .awesome; 
}

將返回：

.awesome, body, p { 
    width: 100%; 
    height: 100%; 
}

MIXIN

@mixin awesome { 
    width: 100%; 
    height: 100%; 
} 

body { 
    @include awesome; 
} 
p { 
    @include awesome; 
}

返回結果：

body { 
    width: 100%; 
    height: 100%; 
} 
p { 
    width: 100%; 
    height: 100%; 
}

但隨着混入可以有參數，如：

@mixin awesome($w: 100%, $h: 100%) { 
    width: $w; 
    height: $h; 
} 

body { 
    @include awesome(960px); 
} 
p { 
    @include awesome; 
}

將返回：

body { 
    width: 960px; 
    height: 100%; 
} 
p { 
    width: 100%; 
    height: 100%; 
}

希望這是有幫助的！

附加：

的@extend指令不靈活。你無法將參數傳遞給它，所以那裏有什麼。在@media指令中使用@extend也存在限制，您無法使用@extend在不同的媒體指令中擴展選擇器。

使用mixin的主要優勢在於它們具有的強大功能和靈活性，因爲它們可以接受參數。當然，如果你想傳遞參數，你必須選擇@mixin而不是@extend。

它們是可以互換的，它也取決於你是否想要/不得不堅持乾燥CSS。

EXTEND

%hide-text { 
    text-indent: -9999px; 
    overflow: hidden; 
} 

.foo { 
    @extend %hide-text; 
} 

.bar { 
    @extend %hide-text; 
} 

.baz { 
    @extend %hide-text; 
}

尼斯和清潔結果：

.foo, .bar, .baz { 
    text-indent: -9999px; 
    overflow: hidden; 
}

MIXIN

@mixin hide-text { 
    text-indent: -9999px; 
    overflow: hidden; 
} 

.foo { 
    @include hide-text; 
} 

.bar { 
    @include hide-text; 
} 

.baz { 
    @include hide-text; 
}

結果：

.foo { 
    text-indent: -9999px; 
    overflow: hidden; 
} 

.bar { 
    text-indent: -9999px; 
    overflow: hidden; 
} 

.baz { 
    text-indent: -9999px; 
    overflow: hidden; 
}

你可以看到CSS選擇器之間沒有關係。

來源

2017-08-26 22:07:22 Alessio

感謝您的回答。但實際上，當我在其教程（http://sass-lang.com/guide）中學習'@mixin'和'@extend'時，我認爲你的答案是一樣的。除了我在文章中提到的兩種情況外，我更關心何時使用哪一種。 – EntryLeveDeveloper

呃..我添加了一些更多的信息，讓我知道如果你需要更深入的解釋 – Alessio

非常感謝。您能否提供參考文件以獲取您的附加信息？你添加的信息看起來像是我的兩個案例在我的文章中的解釋？除了我的兩種情況外，你還有更多的信息嗎？ – EntryLeveDeveloper

@extend擴展規則內部的規則實質上創建繼承。

.button { 
    color: black; 
} 
.submit-button { 
    @extend .button; 
    border 1px black solid; 
}

結果：

.submit-button { 
    border: 1px black solid; 
} 
.button, .submit-button { 
    color: black; 
}

使用@extend當你想繼承的規則

@mixin創建的代碼重複的部分，更像是功能

@mixin large-font { 
    font: { 
    size: 14px; 
    family: san-serif; 
    weight: bold; 
    } 
} 

#form { 
    @include large-font; 
}

使用@mixin時你知道你會重複給自己很多。創建@mixin可幫助您避免這種情況。

來源

2017-08-26 22:30:23

何時在Sass中使用@extend和@mixin

回答

相關問題