編程教程Sass 腳本
SASS使用一組稱為SassScript的小型擴展，可以包含在SASS文檔中，以從屬性值計算變量，并使用變量，算術和其他函數的屬性。SassScript還可以使用選擇器和屬性名稱，同時使用mixins（Mixins允許在整個樣式表中重用CSS樣式）。下表列出了SASS中使用的一些CSS擴展:序號CSS擴展和描述1 交互式Shell它使……
Sass 函數
描述SASS通過提供一些使用正常CSS函數語法指定的關鍵字參數來支持函數的使用。語法p { color: hsl($hue: 0, $saturation: 50%, $lightness: 50%);}HSL代表色相，飽和度和亮度，它們通過使用飽和度和亮度創建一組匹配的顏色更直觀。色調: 它表示顏色的程度，例如120的紅色，240的……
Sass @if指令
描述 @if指令用于根據計算表達式的結果選擇性地執行代碼語句。@if語句后面可以跟隨幾個@else if語句。讓我們從下表研究他們。序號類型和描述1 @if 它接受SassScript表達式，并且只要表達式的結果為false或null以外的任何結果，就使用嵌套樣式。2 @else if 與 @if 指令配合使用，每當 @if &……
Sass @while指令
描述與其他控制指令一樣， @while 指令也采用SassScript表達式，直到語句計算結果為false，它迭代地輸出嵌套樣式。 要注意的關鍵是，計數器變量需要在每次迭代時遞增/遞減。句法while(condition) { // CSS codes}例子下面的示例演示了如何使用 @while 指令:<html&……
Sass 控制指令和表達式
在本章中，我們來研究控制指令和表達式。基于某些條件的樣式或多次應用相同樣式的變體可以通過使用SassScript支持的控制指令和表達式來實現。這些控制指令是主要在mixin中使用的高級選項。它們需要相當大的靈活性，因為它們是Compass庫的一部分。下表列出了SASS中使用的控制指令和表達式:序號控制指令和表達式描述1 if() 基于……
Sass 錯誤指令
描述@error指令將SassScript表達式值顯示為致命錯誤。例子下面是使用擴展名 .scss 保存的樣式表文件，它類似于css文件。warn.scss$colors: ( blue: #c0392b, black: #2980b9,);@function style-variation($style) { @if map-has……
Sass 警告指令
描述@warn指令用于給出有關問題的警告建議。它將SassScript表達式值顯示到標準錯誤輸出流。例子下面是使用擴展名 .scss 保存的樣式表文件，它類似于css文件。warn.scss$main-color: #bdc3c7;@warn "Darker: " darken($main-colo……
Sass 導入指令
描述導入指令，導入SASS或SCSS文件。 它直接需要導入文件名。 在SASS中導入的所有文件將在單個CSS文件中組合。當我們使用 @import 規則時，很少有事情編譯到CSS:文件擴展名<.css>文件名以 http:// 開頭文件名為 url() @import 包含任何媒體查詢。例如，使用以下代碼創……
Sass 媒體指令
描述 @media 指令設置樣式規則到不同的媒體類型。@media 指令可以嵌套在選擇器SASS中，但它會冒泡到樣式表的頂層。例子以下示例演示如何在SCSS文件中使用 @media :media.html<!doctype html><head><title&……
Sass 擴展指令
描述 @extend 指令用于共享選擇器之間的規則和關系。 它可以在一個類中擴展所有其他類樣式，也可以應用自己的特定樣式。 以下是擴展的類型:類型和描述語句編譯代碼擴展復雜選擇器 它可以擴展只包含單個元素或類選擇器的選擇器。h2 {font-size:40px;}.container {@extend h2}}h2,.containe……