免費(fèi)AI編程助手
Sass 數(shù)據(jù)類型
數(shù)據(jù)類型
數(shù)據(jù)類型是一種需要為每個(gè)數(shù)據(jù)對(duì)象聲明數(shù)據(jù)類型的信息類型。 下表顯示了SassScript支持的各種數(shù)據(jù)類型:
| 序號(hào) | 數(shù)據(jù)類型和描述 | 例子 |
|---|---|---|
| 1 | Numbers 它表示整數(shù)類型。 | 2，10.5 |
| 2 | Strings 它是在單引號(hào)或雙引號(hào)內(nèi)定義的字符序列。 | 'Tutorialspoint', "Tutorialspoint" |
| 3 | Colors 它用于定義顏色值。 | red, #008000, rgb(25,255,204) |
| 4 | Booleans 它返回true或false布爾類型。 | 10 > 9 specifies true |
| 5 | Nulls 它指定空值，這是未知數(shù)據(jù)。 | if(val==null) {//statements} |
| 6 | Space and Comma 表示由空格或逗號(hào)分隔的值。 | 1px solid #eeeeee，0 0 0 1px |
| 7 | Mapping 它從一個(gè)值映射到另一個(gè)值。 | FirsyKey:frstvalue，SecondKey:secvalue |
字符串
字符串是用單引號(hào)或雙引號(hào)表示的一系列字符。使用單引號(hào)或雙引號(hào)定義的字符串將通過(guò)使用＃{} 插值（它是一種在選擇器中使用變量的方式）顯示為無(wú)引號(hào)字符串值。
例子
下面的例子演示了在SCSS文件中使用字符串:
<html> <head> <title>Strings</title> <link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <script src="/attachments/tuploads/sass/jquery.min.js"></script> <script src="/attachments/tuploads/sass/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Example using Strings</h2> <p class="tutorialspoint">Sass is an extension of CSS that adds power and elegance to the basic language.</p> </div> </body> </html>
接下來(lái)，創(chuàng)建文件 style.scss 。
style.scss
$name: "tutorialspoint";
p.#{$name} {
color: blue;
}
您可以通過(guò)使用以下命令讓SASS查看文件并在SASS文件更改時(shí)更新CSS:
sass --watch C:\ruby\lib\sass\style.scss:style.css
接下來(lái)執(zhí)行上面的命令，它將用下面的代碼自動(dòng)創(chuàng)建 style.css 文件:
style.css
p.tutorialspoint {
color: blue;
}
輸出
讓我們執(zhí)行以下步驟，看看上面的代碼如何工作:
將以上html代碼保存在 strings.html 文件中。
在瀏覽器中打開此HTML文件，將顯示如下輸出。
列表
列表指定使用空格或逗號(hào)分隔的多個(gè)值，甚至單個(gè)值都被視為列表。
Sass使用一些列表函數(shù)，如:
第n個(gè)函數(shù):它提供了列表的特定項(xiàng)。
連接函數(shù):它將多個(gè)列表連接成一個(gè)。
append函數(shù):它將項(xiàng)目附加到列表的另一端。
@each指令:它為列表中的每個(gè)項(xiàng)目提供樣式。
例如，考慮有兩種類型的列表; 第一個(gè)列表包含以逗號(hào)分隔的以下值。
10px 11px, 15px 16px
如果內(nèi)部列表和外部列表具有相同的分隔符，則可以使用括號(hào)指定兩個(gè)列表將在哪里開始和停止。 您可以指定這些列表，如下所示:
{10px 11px} {15px 16px}
地圖
地圖是鍵和值的組合，其中鍵用于表示值。 映射將值定義為組，并可以動(dòng)態(tài)訪問(wèn)。 您可以將地圖表達(dá)式寫為:
$map: (FirsyKey: frstvalue, SecondKey: secvalue, Thirdkey: thdvalue);
它使用一些功能，如:
map-get :它提供地圖的值。
map-merge :向地圖中添加值。
@each指令:它指定地圖中鍵/值對(duì)的樣式。
地圖將空鍵/值對(duì)表示為()，沒(méi)有元素，并使用 inspect($ value)函數(shù)顯示地圖的輸出。
顏色
它用于定義SassScript顏色值。 例如，如果您使用的顏色代碼為＃ffa500 ，那么它將在壓縮模式下顯示為橙色顏色。 Sass提供與在其他輸出模式中鍵入的輸出格式相同的輸出格式，當(dāng)顏色插入到選擇器中時(shí)，這些輸出格式變?yōu)闊o(wú)效語(yǔ)法。 要克服這個(gè)問(wèn)題，請(qǐng)使用引號(hào)內(nèi)的顏色名稱。
更多建議：