擴(kuò)展/繼承
　　　　繼承對(duì)于了解css 的同學(xué)來(lái)說(shuō)一點(diǎn)都不陌生，先來(lái)看一張圖
　　　　在Sass 中也具有繼承一說(shuō)，也就是繼承類中的樣式代碼塊，在Sass中時(shí)通過關(guān)鍵詞“@extend”來(lái)
　　　　繼承已經(jīng)存在的類樣式塊，從而實(shí)現(xiàn)代碼的繼承。
　　//SCSS
　　　　　　.btn{
　　　　　　　　　　border:1px solid #ccc;
　　　　　　　　　　padding:6px 10px;
　　　　　　　　　　font-size:14px;
　　　　　　}
　　　　.btn-primarg{
　　　　　　　　background-color:#f36;
　　　　　　　　color:#fff;
　　　　　　　　@extend .btn;
　　　　　　}
　　　　.btn-second{
　　　　　　　　background-color:organge;
　　　　　　　　color:#fff;
　　　　　　　　@extend .btn;
　　　　　　}
　　編譯出來(lái)之后：
　　　　//css
　　　　　　.btn, .btn-primary, .btn-second {
　　　　　　　　　　　　　　　　　　border:1px solid #ccc;
　　　　　　　　　　　　　　　　　　padding:6px 10px;
　　　　　　　　　　　　　　　　　　font-size:14px;
　　　　　　　　　　　　　　}
　　　　　　.btn-primary{
　　　　　　　　　　　　background-color:#f36;
　　　　　　　　　　　　color:#fff;
　　　　　　　　　　}
　　　　　　.btn-second{
　　　　　　　　　　background-color:orange;
　　　　　　　　　　color:#fff;
　　　　　　　　}
　在 Sass 中的繼承，可以繼承類樣式塊中所有樣式代碼，而且編譯出來(lái)的 CSS 會(huì)將選擇器合并在一起，形成組合選擇器：
　　　　　　　　.btn, .btn-primary, .btn-second {
　　　　　　　　　　　　　　　　　　　　　　border: 1px solid #ccc;
　　　　　　　　　　　　　　　　　　　　　　padding: 6px 10px;
　　　　　　　　　　　　　　　　　　　　　　font-size: 14px;
　　　　　　　　}
占位符%placeholder
　　　　　Sass中的占位符%placeholder 功能是一個(gè)很強(qiáng)大，很實(shí)用的一個(gè)功能，可以取代以前的css中的基類造成的
　　　　　代碼冗余的情形，因?yàn)?placeholder 聲明的代碼，如果不被@extend 調(diào)用的話，不會(huì)產(chǎn)生任何代碼。
　　　　　　　　%mt5{
　　　　　　　　　　　　margin-top:5px;
　　　　　　　　　　}
　　　　　　　　%pt5{
　　　　　　　　　　　　padding-top：5px；
　　　　　　　　　　}
　　　　　　　　.btn{
　　　　　　　　　　　　@extend %mt5;
　　　　　　　　　　　　@extend %pt5;
　　　　　　　　}
　　　　　　　　.block{
　　　　　　　　　　　　@extend %mt5;
　　　　　　　　　　span{
　　　　　　　　　　　　@extend %pt5;
　　　　　　　　　　　　　　}
　　　　　　　　}
　　　　　　編譯出來(lái)的css
　　　　　　　　　//css
　　　　　　　　.btn, .block{
　　　　　　　　　　　　　　margin-top:5px;
　　　　　　　　　　}
　　　　　　　　.btn, .block span{
　　　　　　　　　　　　　　padding-top:5px;
　　　　　　　　}
　　　　通過 @extend 調(diào)用的占位符，編譯出來(lái)的代碼會(huì)將相同的代碼合并在一起。這也是我們希望看到的效果，也讓你的代碼變得更為干凈。
混合

　　　　混合宏vs繼承vs占位符
　　　　　a Sass中的混合宏使用
　　　　　　//SCSS中混合宏使用
　　　　　　@mixin mt($var){
　　　　　　　　　　　　　　margin-top:$var;
　　　　　　　　　　　　}
　　　　　　.block{
　　　　　　　　　　@include mt(5px);
　　　　　　　　　　span{
　　　　　　　　　　　　display:block;
　　　　　　　　　　　　@include mt(5px);
　　　　　　　　　　}
　　　　　　　　}
　　　　　　.header{
　　　　　　　　　　color:orange;
　　　　　　　　　　@include mt(5px);
　　　　　　　　　　span{
　　　　　　　　　　　　dispay:block;
　　　　　　　　　　　　@include mt(5px);
　　　　　　　　　　　　}
　　　　　　　　}
　　　　　　編譯結(jié)果：
　　　　　　　　.block span {
　　　　　　　　　　　　display: block;

　　　　　　　　　　　　}
　　　　　　　　.header {
　　　　　　　　　　　　color: orange;

　　　　　　　　　　　　}
　　　　　　　　.header span {
　　　　　　　　　　　　display: block;

　　　　　　　　　　}
　　　　　　　　.block, .block span, .header, .header span {
　　　　　　　　　　　　　　margin-top: 5px;

　　　　　　　　　　}
　　　　建議：如果你的代碼塊中涉及到變量，建議使用混合宏來(lái)創(chuàng)建相同的代碼塊。
　　b)Sass中繼承
　　　　同樣的，將上面代碼中的混合宏，使用類名來(lái)表示，然后通過繼承來(lái)調(diào)用。
　　　　　　　　　　.mt{
　　　　　　　　　　　　　　margin-top:5px;
　　　　　　　　　　　　}
　　　　　　　　　　.block {
　　　　　　　　　　　　　　@extend .mt;
　　　　　　　　　　　　span{
　　　　　　　　　　　　　　　　display:block;
　　　　　　　　　　　　　　　　@extend .mt;
　　　　　　　　　　　　　　}
　　　　　　　　　　　　}
　　　　　　　　　　.header{
　　　　　　　　　　　　　　color:orange;
　　　　　　　　　　　　　　@extend .mt;
　　　　　　　　　　}
　　　　　編譯結(jié)果：
　　　　　　　　.block span {
　　　　　　　　　　　　display: block;

　　　　　　　　　　}
　　　　　　.header {
　　　　　　　　　　color: orange;

　　　　　　　　　　}
　　　　　　.header span {
　　　　　　　　　　display: block;

　　　　　　　　　　}
　　　　　　.block, .block span, .header, .header span {
　　　　　　　　margin-top: 5px;

　　　　　　　　　　}

　　　　建議:如果你的代碼塊不需要專任何變量參數(shù)，而且有一個(gè)基類已在文件中存在，那么建議使用Sass的繼承。
　　c)占位符
　　　　　　最后來(lái)看占位符，將上面的代碼中的基類.mt 換成Sass的占位符格式
　　　　//SCSS中占位符的使用
　　　　　　%mt{
　　　　　　　　margin-top:5px;
　　　　　　}
　　　　　　.block{
　　　　　　　　@extend %mt;
　　　　　　　　span{
　　　　　　　　　　display:block;
　　　　　　　　　　@extend %mt;
　　　　　　　　　　}
　　　　　　　　}
　　　　　　.header{
　　　　　　　　color:orange;
　　　　　　　　@extend %mt;
　　　　　　　　span{
　　　　　　　　　　display:block;
　　　　　　　　　　@extend %mt;
　　　　　　　　}
　　　　　　　　}
　　　　編譯結(jié)果：
　　　　　　.block span {
　　　　　　　　display: block;

　　　　　　　　}
　　　　　　.header {
　　　　　　　　color: orange;

　　　　　　　　 }
　　　　　　.header span {
　　　　　　　　display: block;

　　　　　　　　}
　　　　編譯出來(lái)的 CSS 代碼和使用繼承基本上是相同，只是不會(huì)在代碼中生成占位符 mt 的選擇器。那么占位符和繼承的主要區(qū)別的，“占位符是獨(dú)立定義，
　　　　不調(diào)用的時(shí)候是不會(huì)在 CSS 中產(chǎn)生任何代碼；繼承是首先有一個(gè)基類存在，不管調(diào)用與不調(diào)用，基類的樣式都將會(huì)出現(xiàn)在編譯出來(lái)的 CSS 代碼中。”

　差值#{}
　　　　使用css 預(yù)處理器語(yǔ)言的一個(gè)主要原因是想使用Sass 獲得一個(gè)更好的結(jié)構(gòu)體系，比如說(shuō)你想寫更干凈的，搞笑的和面向?qū)ο蟮?br /> 　　　　css. Sass 中的差值（Interpolation）就是重要的一部分，讓我們看一下下面的例子。
　　　　　　$properties:(margin ,padding);
　　　　　　@mixin set-value($side,$value){
　　　　　　@each $prop in $properties{
　　　　　　　　#{$prop}-#{$side}:$value;
　　　　　　　　　　}
　　　　　　　　}
　　　　　　.login-box{
　　　　　　　　@include set-value(top,14px);
　　　　　　　　}
　　　　　　代碼編譯成css
　　　　　　.login-box{
　　　　　　　　　　margin-top:14px;
　　　　　　　　　　padding-top:14px;
　　　　　　}
　　　　當(dāng)你想設(shè)置屬性值的時(shí)候你可以使用字符串插入進(jìn)來(lái)，另一個(gè)使用的用法是構(gòu)建一個(gè)選擇器。
　　　　@mixin generate-sizes($class,$small,$medium,$big)

轉(zhuǎn)載于:https://www.cnblogs.com/nmxs/p/5274806.html

總結(jié)

以上是生活随笔為你收集整理的Sass 基础(三)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。