1、繼承和占位符

兩者都是通過@extend來引用。

1.1 繼承

一個已經存在的css樣式類，可以被其他樣式類繼承。

例如，實現以下css樣式：

.btn, .btn--primary, .btn--info {border: 1px solid blue; }.btn--primary {color: black; }.btn--info {color: gray; }

scss中可以這樣寫，顯然，這種寫法便于維護和閱讀！

.btn {border: 1px solid blue; }.btn--primary {color: black;@extend .btn; }.btn--info {color: gray;@extend .btn; }

1.2 占位符

顧名思義，如果不被extend引用，它是不會被編譯，也就是：不會占用css文件大小。這是和繼承最大區別。

scss代碼如下：

%btn {border: 1px solid blue; }// 沒有被extend // 不會出現在css文件中 %test-btn {border: 1px solid black; }.btn--primary {color: black;@extend %btn; }.btn--info {color: gray;@extend %btn; }

編譯后的css代碼：

.btn--primary, .btn--info {border: 1px solid blue; }.btn--primary {color: black; }.btn--info {color: gray; }

2. 混合宏

scss中的函數，通過關鍵字@mixin聲明，@include引用。

2.1 參數設置和調用方式

無參調用
scss：

@mixin btn {border-radius : 3px; }.box {color: white;@include btn; }

css：

.box {color: white;border-radius: 3px; }

參數調用
scss:

$radius:3px !default;@mixin btn($radius:5px) { // 默認是 5pxborder-radius : $radius; }.box {color: white;@include btn($radius); // 傳入參數 }

css:

.box {color: white;border-radius: 3px; }

參數過多的情況

當參數2、3個時候，可以通過@mixin size($width,$height)這樣來調用。當參數過多，使用...符號。

scss:

$height: 15px !default; $width: 18px !default;@mixin size($list...) {@if length($list) == 0 {height: $height;width: $width; }@else if length($list) == 1 {height: $list;width: $list;}@else if length($list) == 2 {height: nth($list , 1);width: nth($list , 2);}@else {@debug "Too many parameters";} }.btn--primary {@include size(); }.btn--big {@include size(20px , 25px); }.btn--square {@include size( 18px ); }.btn--test {@include size(1px,2px,3px,4px); // just a test. console output "Too many parameters" what we have defined. }

輸出的css結果：

.btn--primary {height: 15px;width: 18px; }.btn--big {height: 20px;width: 25px; }.btn--square {height: 18px;width: 18px; }

2.2 好處和不足

混合宏最大的不足：會復用代碼，造成css冗贅（可以嘗試一下下方的測試代碼）。
當然，符合宏可以傳遞參數這點很nice。

可以編譯下方代碼，觀察下結果：

@mixin border-radius{-webkit-border-radius: 3px;border-radius: 3px; }.box {@include border-radius;margin-bottom: 5px; }.btn {@include border-radius; }

3. 版本

• scss:3.5.6
• ruby:2.4.4p296

歡迎技術交流，引用請注明出處。
個人網站：godbmw.com
Github：godbmw

轉載于:https://www.cnblogs.com/geyouneihan/p/9127328.html

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的详解scss的继承、占位符和混合宏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。