-
@extend Sass 中的 @extend 是用來擴展選擇器或占位符。比如： .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; } 詳細的可以回顧前面介紹的繼承樣式部分。查看全部
-
@media Sass 中的 @media 指令和 CSS 的使用規則一樣的簡單，但它有另外一個功能，可以嵌套在 CSS 規則中。有點類似 JS 的冒泡功能一樣，如果在樣式中使用 @media 指令，它將冒泡到外面。來看一個簡單示例： .sidebar { width: 300px; @media screen and (orientation: landscape) { width: 500px; } } 編譯出來： .sidebar { width: 300px; } @media screen and (orientation: landscape) { .sidebar { width: 500px; } } @media 也可以嵌套 @media： @media screen { .sidebar { @media (orientation: landscape) { width: 500px; } } } 此時編譯出來： @media screen and (orientation: landscape) { .sidebar { width: 500px; } } 在使用 @media 時，還可以使用插件#{}: $media: screen; $feature: -webkit-min-device-pixel-ratio; $value: 1.5; @media #{$media} and ($feature: $value) { .sidebar { width: 500px; } } 編譯出來的 CSS： @media screen and (-webkit-min-device-pixel-ratio: 1.5) { .sidebar { width: 500px; } }查看全部
-
@import Sass 支持所有 CSS3 的 @ 規則， 以及一些 Sass 專屬的規則，也被稱為“指令（directives）”。 @import Sass 擴展了 CSS 的 @import 規則，讓它能夠引入 SCSS 和 Sass 文件。 所有引入的 SCSS 和 Sass 文件都會被合并并輸出一個單一的 CSS 文件。 另外，被導入的文件中所定義的變量或 mixins 都可以在主文件中使用。 Sass 會在當前目錄下尋找其他 Sass 文件， 如果是 Rack、Rails 或 Merb 環境中則是 Sass 文件目錄。 也可以通過 :load_paths 選項或者在命令行中使用 --load-path 選項來指定額外的搜索目錄。 @import 根據文件名引入。 默認情況下，它會尋找 Sass 文件并直接引入， 但是，在少數幾種情況下，它會被編譯成 CSS 的 @import 規則： 如果文件的擴展名是 .css。 如果文件名以 http:// 開頭。 如果文件名是 url()。 如果 @import 包含了任何媒體查詢（media queries）。 如果上述情況都沒有出現，并且擴展名是 .scss 或 .sass， 該名稱的 Sass 或 SCSS 文件就會被引入。 如果沒有擴展名， Sass 將試著找出具有 .scss 或 .sass 擴展名的同名文件并將其引入。 例如： @import "foo.scss"; 或 @import "foo"; 兩者都將引入 foo.scss 文件， 而 @import "foo.css"; @import "foo" screen; @import "http://foo.com/bar"; @import url(foo); 將被編譯為： @import "foo.css"; @import "foo" screen; @import "http://foo.com/bar"; @import url(foo); 也可以通過一個 @import 引入多個文件。例如： @import "rounded-corners", "text-shadow"; 將引入 rounded-corners 和 text-shadow 兩個文件。查看全部
-
Opacity函數-transparentize()、 fade-out()函數 transparentize() 和 fade-out() 函數所起作用剛好與 opacify() 和 fade-in() 函數相反，讓顏色更加的透明。這兩個函數會讓透明值做減法運算，當計算出來的結果小于 0 時會以 0 計算，表示全透明。 >> transparentize(red,.5) rgba(255, 0, 0, 0.5) >> transparentize(#fde,.9) rgba(255, 221, 238, 0.1) >> transparentize(rgba(98,233,124,.3),.11) rgba(98, 233, 124, 0.19) >> transparentize(rgba(98,233,124,.3),.51) rgba(98, 233, 124, 0) >> fade-out(red,.9) rgba(255, 0, 0, 0.1) >> fade-out(hsla(98,6%,23%,.5),.1) rgba(58, 62, 55, 0.4) >> fade-out(hsla(98,6%,23%,.5),.6) rgba(58, 62, 55, 0)查看全部
-
這兩個函數是用來對已有顏色的透明度做一個加法運算，會讓顏色更加不透明。其接受兩個參數，第一個參數是原始顏色，第二個參數是你需要增加的透明度值，其取值范圍主要是在 0~1 之間。當透明度值增加到大于 1 時，會以 1 計算，表示顏色不具有任何透明度。 >> opacify(rgba(22,34,235,.6),.2) rgba(22, 34, 235, 0.8) >> opacify(rgba(22,34,235,.6),.5) #1622eb >> opacify(hsla(22,34%,23%,.6),.15) rgba(79, 53, 39, 0.75) >> opacify(hsla(22,34%,23%,.6),.415) #4f3527 >> opacify(red,.15) #ff0000 >> opacify(#89adde,.15) #89adde >> fade-in(rgba(23,34,34,.5),.15) rgba(23, 34, 34, 0.65) >> fade-in(rgba(23,34,34,.5),.615) #172222 其中 fade-in( ) 函數又名 fade_in() 函數。其所起作用等效。查看全部
-
Opacity函數-rgba()函數 在前面介紹 RGB 函數一節中，還記得嗎？有一個 rgba() 函數可以創建一個顏色，同時還可以對顏色修改其透明度。其可以接受兩個參數，第一個參數為顏色，第二個參數是你需要設置的顏色透明值。 >> rgba(red,.5) rgba(255, 0, 0, 0.5) >> rgba(#dedede,.5) rgba(222, 222, 222, 0.5) >> rgba(rgb(34,45,44),.5) rgba(34, 45, 44, 0.5) >> rgba(rgba(33,45,123,.2),.5) rgba(33, 45, 123, 0.5) >> rgba(hsl(33,7%,21%),.5) rgba(57, 54, 50, 0.5) >> rgba(hsla(33,7%,21%,.9),.5) rgba(57, 54, 50, 0.5)查看全部
-
Opacity函數-alpha()、opacity()函數 alphpa() 和 opacity() 函數很簡單，與前面介紹的 red(),green() 等函數很類似。這個函數的主要功能是用來獲取一個顏色的透明度值。如果顏色沒有特別指定透明度，那么這兩個函數得到的值都會是 1： >> alpha(red) 1 >> alpha(rgba(red,.8)) 0.8 >> opacity(red) 1 >> opacity(rgba(red,.8)) 0.8查看全部
-
在 CSS 中除了可以使用 rgba、hsla 和 transform 來控制顏色透明度之外，還可以使用 opacity 來控制，只不過前兩者只是針對顏色上的透明通道做處理，而后者是控制整個元素的透明度。 在 Sass 中，也提供了系列透明函數，只不過這系列的透明函數主要用來處理顏色透明度： alpha($color) /opacity($color)：獲取顏色透明度值； rgba($color, $alpha)：改變顏色的透明度值； opacify($color, $amount) / fade-in($color, $amount)：使顏色更不透明； transparentize($color, $amount) / fade-out($color, $amount)：使顏色更加透明。查看全部
-
HSL函數-grayscale()函數 這個函數會顏色的飽和度值直接調至 0%，所以此函數與 desaturate($color,100%) 所起的功能是一樣的。一般這個函數能將彩色顏色轉換成不同程度的灰色。 //SCSS $baseColor: #ad141e; .grayscale { background: grayscale($baseColor); } .desaturate { background: desaturate($baseColor,100%); } 編譯出來的 css 代碼： //CSS .grayscale { background: #616161; } .desaturate { background: #616161; } 看看計算出來的 HSL 各個值的變化： >> hue(#ad141e) 356.07843deg >> hue(#616161) 0deg >> saturation(#ad141e) 79.27461% >> saturation(#616161) 0% >> lightness(#ad141e) 37.84314% >> lightness(#616161) 38.03922% grayscale() 函數處理過的顏色，其最大的特征就是顏色的飽和度為 0。查看全部
-
HSL函數-adjust-hue()函數 這個是通過調整顏色的色相換算一個新顏色。他需要一個顏色和色相度數值。通常這個度數值是在 -360deg 至 360deg 之間，當然了可以是百分數： //SCSS $baseColor: #ad141e; .adjust-hue-deg { background: adjust-hue($baseColor,30deg); } .adjust-hue-per { background: adjust-hue($baseColor,30%); } 編譯出的 css 代碼： //CSS .adjust-hue-deg { background: #ad5614; } .adjust-hue-per { background: #ad5614; } 同樣的，可以通過 hue() 函數得到顏色轉換前后的色相值： >> hue(#ad141e) //原顏色色相值 356.07843deg >> hue(#ad5614) //在原色色相基礎上增加30deg 25.88235deg 在 HSL 顏色表達方式上，色相是從 -360 和 360 之間，負值逆時針轉，正值順時針轉。在這個實例中，原色的色相值約 356deg，加上 30deg 后，新顏色變成了 386deg，但我們的色盤中并沒有比 360deg 更大的值，此時新顏色的值也并不會是386deg，那將怎么辦呢？其實很簡單，當值大于 360deg時，表示色盤轉完了一圈，繼續順時針轉余下的值（這里是 26deg），那么這個繼續轉的值就是新顏色的色相值。小伙伴們，看到這個，你是不是又有點驚了。反之，得到的負數值也是一樣的道理。查看全部
-
HSL函數-saturate() saturate()、desaturate()這兩個函數是通過改變顏色的飽和度來得到一個新的顏色，他們和前面介紹的修改亮度得到新顏色的方法非常相似。 //SCSS $baseColor: #ad141e; .saturate { background: saturate($baseColor,30%); //在原色飽和度基礎上增加飽和度 } .desaturate { background: desaturate($baseColor,30%);//在原色飽和度基礎上減少飽和度 } 編譯出來的 css 代碼： //CSS .saturate { background: #c1000d; } .desaturate { background: #903137; } 顏色變了。同樣使用 saturation() 函數在終端中進行計算一下，看看他們有什么樣的變化： >> saturation(#ad141e) //原色的飽和度 79.27461% >> saturation(#c1000d) //在原色飽和度基礎上增加30%,超過100%時按100%計算 100% >> saturation(#903137) //在原色飽和度基礎上減少30%,小于0時按0計算 49.2228%查看全部
-
HSL函數-lighten() lighten() 和 darken() 兩個函數都是圍繞顏色的亮度值做調整的，其中 lighten() 函數會讓顏色變得更亮，與之相反的 darken() 函數會讓顏色變得更暗。這個亮度值可以是 0~1 之間，不過常用的一般都在 3%~20% 之間。 來看一個簡單的實例，首先定義一個顏色變量： $baseColor: #ad141e; 使用 lighten() 和 darken() 函數來修改 10% 的亮度值： //SCSS .lighten { background: lighten($baseColor,10%); } .darken{ background: darken($baseColor,10%); } 編譯出來的 css 代碼： //CSS .lighten { background: #db1926; } .darken { background: #7f0f16; } 使用函數 lightness() 函數來驗證一下三個顏色之間亮度值的變化： >> lightness(#ad141e) //原色的亮度值 37.84314% >> lightness(#db1926) //在原色的亮度值基礎上增加10% 47.84314% >> lightness(#7f0f16) //在原色的亮度值基礎上減少10% 27.84314% 當顏色的亮度值接近或大于 100%，顏色會變成白色；反之顏色的亮度值接近或小于 0 時，顏色會變成黑色。查看全部
-
HSL函數簡介 HSL顏色函數包括哪些具體的函數，所起的作用是什么： 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)：反回一個反相色，紅、綠、藍色值倒過來，而透明度不變。 在 HSL 函數中，hsl() 和 hsla() 函數主要是通過顏色的 H、S、L 或者 A 幾個參數獲取一個 rgb 或 rgba 表達的顏色，使用這兩個函數能幫助您知道顏色的十六進制表達式和 rgba 表達式。 而 hue()、saturation() 和 lightness() 函數主要是用來獲取指定顏色中的色相值、飽和度和亮度值。對于顏色表達沒有太多的實際作用。查看全部
-
RGB顏色函數-Mix()函數 Mix 函數是將兩種顏色根據一定的比例混合在一起，生成另一種顏色。其使用語法如下： mix($color-1,$color-2,$weight); $color-1 和 $color-2 指的是你需要合并的顏色，顏色可以是任何表達式，也可以是顏色變量。 $weight 為 合并的比例（選擇權重），默認值為 50%，其取值范圍是 0~1 之間。它是每個 RGB 的百分比來衡量，當然透明度也會有一定的權重。默認的比例是 50%，這意味著兩個顏色各占一半，如果指定的比例是 25%，這意味著第一個顏色所占比例為 25%，第二個顏色所占比例為75%。 mix(#f00, #00f) => #7f007f mix(#f00, #00f, 25%) => #3f00bf mix(rgba(255, 0, 0, 0.5), #00f) => rgba(63, 0, 191, 0.75) 在前面的基礎上，做一個修改： //SCSS $color1: #a63; $color2: #fff; $bgColor1: #f36; $bgColor2: #e36; $borderColor1:#c36; $borderColor2:#b36; .mix { background: mix($bgColor1,$bgColor2,.75); color: mix($color1,$color2,.25); border-color: mix($borderColor1,$bgColor2,.05); } 編譯的 css 代碼： //CSS .mix { background: #ee3366; color: #fefefe; border-color: #ed33 } 這就是 Mix 函數的工作原理，在函數中指定三個函數，前兩個函數是你想混合的顏色（記住，你可以通過顏色變量、十六進制、RGBA、RGB、HSL 或者 HSLA 顏色值）。第三個參數是第一種顏色的比例值。查看全部
-
RGB顏色函數-Red()、Green()、Blue()函數 3、Red() 函數 red() 函數非常簡單，其主要用來獲取一個顏色當中的紅色值。假設有一個 #f36 的顏色，如果你想得到 #f36 中的 red 值是多少，這個時候使用 red() 函數就能很簡單獲取。 >> red(#f36) 255 得到的值是”255”。（注意：在命令終端要先輸入sass -i 命令） 4、Green() 函數 green() 函數和 red() 函數一樣，用來獲取某一個顏色值中 green 的值。同樣拿 ”#f36“ 顏色為例： >> green(#f36) 51 5、Blue() 函數 同理，blue() 函數是用來獲取某一個顏色值中 blue 的值，如： >> blue(#f36) 102查看全部
舉報
0/150
提交
取消