- css预处理
CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题
例如：
- Sass（scss）
- LESS
- Stylus
- Turbine
- Swithch CSS
- CSS Cacheer
- DT CSS
-
sass
Tips
Sass 和 SCSS区别：
文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。 -
声明变量
$width:300px
sass变量包括三个部分
- 声明变量的符号$
- 变量名称
- 赋予变量的值
-
普通变量与默认变量
普通变量：定义后在全局范围内使用
默认变量：在值后加上!default,用来设置默认值，覆盖的方式为在默认变量之前重新声明下变量即可 -
全局变量和局部变量
全局变量就是定义在元素外面的变量，局部变量为定义在元素内部的变量 -
混合宏、继承和占位符
//混合宏
@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语法
@if @else
@for $i from <start> through <end>//包括end
@for $i from <start> to <end>//不包括end
@while
@each $var in <list>
- sass函数介绍
- 字符串函数
- 数字函数
- 列表函数
- 颜色函数
- Introspection 函数
- 三元函数
- 字符串函数
- unquote($string)：删除字符串中的引号
- quote($string)：给字符串添加引号
- To-upper-case() 函数将字符串小写字母转换成大写字母
- To-lower-case() 函数将字符串转换成小写字母
- 数字函数
- percentage($value)：将一个不带单位的数转换成百分比值
- round($value)：将数值四舍五入，转换成一个最接近的整数
- ceil($value)：将大于自己的小数转换成下一位整数
- floor($value)：将一个数去除他的小数部分
- abs($value)：返回一个数的绝对值
- min($numbers…)：找出几个数值之间的最小值
- max($numbers…)：找出几个数值之间的最大值
- random(): 获取随机数
- 列表函数
- length($list)：返回一个列表的长度值，参数之间用空格隔开
- nth($list, $n)：返回一个列表中指定的某个标签值，从1开始
- join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表，不能超过两个
- append($list1, $val, [$separator])：将某个值放在列表的最后
- zip($lists…)：将几个列表结合成一个多维的列表，每个单一列表对应相同位置的值
- index($list, $value)：返回一个值在列表中的位置值
- Introspection函数
- type-of($value)：返回一个值的类型，number,string,bool,color
- unit($number)：返回一个值的单位
- unitless($number)：判断一个值是否带有单位
- comparable($number-1, $number-2)：判断两个值是否可以做加、减和合并
- 三元条件函数
- if($condition,$if-true,$if-false)
- map数据地图（类似于json结构）
- 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
- 颜色函数
- rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色
- rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色
- red($color)：从一个颜色中获取其中红色值
- green($color)：从一个颜色中获取其中绿色值
- blue($color)：从一个颜色中获取其中蓝色值
- mix($color-1,$color-2,[$weight])：把两种颜色混合在一起
- 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)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变
- opacity函数
- alpha($color) /opacity($color)：获取颜色透明度值；
- rgba($color, $alpha)：改变颜色的透明度值；
- opacify($color, $amount) / fade-in($color, $amount)：使颜色更不透明
- transparentize($color, $amount) / fade-out($color, $amount)：使颜色更加透明
网友评论