CSS外掛：Sass 之混合宏(@mixin)、繼承(@extend)、占位符(%placehold

or0fun 發布于2019-08-30 12:54 / 2082人閱讀

摘要：普遍情況下這仨在實際項目中用得還是比較多的，玩起來吧混合宏如果你的代碼塊中涉及到變量，建議使用混合宏來創建相同的代碼塊。不足如果在樣式文件中調用同一個混合宏，會產生多個對應的樣式代碼，造成代碼的冗余。

學習Sass無非就是想高效的、面向對象編寫CSS，Sass中的@-Rules也是重要的一部分。
普遍情況下這仨在實際項目中用得還是比較多的，玩起來吧！

1. 混合宏@mixin

如果你的代碼塊中涉及到變量，建議使用混合宏來創建相同的代碼塊。
特點：可傳參。
不足：如果在樣式文件中調用同一個混合宏，會產生多個對應的樣式代碼，造成代碼的冗余。

SCSS：

.fl{
  @include float(left)
  div{
    @include float(left)
  }
}
.fr{
  @include float(right)
}

實際生成的CSS：

.fl { float: left; }
.fl div { float: left; }
.fr { float: right; }

而我想要的是這樣的CSS：

.fl, .fl div { float: left; }
.fr { float: right; }
//相同的`CSS`不會合并...看來"你"也就只有傳參好使了！

SCSS：

@mixin br3{ /* 沒有傳參 */
    border-radius: 3px;
}
@mixin br4($br4){ /* 傳一個不帶值的參數 */
    border-radius: $br4;
}
@mixin br6($br6: 6px){ /* 傳一個帶值的參數 */
      border-radius: $br6;
}
@mixin position-center($width, $height){ /* 傳多個參數 */
    width: $width;
    height: $height;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: (-($height)/2) 0 0 (-($width)/2);    
}
div{
    @include br4(4px); /* 調用混合宏 */
    @include br3();   /* 沒有傳值3px */
    @include br6();   /* 如果不傳值就是6px,傳值會覆蓋原始值 */
}
.pos-center{
    @include position-center(600px, 300px);
}

2. 繼承@extend()

如果你的代碼塊不需要專任何變量參數，而且有一個基類已在文件中存在，那么建議使用繼承。
不足：如果是類(.class)，不管有沒有調用(@extend)，在編譯的時候，都會生成對應的CSS。

.db{ display:block; }
div{ @extend .db }
生成的代碼：
.db, div{ display:block; } /* .db也生成出來 */

SCSS：

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

CSS：

/* 生成后的代碼 */
.btn, .box {  -webkit-border-radius: 3px;  border-radius: 3px; }
.box { margin-bottom: 5px; }

3. 占坑符%placeholder

占坑和繼承基本類似，唯一不同的是，相同的生成CSS塊并沒有在類中存在，而是額外聲明。
如果不調用已聲明的占位符，將不會產生任何CSS。
如果在不同選擇器調用占位符，那么編譯出來CSS將會把相同的代碼合并在一起。
不足：就是不能傳參啦！個人覺得%placeholder優于@extend。

SCSS：

%mt15 {
  margin-top: 15px;
}
%pt15{
  padding-top: 15px;
}

.btn6 {
  @extend %mt15;
  @extend %pt15;
}
.block {
  //@extend .btn6    
  @extend %mt15;
  @extend %pt15;
}

CSS：

/* 生成的代碼 */
.btn6, .block { margin-top: 15px; }
.btn6, .block { padding-top: 15px; }
/* 然而不會和已有代碼合并，倒是合并啊 */

4. Reference API

SASS_REFERENCE — Sass Documentation #Directives

注：為了第一篇文章發布成功，回頭整理整理SASS。
如有不正之處，歡迎指正。

GPU云服務器云服務器占位符 asp占位符 php 占位符 python 占位符

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115150.html

css預編譯--sass基礎篇

摘要：變量聲明和調用這是的編程元素基礎之一。如下在最外層聲明的是全局變量，全局范圍內可以調用，在中聲明的是的局部變量，只在內部內進行調用。生成的如下上面的內容就是的基礎篇，進階篇的話會整理一下函數和方法規則相關的東西。 sass起源和簡介 css 其實不是一門編程語言， css 全稱 Cascading Style Sheets (層疊樣式表)是一種用來表現HTML（標準通用標記語言的一個應...

keithyau 2019-08-29 15:23 評論0 收藏0
vue入門文章

摘要：本來想自己寫一篇關于入門的文章。后面可能在這篇文章基礎上，有所內容的增加。預處理器定義了一種新的專門的編程語言，編譯后成正常的文件。本來想自己寫一篇關于vue入門的文章。但是看到鏈接的文章后，覺得寫得太詳細了，實在有保存下來的必要。后面可能在這篇文章基礎上，有所內容的增加。 CSS預處理器定義了一種新的專門的編程語言，編譯后成正常的CSS文件。為CSS增加一些編程的特性，無需考慮瀏...

seanHai 2019-08-29 17:06 評論0 收藏0
SASS詳解

摘要：以前看到之類的工具覺得應該比較難，今天接觸了之后發現挺好用的，主要是方便了的編寫。具體可以看慕課網教程編譯方法在命令行輸入編譯單個文件編譯整個文件夾到文件夾也就是這樣的語法下文中我都這樣寫。這里貼一張慕課網拿到的表格。以前看到SASS之類的工具覺得應該比較難，今天接觸了之后發現挺好用的，主要是方便了CSS的編寫。在編寫比較大的項目的時候，由于內容很多，因此樣式表也會比較繁雜，如果要修...

余學文 2019-08-29 11:29 評論0 收藏0
scss學習

摘要：和的區別文件擴展名不同和是以嚴格縮進式語法規則來書寫的，不帶大括號和分號而的語法和書寫語法類似。單行注釋，只保留在源文件中，編譯后被省略。在后面加一個感嘆號，表示這是重要注釋。重要聲明繼承允許一個選擇器，繼承另一個選擇器，使用命令。 1. SASS和SCSS的區別文件擴展名不同：.sass和.scss； SASS是以嚴格縮進式語法規則來書寫的，不帶大括號和分號；而SCSS的語法和C...

cpupro 2019-08-02 16:00 評論0 收藏0
scss學習

摘要：和的區別文件擴展名不同和是以嚴格縮進式語法規則來書寫的，不帶大括號和分號而的語法和書寫語法類似。單行注釋，只保留在源文件中，編譯后被省略。在后面加一個感嘆號，表示這是重要注釋。重要聲明繼承允許一個選擇器，繼承另一個選擇器，使用命令。 1. SASS和SCSS的區別文件擴展名不同：.sass和.scss； SASS是以嚴格縮進式語法規則來書寫的，不帶大括號和分號；而SCSS的語法和C...

wzyplus 2019-08-29 14:01 評論0 收藏0