- 繼承（ @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>
將以上代碼轉換為 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 調用的占位符，編譯出來的代碼會將相同的代碼合并在一起。這也是我們希望看到的效果，也讓你的代碼變得更為干凈。
- 混入（ @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);
}
- 導入文件（ @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.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> to <end>；
區別： through 與 to 的含義：當使用 through 時，條件范圍包含 <start> 與 <end> 的值，
而使用 to 時條件范圍只包含 <start> 的值不包含 <end> 的值。
另外，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
@each 指令的格式是 var 可以是任何變量名。如
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');
}
轉載自：https://blog.csdn.net/ZYS10000/article/details/122793748?spm=1001.2014.3001.5502
