-
a. 在 CSS 中除了可以使用 rgba、hsla 和 transform 來控制顏色透明度之外，還可以使用 opacity 來控制，只不過前兩者只是針對顏色上的透明通道做處理，而后者是控制整個元素的透明度。 b. 在 Sass 中，也提供了系列透明函數，只不過這系列的透明函數主要用來處理顏色透明度： alpha($color) /opacity($color)：獲取顏色透明度值； rgba($color, $alpha)：改變顏色的透明度值； opacify($color, $amount) / fade-in($color, $amount)：使顏色更不透明； transparentize($color, $amount) / fade-out($color, $amount)：使顏色更加透明。查看全部
-
a. 這個函數會顏色的飽和度值直接調至 0%，所以此函數與 desaturate($color,100%) 所起的功能是一樣的。一般這個函數能將彩色顏色轉換成不同程度的灰色。 grayscale() 函數處理過的顏色，其最大的特征就是顏色的飽和度為 0。查看全部
-
a. 這個是通過調整顏色的色相換算一個新顏色。他需要一個顏色和色相度數值。通常這個度數值是在 -360deg 至 360deg 之間，當然了可以是百分數，也可以是純數字（都表示多少度！這里不要被百分號混淆了） //SCSS $baseColor: #ad141e; .adjust-hue-deg { background: adjust-hue($baseColor, 30deg); } .adjust-hue-per { background: adjust-hue($baseColor, 30%); } .adjust-hue-num { background: adjust-hue($baseColor, 30); } b. HSL的色盤參考：http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201503281590.html c. 讓按鈕的邊框色是根據背景顏色調整色相值30deg獲得： $bgcolor: #f46; .btn{ background-color: $bgcolor; border-color: adjust-hue($color: $bgcolor, $degrees: 30); }查看全部
-
a. 這兩個函數是通過改變顏色的飽和度來得到一個新的顏色，他們和前面介紹的修改亮度得到新顏色的方法非常相似。 b. 讓按鈕邊框色是背景顏色的基礎上飽和度增加20%： $bgcolor: #ff3; .btn { background-color: $bgcolor; border-color:saturate($bgcolor, $amount: 20%); }查看全部
-
a. 兩個函數都是圍繞顏色的亮度值做調整的，其中 lighten() 函數會讓顏色變得更亮，與之相反的 darken() 函數會讓顏色變得更暗。 b. lighten() 和 darken() 函數只是在原始顏色的基礎上對亮度值進行運算操作，但是生成出來的新顏色在色相和飽和度會有略微的變化。 c. lighten() 函數會讓新顏色的亮度值超過 100%，而 darken() 函數會讓新顏色的亮度值低于 0 變成負數?？蓪嶋H上任何顏色的亮度值都在 0~100% 之間，當顏色的亮度值接近或大于 100%，顏色會變成白色；反之顏色的亮度值接近或小于 0 時，顏色會變成黑色。 d. 讓按鈕的邊框顏色是背景色亮度的10%： $bgcolor: #f33; .btn { background-color: $bgcolor; border-color: darken($bgcolor, 0.9*lightness($bgcolor)); }查看全部
-
hsl($hue,$saturation,$lightness)：通過色相（hue）、飽和度(saturation)和亮度（lightness）的值創建一個顏色； hsla($hue,$saturation,$lightness,$alpha)：通過色相（hue）、飽和度(saturation)、亮度（lightness）和透明（alpha）的值創建一個顏色； hue($color)：從一個顏色中獲取色相（hue）值； saturation($color)：從一個顏色中獲取飽和度（saturation）值； lightness($color)：從一個顏色中獲取亮度（lightness）值； adjust-hue($color,$degrees)：通過改變一個顏色的色相值，創建一個新的顏色； lighten($color,$amount)：通過改變顏色的亮度值，讓顏色變亮，創建一個新的顏色； darken($color,$amount)：通過改變顏色的亮度值，讓顏色變暗，創建一個新的顏色； saturate($color,$amount)：通過改變顏色的飽和度值，讓顏色更飽和，從而創建一個新的顏色 desaturate($color,$amount)：通過改變顏色的飽和度值，讓顏色更少的飽和，從而創建出一個新的顏色； grayscale($color)：將一個顏色變成灰色，相當于desaturate($color,100%); complement($color)：返回一個補充色，相當于adjust-hue($color,180deg); invert($color)：反回一個反相色，紅、綠、藍色值倒過來，而透明度不變。查看全部
-
Mix 函數的工作原理，在函數中指定三個函數，前兩個函數是你想混合的顏色（記住，你可以通過顏色變量、十六進制、RGBA、RGB、HSL 或者 HSLA 顏色值）。第三個參數是第一種顏色的比例值。查看全部
-
RGB顏色函數-Red()、Green()、Blue()函數，分別獲取顏色中的紅色值、綠色值、藍色值。 $color: #f36; .body { @if red($color) > 50 { color: #fff; } @else if red($color) < 50 { color:#000; } }查看全部
-
rgba() 函數主要用來將一個顏色根據透明度轉換成 rgba 顏色。查看全部
-
sass -i：在命令終端開啟此命令，相當于開啟Sass的函數計算。 在 RGB 顏色函數中，在實際中常用的主要是 rgba() 和 mix() 兩個函數。查看全部
-
map-remove($map,$key) 函數是用來刪除當前 $map 中的某一個 $key，從而得到一個新的 map。其返回的值還是一個 map。他并不能直接從一個 map 中刪除另一個 map，僅能通過刪除 map 中的某個 key 得到新 map。 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 );查看全部
-
map-merge($map1,$map2) 函數是將 $map1 和 $map2 合并，然后得到一個新的 $map。如果你要快速將新的值插入到 $map 中的話，這種方法是最佳方法。如果 $map1 和 $map2 中有相同的 $key 名，那么將 $map2 中的 $key 會取代 $map1 中的。查看全部
-
28. map-keys($map) 函數將會返回 $map 中的所有 key。這些值賦予給一個變量，那他就是一個列表。 $social-colors: ( dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee ); @function colors($color){ $names: map-keys($social-colors); @if not index($names,$color){ @warn "Waring: `#{$color} is not a valid color name.`"; } @return map-get($social-colors,$color); } @each $name in map-keys($map: $social-colors){ .btn-#{$name}{ color:colors($name); } } @for $i from 1 through length(map-keys($social-colors)){ .btn-#{nth(map-keys($social-colors),$i)}{ color: colors(nth(map-keys($social-colors),$i)); } }查看全部
-
27. map-has-key($map,$key) 函數將返回一個布爾值。當 $map 中有這個 $key，則函數返回 true，否則返回 false。 $social-colors: ( dribble: #ea4c89, facebook: #3b5998, github: #171515, google: #db4437, twitter: #55acee ); @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); } @each $social-network,$social-color in $social-colors { .btn-#{$social-network} { color: colors($social-network); } }查看全部
-
map-get($map,$key) 函數的作用是根據 $key 參數，返回 $key 在 $map 中對應的 value 值。如果 $key 不存在 $map中，將返回 null 值。查看全部
舉報
0/150
提交
取消