編程教程Sass 定義Mixin
描述 @mixin 指令用于定義mixin，它可選地包括mixin名稱后面的變量和參數(shù)。例子以下示例演示如何在SCSS文件中使用 @mixin :sample.html<html><head> <title> Mixin example of sass……
Sass 包含Mixin
描述 @include 指令用于在文檔中包含mixin。將使用mixin的名稱，并將可選參數(shù)傳遞給它。由mixin定義的樣式可以包含在當(dāng)前規(guī)則中。例子下面的例子演示了如何在SCSS文件中使用mixin:sample.html<html><head> <title&a……
Sass Mixin參數(shù)
描述SassScript值可以作為mixin中的參數(shù)，當(dāng)mixin包含在mixin中時(shí)可以作為變量傳遞。參數(shù)是一個(gè)變量的名稱，在定義mixin時(shí)用逗號(hào)分隔。有兩種類型的參數(shù)，如:關(guān)鍵字參數(shù)可變參數(shù)關(guān)鍵字參數(shù)顯式關(guān)鍵字參數(shù)可以用于包含在mixin中。命名的參數(shù)可以按任何順序傳遞，參數(shù)的默認(rèn)值可以省略。例如，使用以下代碼創(chuàng)建一個(gè)SASS文……
Sass 將內(nèi)容塊傳遞給Mixin
描述塊樣式被傳遞到mixin以用于樣式中的放置。在 @content 指令位置中，樣式包含在mixin中。變量范圍和內(nèi)容塊在傳遞給定義了塊的mixin的作用域中評(píng)估內(nèi)容塊。例子下面的示例演示了如何在SCSS文件中使用傳遞內(nèi)容塊來混合:pass_content.html<html><head&a……
Sass 混入指令
Mixins允許創(chuàng)建一組可以在整個(gè)樣式表中重復(fù)使用的樣式，而不需要重新創(chuàng)建非語義類。在CSS中，mixin可以存儲(chǔ)多個(gè)值或參數(shù)和調(diào)用函數(shù); 它有助于避免編寫重復(fù)的代碼。混合名稱可以交替使用下劃線和連字符。以下是Mixins中的指令。序號(hào)指令和描述1 定義mixin @mixin 指令用于定義mixin。2 包含Mixin @inclu……
Sass 功能指令
在本章中，我們來研究函數(shù)指令。在SASS中，您可以創(chuàng)建自己的函數(shù)，并在腳本上下文中使用它們，或者可以與任何值一起使用。通過使用函數(shù)名和任何參數(shù)來調(diào)用函數(shù)。例子下面的例子演示了在SCSS文件中使用function指令:function_directive.html<html><head&……
Sass if()函數(shù)
描述基于條件，此內(nèi)置的 if（）函數(shù)僅返回兩個(gè)可能結(jié)果中的一個(gè)結(jié)果。函數(shù)的結(jié)果可以參考可能未被定義的變量或具有進(jìn)一步的計(jì)算。句法if( expression, value1, value2 )例子以下示例演示如何在SCSS文件中使用 if() 函數(shù):if_function.html<html><……
Sass 交互式shell
描述您可以使用交互式shell輕松工作與SassScript。 您可以使用sass命令行和-i選項(xiàng)運(yùn)行shell。句法$ sass -i使用上面的命令讓我們寫一些表達(dá)式，如下所示:如上圖所示，我們使用顏色代碼，通過添加它們產(chǎn)生另一種顏色代碼，并添加三個(gè)數(shù)字以顯示給定數(shù)字的總值。
Sass CSS擴(kuò)展
在本章中，我們將學(xué)習(xí) CSS擴(kuò)展。CSS擴(kuò)展可以用于增強(qiáng)網(wǎng)頁的功能。下表列出了SASS中使用的一些CSS擴(kuò)展:序號(hào)CSS擴(kuò)展和描述1 嵌套規(guī)則 它是一種將多個(gè)CSS規(guī)則彼此組合的方式。2 引用父選擇器:＆這是使用＆amp; 字符選擇父選擇器的過程。3 嵌套屬性 它允許將屬性嵌套到另一個(gè)屬性，這導(dǎo)致另一個(gè)相關(guān)代碼的組。4 占位符選擇器 ……
Sass 占位符選擇器
描述SASS使用 class 或 id 選擇器支持占位符選擇器。 在正常CSS中，這些用“＃”或“。”指定，但在SASS中，它們替換為“％”。 要使用占位符選擇器，可以使用 @extend 指令。 如果不使用 @extend 指令，則無法在CSS中顯示結(jié)果。例子下面的示例演示了在SCSS文件中使用占位符選擇器:<html……