在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 教程/ HTML/ Sass @extend指令
Sass @debug指令
Sass @each指令實(shí)例
Sass @import指令
Sass SassScript &符號(hào)
Sass操作符
Sass多行注釋插值法
Sass if()函數(shù)
Sass @規(guī)則和指令
Sass through關(guān)鍵字
傳遞內(nèi)容塊到Mixin
Sass @media指令
Sass @warn指令
Sass嵌套規(guī)則
Sass @error指令
Sass @if指令實(shí)例
Sass變量
擴(kuò)展Sass
Sass嵌套屬性
Sass @at-root指令
Sass @for指令
Sass @extend指令
Sass CSS擴(kuò)展
Sass語法
Sass @if指令
Sass占位符選擇器
Sass 定義Mixin
Sass括號(hào)混合
SASS教程
Sass布爾運(yùn)算符
Sass引用父選擇器
Sass @else if指令
Sass數(shù)據(jù)類型
Sass數(shù)字運(yùn)算符
Sass to關(guān)鍵字
Sass @each多重分配與映射
Sass顏色運(yùn)算符
Sass交互式shell
Sass控制指令&表達(dá)式
Sass的使用
Sass混入指令
Sass腳本
Sass插值
Sass安裝
Sass函數(shù)指令
Sass @each多重分配
Sass @each指令
Sass變量默認(rèn)值
Sass包含mixin
Sass注釋
Sass @while指令
Sass Mixin參數(shù)
Sass字符串運(yùn)算符
Sass函數(shù)
Sass輸出樣式

Sass @extend指令

@extend指令用于共享規(guī)則和選擇器之間的關(guān)系。它可以擴(kuò)展所有其他類的樣式在一個(gè)類中，也可應(yīng)用于自己特定的樣式。以下是擴(kuò)展的類型：
類型和說明
語法 編譯后代碼
擴(kuò)展復(fù)雜的選擇器：
它可以僅由一個(gè)單一的元素或類選擇器擴(kuò)展選擇器。 
		h2{
			font-size: 40px;
		}
		.container{
			@extend h2
		}
	
	h2, .container {
		font-size: 40px;
	}
多個(gè)擴(kuò)展:
一個(gè)以上的選擇器可以由單個(gè)選擇器進(jìn)行擴(kuò)展。 
		.style{
		font-size: 25px;
		font-style: italic;
		}

		h2{
		color: #61C8E1;
		}

		.container{
		@extend .style;
		@extend h2
		}
	
	.style, .container {
	  font-size: 25px;
	  font-style: italic;
	 }
	h2, .container {
  	  color: #61C8E1;
  	}
鏈?zhǔn)綌U(kuò)展：
由第二選擇器擴(kuò)展第一選擇器，和第二選擇器被第三選擇器擴(kuò)展，因此這被稱為鏈?zhǔn)綌U(kuò)展。 
		.style{
		font-size: 25px;
		font-style: italic;
		}

		h2{
		color: #61C8E1;
		@extend .style
		}

		.container{
		@extend h2
		}
	
	.style, h2, .container {
	font-size: 25px;
	font-style: italic;
	}
	h2, .container {
	color: #61C8E1;
	}
選擇器序列：
嵌套選擇器可以自己使用@extend。
合并選擇器序列：
它合并兩個(gè)序列，即一種序列擴(kuò)展另一個(gè)序列其存在于其它序列。 
		.style{
		font-size: 25px;
		font-style: italic;
		color: #61C8E1;
		}

		h2 .container {
		@extend .style
		}
	
		.container .style a {
		  font-weight: bold;
		}
		#id .example {
		  @extend a;
		}
	
	.style, h2 .container {
	  font-size: 25px;
	  font-style: italic;
  	  color: #61C8E1;
  	}
	
	.container .style a, .container .style #id
	.example, #id .container .style .example {
  	  font-weight: bold;
  	}
@extend - 只有選擇器
它百分號(hào)(%)可以在任何地方使用ID或類，它可以防止自己的規(guī)則設(shè)置被渲染為CSS。 
		.style a%extreme {
		  font-size: 25px;
		  font-style: italic;
		  color: #61C8E1;
		}

		.container {
		  @extend %extreme;
		}
	
	.style a.container {
	  font-size: 25px;
	  font-style: italic;
  	  color: #61C8E1;
  	  }
!optional 標(biāo)志
!optional標(biāo)志用來允許@extend不創(chuàng)造任何新的選擇器。 
		h2.important {
		  @extend .style !optional;
		}
	
	A blank compile page gets display.
@extend在指令中
如果@extend使用了@media內(nèi)部，那么它可以只擴(kuò)展相同的指令塊內(nèi)存在的選擇器。 
		@media print {
		  .style {
			font-size: 25px;
			font-style: italic;
		  }
		  .container {
			@extend .style;
			color: #61C8E1;
		  }
		}
	
	@media print {
	  .style, .container {
	    font-size: 25px;
	    font-style: italic;
	}
	  .container {
    	color: #61C8E1;
    	}
    }

示例

下面的例子演示了在SCSS文件使用@extend：

extend.html 

<!doctype html>
<head><meta charset="UTF-8"> <title>擴(kuò)展示例 -www.yiibai.com</title>
	<link rel="stylesheet" href="extend.css" type="text/css" />
</head>
<body class="container">
    <h2>擴(kuò)展使用實(shí)例</h2>
    <p class="style">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>
接下來，創(chuàng)建文件extend.scss。

extend.scss 

.style{
	font-size: 30px;
	font-style: italic;
}

h2{
	color: #787878;
	@extend .style

}
.container{
	@extend h2
}
可以告訴SASS監(jiān)視文件，并隨時(shí)使用下面的命令更新SASS文件來修改CSS： 
sass --watch C:\Ruby22-x64\extend.scss:extend.css
接著執(zhí)行上面的命令，它會(huì)自動(dòng)創(chuàng)建extend.css文件，如下面的代碼：

extend.css 

.style, h2, .container {
	font-size: 30px;
	font-style: italic;
 }

h2, .container {
	color: #787878;
}

輸出結(jié)果

讓我們來執(zhí)行以下步驟，看看上面的代碼工作：
  • 保存上述的HTML代碼到 extend.html 文件。
  • 在瀏覽器中打開該HTML文件，得到輸出如下顯示。