Scss 基本使用（ @extend、 @mixin、@import、@if、@for、@while、@each ）

一起養成寫作習慣！

Scss 基本使用（變量、嵌套）

Sass中文網

Sass 教程 | 菜鳥教程

1. 繼承（ @extend ）

@extend 指令告訴 Sass 一個選擇器的樣式從另一選擇器繼承。

如果一個樣式與另外一個樣式幾乎相同，隻有少量的差別，則使用 @extend 就顯得很有用。

<style lang="scss">
.contanier1{
  font-size: 24px;
  font-weight: bold;
  color: green;
}
.contanier2{
  @extend .contanier1;
  color: red;
}
.contanier3{
  @extend .contanier1;
  font-size: 30px;
}
</style>

Scss 基本使用（ @extend、 @mixin、@import、@if、@for、@while、@each ）

将以上代碼轉換為 CSS 代碼，如下所示：

<style lang="scss">
.contanier1, .contanier2, .contanier3{
  font-size: 24px;
  font-weight: bold;
  color: green;
}
.contanier2{
  color: red;
}
.contanier3{
  font-size: 30px;
}
</style>

使用 @extend 後，在 HTML 标簽中就不需要指定多個類 class="contanier1 contanier2" ，隻需要設定 class="contanier2" 類就可以了。

占位符 % placeholder

它可取代以前 CSS 中的基類造成的代碼備援的情形。

因為 %placeholder 聲明的代碼，如果不被 @extend 調用的話，不會産生任何代碼。

來看一個示範：

%fz20{
  font-size: 20px;
}
%red{
  color: red;
}

這段代碼沒有被 @extend 調用，他并沒有産生任何代碼塊，隻是靜靜的躺在你的某個 SCSS 檔案中。

隻有通過 @extend 調用才會産生代碼：

<div class="wrap">
  <div class="contanier1">
    <span class="content">contanier1</span>
  </div>
</div>

<style lang="scss">
%fz20{
  font-size: 20px;
}
%red{
  color: red;
}
.wrap{
  @extend %fz20;
  @extend %red;
}
.contanier1{
  @extend %fz20;
  .content{
    @extend %red;
  }
}
</style>

編譯出來的 CSS

.wrap, .contanier1{
  font-size: 20px;
}
.wrap, .contanier1 .content{
  color: red;
}

從編譯出來的 CSS 代碼可以看出，通過 @extend 調用的占位符，編譯出來的代碼會将相同的代碼合并在一起。這也是我們希望看到的效果，也讓你的代碼變得更為幹淨。

2. 混入（ @mixin ）

混入( mixin )通過 @mixin 指令來定義。

文法： @mixin name { property: value; property: value; ... }

定義 "basis-text" 的混入

@mixin basis-text{
  font-size: 24px;
  font-weight: bold;
  color: green;
}

注意： Scss 的連接配接符号 - 與下劃線符号 _ 是相同的，也就是 @mixin basis-text{ } 與 @mixin basis-text{ } 是一樣的混入。

使用 @include 指令，調用這個 mixin

文法： selector { @include mixin-name;}

調用 "basis-text" 的混入

<style lang="scss">
@mixin basis-text{
  font-size: 24px;
  font-weight: bold;
  color: green;
}
.contanier1{
  @include basis-text;
}
</style>

以上代碼轉換為 CSS 代碼，如下所示：

.contanier1{
  font-size: 24px;
  font-weight: bold;
  color: green;
}

混入中也可以包含混入，如下所示：

@mixin contanier1 {
  @include basis-text;
  @include link;
  @include special-border;
}

向混入傳遞變量

定義可接收參數的混入：

<style lang="scss">
@mixin basis-text($width,$color){
  font-size: 20px;
  color: green;
  border: $width solid $color;
}

.contanier1{
  @include basis-text(2px,red);
}
.contanier2{
  @include basis-text(5px,blue);
}
</style>

以上執行個體的混入參數為設定邊框的屬性 (color 和 width) 。

将以上代碼轉換為 CSS 代碼，如下所示：

.contanier1{
  font-size: 20px;
  color: green;
  border: 2px solid red;
}

.contanier2{
  font-size: 20px;
  color: green;
  border: 5px solid blue;
}

混入的參數也可定義預設值，文法格式如下：

<style lang="scss">
@mixin basis-text($width:2px,$color:red){
  font-size: 20px;
  color: green;
  border: $width solid $color;
}
.contanier1{
  @include basis-text;
}
</style>

在包含混入時，隻需要傳遞需要的變量名及其值：

<style lang="scss">
@mixin basis-text($width,$color){
  font-size: 20px;
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
.contanier1{
  @include basis-text(2px,blue);
}
</style>

将以上代碼轉換為 CSS 代碼，如下所示：

.contanier1{
  font-size: 20px;
  border-color: blue;
  border-width: 2px;
  border-style:dashed;
}

可變參數

有時，不能确定一個混入（mixin）或者一個函數（function）使用多少個參數，這時就可使用 ... 來設定可變參數。

如：建立盒子陰影（box-shadow）的一個混入（mixin）可采取任何數量的 box-shadow 作為參數。

@mixin box-shadow($shadows...) {
   -moz-box-shadow: $shadows;
   -webkit-box-shadow: $shadows;
   box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

浏覽器字首使用混入

<style lang="scss">
@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.contanier1{
  @include transform(rotate(20deg));
}
</style>

以上代碼轉換為 CSS 代碼，如下所示：

.contanier1 {
  -webkit-transform: rotate(20deg);
  -ms-transform: rotate(20deg);
  transform: rotate(20deg);
}

3. 導入檔案（ @import ）

類似 CSS，Scss 支援 @import 指令。@import 指令可以讓我們導入其他檔案等内容。

CSS @import 指令在每次調用時，都會建立一個額外的 HTTP 請求。但 Sass @import 指令将檔案包含在 CSS 中，不需要額外的 HTTP 請求。

Scss @import 指令文法如下：

@import filename;

注意：包含檔案時不需要指定檔案字尾，Scss 會自動添加字尾 .scss。此外，也可以導入 CSS 檔案。

導入後就可在主檔案中使用導入檔案等變量。

以下執行個體，導入 variables.scss、colors.scss 和 reset.scss 檔案。

@import "variables";
@import "colors";
@import "reset";

建立一個 reset.scss 檔案：

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

然後在 standard.scss 檔案中使用 @import 指令導入 reset.scss 檔案：

@import "reset";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

以上代碼轉換為 CSS 代碼，如下所示：

html, body, ul, ol {
  margin: 0;
  padding: 0;
}
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

Scss Partials

如果不希望将一個 Scss 的代碼檔案編譯到一個 CSS 檔案，可在檔案名的開頭添加一個下劃線。

這将告訴 Scss 不要将其編譯到 CSS 檔案。但是，在導入語句中不需要添加下劃線。

Scss Partials 文法格式：

_filename;

以下建立一個 _colors.scss 的檔案，但是不會編譯成 _colors.css 檔案：

$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;

如果要導入該檔案，則不需要使用下劃線：

@import "colors";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: $myBlue;
}

注意：不要将帶下劃線與不帶下劃線的同名檔案放置在同一個目錄下。如：_colors.scss 和 colors.scss 不能同時存在于同一個目錄下，否則帶下劃線的檔案将會被忽略。

4. 控制指令

4.1 條件語句（ @if ）

當 @if 的表達式傳回值不是 false 或者 null 時，條件成立，輸出 {} 内的代碼：

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  @if null  { border: 3px double; }
}

編譯為

p {
  border: 1px solid;
}

@if 聲明後面可以跟多個 @else if 聲明，或者一個 @else 聲明。

如果 @if 聲明失敗，Sass 将逐條執行 @else if 聲明，如果全部失敗，最後執行 @else 聲明。例如：

@mixin txt($weight) {
  color: white;
  @if $weight == bold {
    font-weight: bold;
  }
  @else if $weight == light {
    font-weight: 100;
  }
  @else {
    font-weight: normal;
  }
}

.txt1 {
  @include txt(bold);
}

編譯為

.txt1 {
  color: white;
  font-weight: bold;
}

4.2 循環語句

@for

@for 指令可在限制的範圍内重複輸出格式，每次按要求（變量的值）對輸出結果做出變動。
包含兩種格式：@for $var from <start> through <end>，或 @for $var from <start> to <end>；
差別： through 與 to 的含義：當使用 through 時，條件範圍包含 <start> 與 <end> 的值，
而使用 to 時條件範圍隻包含 <start> 的值不包含 <end> 的值。
另外，$var 可以是任何變量，如 $i；<start> 和 <end> 必須是整數值。

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

編譯為

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

@while

@while 指令重複輸出格式直到表達式傳回結果為 false。這樣可以實作比 @for 更複雜的循環，隻是很少會用到。

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

.item-6 {
  width: 12em;
}
.item-4 {
  width: 8em;
}
.item-2 {
  width: 4em;
}

@each 指令的格式是 $var in <list>, $var 可以是任何變量名。如 $length 或 $name，而 <list> 是一連串的值，也就是值清單。
@each 将變量 $var 作用于值清單中的每一個項目，然後輸出結果。

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

.puma-icon {
  background-image: url('/images/puma.png');
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
}
.egret-icon {
  background-image: url('/images/egret.png');
}
.salamander-icon {
  background-image: url('/images/salamander.png');
}

Scss 基本使用（ @extend、 @mixin、@import、@if、@for、@while、@each ）

1. 繼承（ @extend ）

占位符 % placeholder

2. 混入（ @mixin ）

向混入傳遞變量

3. 導入檔案（ @import ）

Scss Partials

4. 控制指令

4.1 條件語句（ @if ）

4.2 循環語句

繼續閱讀

趕工心得（一）

兩種清除浮動的方法

沒救了! 困擾程式員一輩子的5個魔咒, 改掉比登天還難！

如何成為一名.net 工程師?

[轉]如何成長為一名全棧工程師全棧工程師

tabpanel 使用問題

underscore模闆功能的使用和學習

CSS之折疊菜單

web開發之前後端渲染

DOM下元素 offset client scroll 相關屬性簡介

IE8 CSS設定DIV居中，添加“margin:0 auto”

JavaScript的那些坑之事件代理事件代理事件階段

ACS基本配置-權限等級管理

vue （vue2.0）使用總結(從大體結構總結)

父子元件間傳值的實作父子元件間傳值的實作

vue搭建過程及出現問題

Scss 基本使用 （ @extend、 @mixin、@import、@if、@for、@while、@each ）

1. 繼承（ @extend ）

占位符 % placeholder

2. 混入（ @mixin ）

向混入傳遞變量

3. 導入檔案（ @import ）

Scss Partials

4. 控制指令

4.1 條件語句（ @if ）

4.2 循環語句

繼續閱讀

Scss 基本使用（ @extend、 @mixin、@import、@if、@for、@while、@each ）