-
Sass 的 map 常常被稱為數據地圖，也有人稱其為數組，因為他總是以 key:value 成對的出現，但其更像是一個 JSON 數據。首先有一個類似于 Sass 的變量一樣，用個 $ 加上命名空間來聲明 map。后面緊接是一個小括號 ()，將數據以 key:value 的形式賦予，其中 key 和 value 是成對出現，并且每對之間使用逗號 (,) 分隔，其中最后一組后面沒有逗號。查看全部
-
join() 只能將兩個列表連接成一個列表。如果你無法記得，什么時候會是用逗號分隔合并的列表項，什么時候是使用空格分隔合并 的列表項，在些建議大家使用 join() 函數合并列表項的時候就明確指定 $separator 參數，用來指定合并的列表中使用什么方式來分隔列表項。查看全部
-
quote() 函數剛好與 unquote() 函數功能相反，主要用來給字符串添加引號。如果字符串，自身帶有引號會統一換成雙引號 ""。使用 quote() 函數只能給字符串增加雙引號，而且字符串中間有單引號或者空格時，需要用單引號或雙引號括起。同時 quote() 碰到特殊符號，比如： !、?、> 等，除中折號 - 和 下劃線_ 都需要使用雙引號括起。查看全部
-
unquote( ) 函數只能刪除字符串最前和最后的引號（雙引號或單引號），而無法刪除字符串中間的引號。如果字符沒有帶引號，返回的將是字符串本身。查看全部
-
關鍵字 through 表示包括 end 這個數，而 to 則不包括 end 這個數。查看全部
-
//練習 $grid-prefix: span!default; $grid-width: 60px!default; $grid-gutter: 20px!default; %grid{ float:left; margin-left:$grid-gutter/2; margin-right:$grid-gutter/2; } //through @for $i from 1 through 12{ .#{$grid-prefix}#{$i}{ width:$grid-width*$i+$grid-gutter*($i - 1 ); @extend %grid; } } //to @for $i from 1 to 13{ .#{$grid-prefix}#{$i}{ width:$grid-width*$i+$grid-gutter*($i - 1); @extend %grid; } }查看全部
-
#{$i}是一個字符串，是變量i的值，而$i是一個變量查看全部
-
@for循環（上） 在制作網格系統的時候，大家應該對 .col1~.col12 這樣的印象較深。在 CSS 中你需要一個一個去書寫，但在 Sass 中，可以使用 @for 循環來完成。在 Sass 的 @for 循環中有兩種方式： @for $i from <start> through <end> @for $i from <start> to <end> $i 表示變量 start 表示起始值 end 表示結束值 這兩個的區別是關鍵字 through 表示包括 end 這個數，而 to 則不包括 end 這個數。查看全部
-
@if 指令是一個 SassScript，它可以根據條件來處理樣式塊，如果條件為 true 返回一個樣式塊，反之 false 返回另一個樣式塊。在 Sass 中除了 @if 之，還可以配合 @else if 和 @else 一起使用。 假設要控制一個元素隱藏或顯示，我們就可以定義一個混合宏，通過 @if...@else... 來判斷傳進參數的值來控制 display 的值。如下所示： //SCSS @mixin blockOrHidden($boolean:true) { @if $boolean { @debug "$boolean is #{$boolean}"; display: block; } @else { @debug "$boolean is #{$boolean}"; display: none; } } .block { @include blockOrHidden; } .hidden{ @include blockOrHidden(false); } 編譯出來的CSS: .block { display: block; } .hidden { display: none; }查看全部
-
點擊block, block顯示 或nine隱藏 //例如： //scss @mixin blockOrHidden($boolean:true){ @if $boolean{ @debug "$boolean is #{$boolean}"; dislap:block; } }查看全部
-
@error 和 @warn、@debug 功能是如出一轍。查看全部
-
類似于console.log()查看全部
-
當你選擇器嵌套多層之后，想讓某個選擇器跳出，此時就可以使用 @at-root。查看全部
-
.error { border: 1px #f00; background-color: #fdd; } .error.intrusion { background-image: url("/image/hacked.png"); } .seriousError { @extend .error; border-width: 3px; } 被編譯為： .error, .seriousError { border: 1px #f00; background-color: #fdd; } .error.intrusion, .seriousError.intrusion { background-image: url("/image/hacked.png"); } .seriousError { border-width: 3px; }查看全部
-
Sass 擴展了 CSS 的 @import 規則，讓它能夠引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都會被合并并輸出一個單一的 CSS 文件。 另外，被導入的文件中所定義的變量或 mixins 都可以在主文件中使用。 @import 根據文件名引入。 默認情況下，它會尋找 Sass 文件并直接引入， 但是，在少數幾種情況下，它會被編譯成 CSS 的 @import 規則： 如果文件的擴展名是 .css。 如果文件名以 http:// 開頭。 如果文件名是 url()。 如果 @import 包含了任何媒體查詢（media queries）。 也可以通過一個 @import 引入多個文件。例如： @import "rounded-corners", "text-shadow"; 如果你有一個 SCSS 或 Sass 文件需要引入， 但是你又不希望它被編譯為一個 CSS 文件， 這時，你就可以在文件名前面加一個下劃線，就能避免被編譯。 這將告訴 Sass 不要把它編譯成 CSS 文件。 注意，在同一個目錄不能同時存在帶下劃線和不帶下劃線的同名文件。 例如， _colors.scss 不能與 colors.scss 并存。查看全部
舉報
0/150
提交
取消