-
unquote($string):刪除字符串中的引號; quote($string):給字符串添加引號。 unquote( ) 函數只能刪除字符串最前和最后的引號(雙引號或單引號),而無法刪除字符串中間的引號。如果字符沒有帶引號,返回的將是字符串本身。查看全部
-
@each $var in <list> $var 就是一個變量名,<list> 是一個 SassScript 表達式,他將返回一個列表值。變量 $var 會在列表中做遍歷,并且遍歷出與 $var 對應的樣式塊。查看全部
-
運算符的兩側要用空格查看全部
-
@for $i from <start> through <end> @for $i from <start> to <end> $i 表示變量 start 表示起始值 end 表示結束值 這兩個的區別是關鍵字 through 表示包括 end 這個數,而 to 則不包括 end 這個數。查看全部
-
字符串函數-To-upper-case()、To-lower-case() 1、To-upper-case() To-upper-case() 函數將字符串小寫字母轉換成大寫字母。如: //SCSS .test { text: to-upper-case(aaaaa); text: to-upper-case(aA-aAAA-aaa); } 編譯出來的 css 代碼: //CSS .test { text: AAAAA; text: AA-AAAA-AAA; } 2、To-lower-case() To-lower-case() 函數 與 To-upper-case() 剛好相反,將字符串轉換成小寫字母: //SCSS .test { text: to-lower-case(AAAAA); text: to-lower-case(aA-aAAA-aaa); } 編譯出來的 css 代碼: //CSS .test { text: aaaaa; text: aa-aaaa-aaa; }查看全部
-
字符串函數-quote()函數 quote() 函數剛好與 unquote() 函數功能相反,主要用來給字符串添加引號。如果字符串,自身帶有引號會統一換成雙引號 ""。 如: //SCSS .test1 { content: quote('Hello Sass!'); } .test2 { content: quote("Hello Sass!"); } .test3 { content: quote(ImWebDesigner); } .test4 { content: quote(' '); } 編譯出來的 css 代碼: //CSS .test1 { content: "Hello Sass!"; } .test2 { content: "Hello Sass!"; } .test3 { content: "ImWebDesigner"; } .test4 { content: ""; } 使用 quote() 函數只能給字符串增加雙引號,而且字符串中間有單引號或者空格時,需要用單引號或雙引號括起,否則編譯的時候將會報錯。 .test1 { content: quote(Hello Sass); } 這樣使用,編譯器馬上會報錯: error style.scss (Line 13: $string: ("Hello""Sass") is not a string for `quote') 解決方案就是去掉空格,或者加上引號: .test1 { content: quote(HelloSass); } .test1 { content: quote("Hello Sass"); } 同時 quote() 碰到特殊符號,比如: !、?、> 等,除中折號 - 和 下劃線_ 都需要使用雙引號括起,否則編譯器在進行編譯的時候同樣會報錯。查看全部
-
字符串函數-unquote()函數 字符串函數顧名思意是用來處理字符串的函數。Sass 的字符串函數主要包括兩個函數: unquote($string):刪除字符串中的引號; quote($string):給字符串添加引號。 1、unquote()函數 unquote() 函數主要是用來刪除一個字符串中的引號,如果這個字符串沒有帶有引號,將返回原始的字符串。 //SCSS .test1 { content: unquote('Hello Sass!') ; } .test2 { content: unquote("'Hello Sass!"); } .test3 { content: unquote("I'm Web Designer"); } .test4 { content: unquote("'Hello Sass!'"); } .test5 { content: unquote('"Hello Sass!"'); } .test6 { content: unquote(Hello Sass); } 編譯后的 css 代碼: //CSS .test1 { content: Hello Sass!; } .test2 { content: 'Hello Sass!; } .test3 { content: I'm Web Designer; } .test4 { content: 'Hello Sass!'; } .test5 { content: "Hello Sass!"; } .test6 { content: Hello Sass; } 注意:從測試的效果中可以看出,unquote( ) 函數只能刪除字符串最前和最后的引號(雙引號或單引號),而無法刪除字符串中間的引號。如果字符沒有帶引號,返回的將是字符串本身。查看全部
-
Sass的函數簡介 在 Sass 中除了可以定義變量,具有 @extend、%placeholder 和 mixins 等特性之外,還自備了一系列的函數功能。其主要包括: 字符串函數 數字函數 列表函數 顏色函數 Introspection 函數 三元函數等 當然除了自備的函數功能之外,我們還可以根據自己的需求定義函數功能,常常稱之為自定義函數。查看全部
-
@each循環就是去遍歷一個列表,然后從列表中取出對應的值。 @each循環指令形式: @each $var in <list> $var就是一個變量名,<list>是一個SassScript表達式,他將返回一個列表值。變量$var會在列表中做出遍歷,并且遍歷出與$var對應的樣式塊。 這有一個 @each 指令的簡單示例: $list: adam john wynn mason kuroir;//$list 就是一個列表 @mixin author-images { @each $author in $list { .photo-#{$author} { background: url("/images/avatars/#{$author}.png") no-repeat; } } } .author-bio { @include author-images; } 編譯出CSS: .author-bio .photo-adam { background: url("/images/avatars/adam.png") no-repeat; } .author-bio .photo-john { background: url("/images/avatars/john.png") no-repeat; } .author-bio .photo-wynn { background: url("/images/avatars/wynn.png") no-repeat; } .author-bio .photo-mason { background: url("/images/avatars/mason.png") no-repeat; } .author-bio .photo-kuroir { background: url("/images/avatars/kuroir.png") no-repeat; }查看全部
-
@while循環 @while指令也需要SassScript表達式(像其他指令一樣),并且會生成不同的樣式塊,直到表達式值為false時停止循環。這個和@for指令很相似,只要@while后面的條件為true就會執行。 @while指令簡單用例: //SCSS $types: 4; $type-width: 20px; @while $types > 0 { .while-#{$types}{ width: $type-width + $types; } $types: $types - 1; } 編譯出來的 CSS .while-4 { width: 24px; } .while-3 { width: 23px; } .while-2 { width: 22px; } .while-1 { width: 21px; }查看全部
-
@for循環(下) @for應用在網格系統生成各個格子 class 的代碼: //SCSS $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; } @for $i from 1 through 12 { .#{$grid-prefix}#{$i}{ width: $grid-width * $i + $grid-gutter * ($i - 1); @extend %grid; } } 編譯出來的 CSS: .span1, .span2, .span3, .span4, .span5, .span6, .span7, .span8, .span9, .span10, .span11, .span12 { float: left; margin-left: 10px; margin-right: 10px; } .span1 { width: 60px; } .span2 { width: 140px; } .span3 { width: 220px; } .span4 { width: 300px; } .span5 { width: 380px; } .span6 { width: 460px; } .span7 { width: 540px; } .span8 { width: 620px; } .span9 { width: 700px; } .span10 { width: 780px; } .span11 { width: 860px; } .span12 { width: 940px; }查看全部
-
@for循環(上) 在 Sass 的 @for 循環中有兩種方式: @for $i from <start> through <end> @for $i from <start> through <end> $i 表示變量 start 表示起始值 end 表示結束值 這兩個的區別是關鍵字through表示包括end這個數,而to則不包括end這個數。 如下代碼,使用through關鍵字的例子: @for $i from 1 through 3{ .item-#{$i} {width: 2em * $i;} } 編譯出來的 CSS: .item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; } to關鍵字的例子: @for $i from 1 to 3{ .itme-#{$i} { width: 2 * $i;} } 編譯出來的 CSS: .item-1 { width: 2em; } .item-2 { width: 4em; }查看全部
-
@if @if指令是一個SassScript,它可以根據條件來處理樣式塊,如果條件為true返回一個樣式塊,反之false返回另一個樣式塊。在Sass中除了@if,還可以配合@else if和@else 一起使用。 $lte7: true; $type: monster; .ib{ display:inline-block; @if $lte7 { *display:inline; *zoom:1; } } p { @if $type == ocean { color: blue; } @else if $type == matador { color: red; } @else if $type == monster { color: green; } @else { color: black; } } //css style //------------------------------- .ib{ display:inline-block; *display:inline; *zoom:1; } p { color: green; } 假設要控制一個元素隱藏或顯示,我們就可以定義一個混合宏,通過 @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; }查看全部
-
@if @for @while的條件都沒有括號查看全部
-
length() 函數中的列表參數之間使用空格隔開,不能使用逗號,否則函數將會出錯查看全部
舉報
0/150
提交
取消