Sass插值、注釋、數(shù)劇類型、字符串、值類型_html/css

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 16:14:27

Sass插值、注釋、數(shù)劇類型、字符串、值類型_html/css

Sass插值、注釋、數(shù)劇類型、字符串、值類型_html/css_WEB-ITnose:插值#{}使用 CSS 預(yù)處理器語言的一個主要原因是想使用 Sass 獲得一個更好的結(jié)構(gòu)體系。比如說你想寫更干凈的、高效的和面向?qū)ο蟮?CSS。Sass 中的插值(Interpolation)就是重要的一部分。例子： 1 $properties: (margin, padding);2

推薦度：

點擊下載本文 文檔為doc格式

導(dǎo)讀Sass插值、注釋、數(shù)劇類型、字符串、值類型_html/css_WEB-ITnose:插值#{}使用 CSS 預(yù)處理器語言的一個主要原因是想使用 Sass 獲得一個更好的結(jié)構(gòu)體系。比如說你想寫更干凈的、高效的和面向?qū)ο蟮?CSS。Sass 中的插值(Interpolation)就是重要的一部分。例子： 1 $properties: (margin, padding);2

插值#{}
使用 CSS 預(yù)處理器語言的一個主要原因是想使用 Sass 獲得一個更好的結(jié)構(gòu)體系。比如說你想寫更干凈的、高效的和面向?qū)ο蟮?CSS。Sass 中的插值(Interpolation)就是重要的一部分。例子：

1 $properties: (margin, padding);2 @mixin set-value($side, $value) {3 @each $prop in $properties {4 #{$prop}-#{$side}: $value;5 }6 }7 .login-box {8 @include set-value(top, 14px);9 }

它可以讓變量和屬性工作的很完美，上面的代碼編譯成 CSS：

1 .login-box {2 margin-top: 14px;3 padding-top: 14px;4 }

當(dāng)你想設(shè)置屬性值的時候你可以使用字符串插入進(jìn)來。另一個有用的用法是構(gòu)建一個選擇器?？梢赃@樣使用：

1 @mixin generate-sizes($class, $small, $medium, $big) {2 .#{$class}-small { font-size: $small; }3 .#{$class}-medium { font-size: $medium; }4 .#{$class}-big { font-size: $big; }5 }6 @include generate-sizes("header-text", 12px, 20px, 40px);

編譯出來的 CSS:

1 .header-text-small { font-size: 12px; }2 .header-text-medium { font-size: 20px; }3 .header-text-big { font-size: 40px; }

#{}語法并不是隨處可用，不能在 mixin 中調(diào)用
可以使用 @extend 中使用插值。

 1 %updated-status { 2 margin-top: 20px; 3 background: #F00; 4 } 5 .selected-status { 6 font-weight: bold; 7 } 8 $flag: "status"; 9 .navigation {10 @extend %updated-#{$flag};11 @extend .selected-#{$flag};12 }

上面的 Sass 代碼是可以運行的，可以動態(tài)的插入 .class 和 %placeholder。他們不能接受像 mixin 這樣的參數(shù)，上面的代碼編譯出來的 CSS:

1 .navigation {2 margin-top: 20px;3 background: #F00;4 }5 .selected-status, .navigation {6 font-weight: bold;7 }

注釋
在 Sass 中注釋有兩種方式：
1、類似 CSS 的注釋方式，使用 ”/* ”開頭，結(jié)屬使用 ”*/ ”
2、類似 JavaScript 的注釋方式，使用“//”
兩者區(qū)別，前者會在編譯出來的 CSS 顯示，后者在編譯出來的 CSS 中不會顯示

數(shù)據(jù)類型

SassScript 支持六種主要的數(shù)據(jù)類型：

數(shù)字（例如 1.2、13、10px）

文本字符串，無論是否有引號（例如 "foo"、'bar'、baz）

顏色（例如 blue、#04a3f9、rgba(255, 0, 0, 0.5)）

布爾值（例如 true、false）

空值（例如 null）

值列表，用空格或逗號分隔（例如 1.5em 1em 0 2em、Helvetica, Arial, sans-serif）

SassScript 還支持所有其他 CSS 屬性值類型，例如 Unicode 范圍和 !important 聲明。然而，它不會對這些類型做特殊處理。它們只會被當(dāng)做不帶引號的字符串看待。

字符串

CSS 提供了兩種類型的字符串：

帶引號的字符串，例如 "Lucida Grande" 或 'http://sass-lang.com'；不帶引號的字符串，例如 sans-serif 或 bold。

在編譯 CSS 文件時不會改變其類型。只有一種情況例外，使用 #{ }插值語句 (interpolation) 時，有引號字符串將被編譯為無引號字符串，這樣方便了在混合指令 (mixin) 中引用選擇器名。

1 @mixin firefox-message($selector) {2 body.firefox #{$selector}:before {3 content: "Hi, Firefox users!";4 }5 }6 @include firefox-message(".header");

編譯為：

1 body.firefox .header:before {2 content: "Hi, Firefox users!"; 3 }

值列表
所謂值列表 (lists) 是指 Sass 如何處理 CSS 中： margin: 10px 15px 0 0 或者：font-face: Helvetica, Arial, sans-serif
像上面這樣通過空格或者逗號分隔的一系列的值。

事實上，獨立的值也被視為值列表——只包含一個值的值列表。

Sass列表函數(shù)（Sass list functions）賦予了值列表更多功能：

nth函數(shù)（nth function）可以直接訪問值列表中的某一項；
join函數(shù)（join function）可以將多個值列表連結(jié)在一起；
append函數(shù)（append function）可以在值列表中添加值；
@each規(guī)則（@each rule）則能夠給值列表中的每個項目添加樣式。

值列表中可以再包含值列表，比如 1px 2px, 5px 6px 是包含 1px 2px 與 5px 6px 兩個值列表的值列表。如果內(nèi)外兩層值列表使用相同的分隔方式，要用圓括號包裹內(nèi)層，所以也可以寫成 (1px 2px) (5px 6px)。當(dāng)值列表被編譯為 CSS 時，Sass 不會添加任何圓括號，因為 CSS 不允許這樣做。(1px 2px) (5px 6px)與 1px 2px 5px 6px 在編譯后的 CSS 文件中是一樣的，但是它們在 Sass 文件中卻有不同的意義，前者是包含兩個值列表的值列表，而后者是包含四個值的值列表。
可以用 () 表示空的列表，這樣不可以直接編譯成 CSS，比如編譯 font-family: ()時，Sass 將會報錯。如果值列表中包含空的值列表或空值，編譯時將清除空值，比如 1px 2px () 3px 或 1px 2px null 3px。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com