-
RGB顏色函數-RGBA()函數 2、rgba() 函數主要用來將一個顏色根據透明度轉換成 rgba 顏色。 語法有兩種格式: rgba($red,$green,$blue,$alpha) //將一個rgba顏色轉譯出來,和未轉譯的值一樣 rgba($color,$alpha) //將一個Hex顏色轉換成rgba顏色 rgba($color,$alpha) 函數主要運用在這樣的情形之中:假設在實際中知道的顏色值是 #f36 或者 red,但在使用中,需要給他們配上一個透明度,這個時候在原來的 CSS 中,首先需要通過制圖工具,得到 #f36 或 red 顏色的 R、G、B 值,而不能直接使用(注意 css3 是可以的,但是存在瀏覽器兼容問題): $color: #f36; $bgColor: orange; $borderColor:green; 同時給他們加上 .5 的透明度: //SCSS .rgba { color: rgba(#f36,.5); background: rgba(orange,.5); border-color: rgba(green,.5); } 語法:在括號是函數的參數,第一個參數是需要轉換的顏色,他可以是任何顏色的表達方式,也可以是一個顏色變量;第二個參數是顏色的透明度,其值是 0~1 之間。 .rgba { color: rgba(255, 51, 102, 0.5); background: rgba(255, 165, 0, 0.5); border-color: rgba(0, 128, 0, 0.5); } 在來看一個調用前面定義的變量: //SCSS .rgba { color: rgba($color,.5); background: rgba($bgColor,.5); border-color: rgba($borderColor,.5); }查看全部
-
RGB顏色函數-RGB()顏色函數 主要分為 RGB , HSL 和 Opacity 三大函數,當然其還包括一些其他的顏色函數,比如說 adjust-color 和 change-color 等。 1、RGB顏色函數 RGB 顏色只是顏色中的一種表達式,其中 R 是 red 表示紅色,G 是 green 表示綠色而 B 是 blue 表示藍色。在 Sass 中為 RGB 顏色提供六種函數: rgb($red,$green,$blue):根據紅、綠、藍三個值創建一個顏色; rgba($red,$green,$blue,$alpha):根據紅、綠、藍和透明度值創建一個顏色; red($color):從一個顏色中獲取其中紅色值; green($color):從一個顏色中獲取其中綠色值; blue($color):從一個顏色中獲取其中藍色值; mix($color-1,$color-2,[$weight]):把兩種顏色混合在一起。 sass -i 在命令終端開啟這個命令,相當于開啟 Sass 的函數計算。 $ sass -i >> rgb(200,40,88) //根據r:200,g:40,b:88計算出一個十六進制顏色值 #c82858 >> rgba(#c82858,.65) //根據#c82858的65%透明度計算出一個rgba顏色值 rgba(200, 40, 88, 0.65) >> red(#c82858) //從#c82858顏色值中得到紅色值 200 200 >> green(#c82858) //從#c82858顏色值中得到綠色值 40 40 >> blue(#c82858) //從#c82858顏色值中得到藍色值 88 88 >> mix(#c82858,rgba(200,40,80,.65),.3) //把#c82858和rgba(200,40,88,.65) 兩顏色按比例混合得到一個新顏色 rgba(200, 40, 80, 0.65105)查看全部
-
Sass Maps的函數-map-remove($map,$key)、keywords($args) map-remove($map,$key) map-remove($map,$key) 函數是用來刪除當前 $map 中的某一個 $key,從而得到一個新的 map。其返回的值還是一個 map。他并不能直接從一個 map 中刪除另一個 map,僅能通過刪除 map 中的某個 key 得到新 map。如: $map:map-remove($social-colors,dribble); 返回的是一個新 map: $map:( facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee ); 如果刪除的 key 并不存在于 $map 中,那么 map-remove() 函數返回的新 map 和以前的 map 一樣。 $map:map-remove($social-colors,weibo); 返回的值: $map: ( dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee ); keywords($args) keywords($args) keywords($args) 函數可以說是一個動態創建 map 的函數。可以通過混合宏或函數的參數變創建 map。參數也是成對出現,其中 $args 變成 key(會自動去掉$符號),而 $args 對應的值就是value。 @mixin map($args...){ @debug keywords($args); } @include map( $dribble: #ea4c89, $facebook: #3b5998, $github: #171515, $google: #db4437, $twitter: #55acee ); 在命令終端可以看到一個輸入的 @debug 信息:查看全部
-
Sass Maps的函數-map-values($map)、map-merge($map1,$map2) map-values($map) map-values($map) 函數類似于 map-keys($map) 功能,不同的是 map-values($map )獲取的是 $map 的所有 value 值,可以說也將是一個列表。而且,map-values($map) 中如果有相同的 value 也將會全部獲取出來。 $social-colors: ( dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee ); map-values($social-colors) 將會返回: #ea4c89,#3b5998,#171515,#db4437,#55acee 值與值之間同樣用逗號分隔。 map-merge($map1,$map2) map-merge($map1,$map2) 函數是將 $map1 和 $map2 合并,然后得到一個新的 $map。如果你要快速將新的值插入到 $map 中的話,這種方法是最佳方法。假設我們有兩個 $map: $color: ( text: #f36, link: #f63, border: #ddd, backround: #fff ); $typo:( font-size: 12px, line-height: 1.6 ); 如果希望將這兩個 $map 合并成一個 map,我們只要這樣做: $newmap: map-merge($color,$typo); 將會生成一個新的 map: $newmap:( text: #f36, link: #f63, border: #ddd, background: #fff, font-size: 12px, line-height: 1.6 ); 這樣你就可以借助 map-get()等函數做其他事情了。 不過有一點需要注意,如果 $map1 和 $map2 中有相同的 $key 名,那么將 $map2 中的 $key 會取代 $map1 中的查看全部
-
Sass Maps的函數-map-keys($map) map-keys($map) 函數將會返回 $map 中的所有 key。這些值賦予給一個變量,那他就是一個列表。如: map-keys($social-colors); 其返回的值為: "dribble","facebook","github","google","twitter" 換句話說: $list: map-keys($social-colors); 相當于: $list:"dribble","facebook","github","google","twitter";查看全部
-
Sass Maps的函數-map-has-key($map,$key) map-has-key($map,$key) 函數將返回一個布爾值。當 $map 中有這個 $key,則函數返回 true,否則返回 false。 前面的示例,當 $key 不在 $map 中時,使用 map-get($map,$key) 函數將返回一個 null 值。但對于開發人員,并看不到任何提示信息。如果使用 map-has-key($map,$key) 函數就可以改變這一狀態。我們來看一個簡單的示例。 我們可以自定義一個函數,比如 colors(): @function colors($color){ @if not map-has-key($social-colors,$color){ @warn "No color found for `#{$color}` in $social-colors map. Property omitted."; } @return map-get($social-colors,$color); } .btn-dribble { color: colors(dribble); } .btn-facebook { color: colors(facebook); } .btn-github { color: colors(github); } .btn-google { color: colors(google); } .btn-twitter { color: colors(twitter); } .btn-weibo { color: colors(weibo); } 在ruby編譯就有報錯提示,用koala就沒有查看全部
-
Sass Maps的函數-map-get($map,$key) map-get($map,$key) 函數的作用是根據 $key 參數,返回 $key 在 $map 中對應的 value 值。如果 $key 不存在 $map中,將返回 null 值。此函數包括兩個參數: $map:定義好的 map。 $key:需要遍歷的 key。 來看一個簡單的示例,假設定義了一個 $social-colors 的 map: $social-colors: ( dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee ); 假設要獲取 facebook 鍵值對應的值 #3b5998,我們就可以使用 map-get() 函數來實現: .btn-dribble{ color: map-get($social-colors,facebook); } 編譯出來的CSS: .btn-dribble { color: #3b5998; } 我們來看另一種情況,假設 $social-colors 這個 map 沒有 $weibo 這個 key: .btn-weibo{ font-size: 12px; color: map-get($social-colors,weibo); } 此時編譯出來的是CSS: .btn-weibo { font-size: 12px; } 從 編譯出來的 CSS 可以得知,如果 $key 不在 $map 中,不會編譯出 CSS,其實在 Sass 中,map-get($social- colors,weibo) 返回了一個 null 值。但在編譯出來的 CSS 中,你只知道他沒有編譯出樣式,而且在命令終端編譯時,也沒有任何錯誤或者警告信息。說實話,你并不知道他為什么編譯不出來樣式,或者說他已返回了值為 null。體驗不強,也不好排錯。其實如果我們自定義一個函數,另外加個判斷,那就截然不同。查看全部
-
Sass Maps的函數 前面介紹了使用 map 來管理變量,但要在 Sass 中獲取變量,或者對 map 做更多有意義的操作,我們必須借助于 map 的函數功能。在 Sass 中 map 自身帶了七個函數: map-get($map,$key):根據給定的key值,返回map中相關的值。 map-merge($map1,$map2):將兩個map合并成一個新的map。 map-remove($map,$key):從map中刪除一個key,返回一個新map。 map-keys($map):返回map中所有的key。 map-values($map):返回map中所有的value。 map-has-key($map,$key):根據給定的key值判斷map是否有對應的value值,如果有返回true,否則返回false。 keywords($args):返回一個函數的參數,這個參數可以動態的設置key和value。查看全部
-
Map Sass 的 map 常常被稱為數據地圖,也有人稱其為數組,因為他總是以 key:value 成對的出現,但其更像是一個 JSON 數據。 Sass 的 map : $map: ( $key1: value1, $key2: value2, $key3: value3 ) 首先有一個類似于 Sass 的變量一樣,用個 $ 加上命名空間來聲明 map。后面緊接是一個小括號 (),將數據以 key:value 的形式賦予,其中 key 和 value 是成對出現,并且每對之間使用逗號 (,) 分隔,其中最后一組后面沒有逗號。 其中鍵 key 是用來查找相關聯的值 value。使用 map 可以很容易收集鍵的值和動態插入。在 Sass 中常用下面的方式定義變量: $default-color: #fff !default; $primary-color: #22ae39 !default; 我們使用 map 可以更好的進行管理: $color: ( default: #fff, primary: #22ae39 ); 你需要新增加顏色變量值,在 map 中可以非常隨意的添加: $color: ( default: #fff, primary: #22ae39, negative: #d9534f ); 對于 Sass 的 map,還可以讓 map 嵌套 map。其實就是 map 的某一個 key 當成 map,里面可以繼續放一對或者多對 key:value: $map: ( key1: value1, key2: ( key-1: value-1, key-2: value-2, ), key3: value3 ); 有碰到過換皮膚的項目,可能每一套皮膚對應的顏色蠻多的,那么使用此功能來管理顏色的變量就非常的有條理性,便于維護與管理。你可以這樣使用: 沒有記錄完查看全部
-
Miscellaneous函數 在這里吧Miscellaneous函數稱為三元條件函數,主要因為他和JavaScript中的三元判斷非常的相似。他有兩個值,當條件成立返回一種值,當條件不成立時返回另一種值: if($condition,$if-true,$if-false) 上面表達式的意思是當$condition條件成立時,返回的值為 $if-true,否則返回的是 $if-false 值。 >> if(true,1px,2px) 1px >> if(false,1px,2px) 2px查看全部
-
comparable()函數 comparable()函數主要是用來判斷連個數是否可以進行“加,減”以及“合并”。如果可以返回的值為true,如果不可以返回的值是false: >> comparable(2px,1px) true >> comparable(2px,1%) false >> comparable(2px,1em) false >> comparable(2rem,1em) false >> comparable(2px,1cm) true >> comparable(2px,1mm) true >> comparable(2px,1rem) false >> comparable(2cm,1mm) true查看全部
-
unitless()函數 unitless() 函數相對來說簡單明了些,只是用來判斷一個值是否帶有單位,如果不帶單位返回的值為 true,帶單位返回的值為 false: >> unitless(100) true >> unitless(100px) false >> unitless(100em) false >> unitless(100%) false >> unitless(1 /2 ) true >> unitless(1 /2 + 2 ) true >> unitless(1px /2 + 2 ) false 代碼實現:用戶在調用混合宏時,如果用戶沒有給參數值加上單位,程序會自動加入單位。 @mixin adjust-location($x, $y) { @if unitless($x) { $x: 1px * $x; } @if unitless($y) { $y: 1px * $y; } position: relative; left: $x; top: $y; } .botton{ @include adjust-location(20px, 30); }查看全部
-
unit()函數 unit() 函數主要是用來獲取一個值所使用的單位,碰到復雜的計算時,其能根據運算得到一個“多單位組合”的值,不過只充許乘、除運算: >> unit(100) "" >> unit(100px) "px" >> unit(20%) "%" >> unit(1em) "em" >> unit(10px * 3em) "em*px" >> unit(10px / 3em) "px/em" >> unit(10px * 2em / 3cm / 1rem) "em/rem" 但加、減碰到不同單位時,unit() 函數將會報錯,除 px 與 cm、mm 運算之外: >> unit(1px + 1cm) "px" >> unit(1px - 1cm) "px" >> unit(1px + 1mm) "px" >> unit(10px * 2em - 3cm / 1rem) SyntaxError: Incompatible units: 'cm' and 'px*em'. >> unit(10px * 2em - 1px / 1rem) SyntaxError: Incompatible units: '' and 'em'. >> unit(1px - 1em) SyntaxError: Incompatible units: 'em' and 'px'. >> unit(1px - 1rem) SyntaxError: Incompatible units: 'rem' and 'px'. >> unit(1px - 1%) SyntaxError: Incompatible units: '%' and 'px'. >> unit(1cm + 1em) SyntaxError: Incompatible units: 'em' and 'cm'. 法整合成一個單位,對于我們在 CSS 中運用中并不適合,比如: >> unit(10px * 3em) "em*px" >> unit(10px / 3em) "px/em" >> unit(10px * 2em / 3cm / 1rem) "em/rem" 換句話說,上面運算出來的單位,對于在 CSS 中使用將是沒有任何意義的。查看全部
-
Introspection 函數 -type-of() type-of()函數主要用來判斷一個值是屬于什么類型: 返回值: number為數值型。 string為字符串型。 bool為布爾型。 color為顏色型。 >> type-of(100) "number" >> type-of(100px) "number" >> type-of("asdf") "string" >> type-of(asdf) "string" >> type-of(true) "bool" >> type-of(false) "bool" >> type-of(#fff) "color" >> type-of(blue) "color" >> type-of(1 / 2 = 1) "string"查看全部
-
Introspection函數 Introspection函數包括了幾個判斷型函數: type-of($value):返回一個值的類型 unit($number):返回一個值的單位; unitless($number):判斷一個值是否帶有帶位 comparable($number-1, $number-2):判斷兩個值是否可以做加、減和合并 這幾個函數主要用來對值做一個判斷的作用,我們來依次看每個函數的功能。查看全部
舉報
0/150
提交
取消