- css預(yù)處理
CSS 預(yù)處理器用一種專門的編程語(yǔ)言，進(jìn)行 Web 頁(yè)面樣式設(shè)計(jì)，然后再編譯成正常的 CSS 文件，以供項(xiàng)目使用。CSS 預(yù)處理器為 CSS 增加一些編程的特性，無(wú)需考慮瀏覽器的兼容性問(wèn)題
例如：
- Sass（scss）
- LESS
- Stylus
- Turbine
- Swithch CSS
- CSS Cacheer
- DT CSS
sass
Tips
Sass 和 SCSS區(qū)別：
文件擴(kuò)展名不同，Sass 是以“.sass”后綴為擴(kuò)展名，而 SCSS 是以“.scss”后綴為擴(kuò)展名
語(yǔ)法書寫方式不同，Sass 是以嚴(yán)格的縮進(jìn)式語(yǔ)法規(guī)則來(lái)書寫，不帶大括號(hào)({})和分號(hào)(;)，而 SCSS 的語(yǔ)法書寫和我們的 CSS 語(yǔ)法書寫方式非常類似。聲明變量
$width:300px
sass變量包括三個(gè)部分
- 聲明變量的符號(hào)$
- 變量名稱
- 賦予變量的值
普通變量與默認(rèn)變量
普通變量：定義后在全局范圍內(nèi)使用
默認(rèn)變量：在值后加上!default,用來(lái)設(shè)置默認(rèn)值，覆蓋的方式為在默認(rèn)變量之前重新聲明下變量即可全局變量和局部變量
全局變量就是定義在元素外面的變量，局部變量為定義在元素內(nèi)部的變量混合宏、繼承和占位符
//混合宏
@mixin mt($var){
margin-top: $var;
}
.block {
@include mt(5px);
}
//繼承
.mt{
margin-top: 5px;
}
.block {
@extend .mt;
}
//占位符
%mt{
margin-top: 5px;
}
.block {
@extend %mt;
}
- sass語(yǔ)法
@if @else
@for $i from <start> through <end>//包括end
@for $i from <start> to <end>//不包括end
@while
@each $var in <list>
- sass函數(shù)介紹
- 字符串函數(shù)
- 數(shù)字函數(shù)
- 列表函數(shù)
- 顏色函數(shù)
- Introspection 函數(shù)
- 三元函數(shù)
- 字符串函數(shù)
- unquote($string)：刪除字符串中的引號(hào)
- quote($string)：給字符串添加引號(hào)
- To-upper-case() 函數(shù)將字符串小寫字母轉(zhuǎn)換成大寫字母
- To-lower-case() 函數(shù)將字符串轉(zhuǎn)換成小寫字母
- 數(shù)字函數(shù)
- percentage($value)：將一個(gè)不帶單位的數(shù)轉(zhuǎn)換成百分比值
- round($value)：將數(shù)值四舍五入，轉(zhuǎn)換成一個(gè)最接近的整數(shù)
- ceil($value)：將大于自己的小數(shù)轉(zhuǎn)換成下一位整數(shù)
- floor($value)：將一個(gè)數(shù)去除他的小數(shù)部分
- abs($value)：返回一個(gè)數(shù)的絕對(duì)值
- min($numbers…)：找出幾個(gè)數(shù)值之間的最小值
- max($numbers…)：找出幾個(gè)數(shù)值之間的最大值
- random(): 獲取隨機(jī)數(shù)
- 列表函數(shù)
- length($list)：返回一個(gè)列表的長(zhǎng)度值，參數(shù)之間用空格隔開(kāi)
- nth($list, $n)：返回一個(gè)列表中指定的某個(gè)標(biāo)簽值，從1開(kāi)始
- join($list1, $list2, [$separator])：將兩個(gè)列給連接在一起，變成一個(gè)列表，不能超過(guò)兩個(gè)
- append($list1, $val, [$separator])：將某個(gè)值放在列表的最后
- zip($lists…)：將幾個(gè)列表結(jié)合成一個(gè)多維的列表，每個(gè)單一列表對(duì)應(yīng)相同位置的值
- index($list, $value)：返回一個(gè)值在列表中的位置值
- Introspection函數(shù)
- type-of($value)：返回一個(gè)值的類型，number,string,bool,color
- unit($number)：返回一個(gè)值的單位
- unitless($number)：判斷一個(gè)值是否帶有單位
- comparable($number-1, $number-2)：判斷兩個(gè)值是否可以做加、減和合并
- 三元條件函數(shù)
- if($condition,$if-true,$if-false)
- map數(shù)據(jù)地圖（類似于json結(jié)構(gòu)）
- map-get($map,$key)：根據(jù)給定的 key 值，返回 map 中相關(guān)的值
- map-merge($map1,$map2)：將兩個(gè) map 合并成一個(gè)新的 map
- map-remove($map,$key)：從 map 中刪除一個(gè) key，返回一個(gè)新 map
- map-keys($map)：返回 map 中所有的 key
- map-values($map)：返回 map 中所有的 value
- map-has-key($map,$key)：根據(jù)給定的 key 值判斷 map 是否有對(duì)應(yīng)的 value 值，如果有返回 true，否則返回 false
- keywords($args)：返回一個(gè)函數(shù)的參數(shù)，這個(gè)參數(shù)可以動(dòng)態(tài)的設(shè)置 key 和 value
- 顏色函數(shù)
- rgb($red,$green,$blue)：根據(jù)紅、綠、藍(lán)三個(gè)值創(chuàng)建一個(gè)顏色
- rgba($red,$green,$blue,$alpha)：根據(jù)紅、綠、藍(lán)和透明度值創(chuàng)建一個(gè)顏色
- red($color)：從一個(gè)顏色中獲取其中紅色值
- green($color)：從一個(gè)顏色中獲取其中綠色值
- blue($color)：從一個(gè)顏色中獲取其中藍(lán)色值
- mix($color-1,$color-2,[$weight])：把兩種顏色混合在一起
- HSL函數(shù)
- hsl($hue,$saturation,$lightness)：通過(guò)色相（hue）、飽和度(saturation)和亮度（lightness）的值創(chuàng)建一個(gè)顏色；
- hsla($hue,$saturation,$lightness,$alpha)：通過(guò)色相（hue）、飽和度(saturation)、亮度（lightness）和透明（alpha）的值創(chuàng)建一個(gè)顏色
- hue($color)：從一個(gè)顏色中獲取色相（hue）值
- saturation($color)：從一個(gè)顏色中獲取飽和度（saturation）值
- lightness($color)：從一個(gè)顏色中獲取亮度（lightness）值
- adjust-hue($color,$degrees)：通過(guò)改變一個(gè)顏色的色相值，創(chuàng)建一個(gè)新的顏色
- lighten($color,$amount)：通過(guò)改變顏色的亮度值，讓顏色變亮，創(chuàng)建一個(gè)新的顏色
- darken($color,$amount)：通過(guò)改變顏色的亮度值，讓顏色變暗，創(chuàng)建一個(gè)新的顏色
- saturate($color,$amount)：通過(guò)改變顏色的飽和度值，讓顏色更飽和，從而創(chuàng)建一個(gè)新的顏色
- desaturate($color,$amount)：通過(guò)改變顏色的飽和度值，讓顏色更少的飽和，從而創(chuàng)建出一個(gè)新的顏色
- grayscale($color)：將一個(gè)顏色變成灰色，相當(dāng)于desaturate($color,100%);
- complement($color)：返回一個(gè)補(bǔ)充色，相當(dāng)于adjust-hue($color,180deg)
- invert($color)：反回一個(gè)反相色，紅、綠、藍(lán)色值倒過(guò)來(lái)，而透明度不變
- opacity函數(shù)
- alpha($color) /opacity($color)：獲取顏色透明度值；
- rgba($color, $alpha)：改變顏色的透明度值；
- opacify($color, $amount) / fade-in($color, $amount)：使顏色更不透明
- transparentize($color, $amount) / fade-out($color, $amount)：使顏色更加透明
