CSS的预处理
CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件，以供项目使用。为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
- Sass是世界上最成熟、最稳定、最强大的专业级CSS扩展语言！
- Sass (Syntactically Awesome StyleSheets)
- Sass可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护
基本语法
- 变量声明
- 默认变量
- 全局变量与局部变量（使用 $ 定义变量，： 后面是变量值）
//最外层定义的是全局变量
$color:orange;
$color:blue !default; //默认变量
.block {
color:$color; //调用全局变量
}
em {
$color:red; //定义局部变量
a {
color:$color; //调用局部变量
}
}
- 数字 number：
如，1、 .2、 13%、 10px - 字符串 string：
有引号字符串或无引号字符串，如，"foo"、 'bar'、 baz - 颜色 color：
如，blue、 #04a3f9、rgb(255,0,0)、 rgba(255,0,0,0.5) - 布尔型 bool：
如，true、 false - 空值 null：
如，null - 值列表 list：
用空格或者逗号分开，如，1.5em 1em、 Helvetica, Arial
注释
//，不会输出到结果
/.../，输出到未压缩的结果
/!.../,输出到任意结果
嵌套 (Nesting)
- 选择器嵌套
- 属性嵌套
- 伪类嵌套
- 引用父级选择器 &
- 直接子元素嵌套 >
.wrap {
border: { //属性嵌套
top:1px solid red;
bottom: 1px solid green;
};
a { //选择器嵌套
//伪类嵌套
&：hover { //&表示父组选择器
background-color: #f00;
}
}
>.box { //直接子元素嵌套
color:#286090;
}
}
继承(Inheritance)与扩展(Extend)
- btn-primary继承自.btn类，使用@extend来继承已存在的类样式块
.btn {
border:1px solid #ccc;
padding:6px 10px;
font-size:14px;
}
.btn-primary {
background-color:#f36;
color:#fff;
@extend .btn;
}
占位符(placeholder)
- 定义占位符：%占位符名（只有通过@extend调用占位符时才会产生代码）
%mt5 {
margin-top:5px;
}
%pt5 {
padding-top:5px;
}
.btn {
@extend %mt5;
@extend %pt5;
}
混合宏(Mixin)
- 声明混合宏 @mixin 混合宏名([参数])
- 调用混合宏 @include 混合宏名([参数])
//定义一个带参数的混合宏
@mixin border-radius($radius:5px){
-webkit-border-radius:$radius;
border-radius:$radius;
}
button {
@include border-radius;
}
混合宏、继承、占位符区别
1.png
插值(Interpolation)
- 语法：#{$变量名}，生成css时，插值会被变量值代替
2.png
- 不可在@include 混合宏时使用插值
3.png
- 可在@extend时使用插值
4.png
导入(Import)
- 这些情况与css中的@import一样
5.png
操作符(Operators)
加法 +
减法 -
乘法 *
除法 /
取余 %
内置函数
- Introspection函数
type-of($value)：返回一个值的类型
unit($number)：返回一个值的单位
unitless($number)：判断一个值是否不带单位
comparable($number-1, $number-2)：判断两个值是否可以做加、减和合并
- Miscellaneous函数(三元函数)
if($condition,$if-true,$if-false)
数字函数
- percentage($value)：将一个不带单位的数转换成百分比值；
- round($value)：将数值四舍五入，转换成一个最接近的整数；
- ceil($value)：将大于自己的小数转换成下一位整数；
- floor($value)：将一个数去除他的小数部分；
- abs($value)：返回一个数的绝对值；
- min($numbers…)：找出几个数值之间的最小值；
- max($numbers…)：找出几个数值之间的最大值；
- random(): 获取随机数
列表函数
- length($list)：返回一个列表的长度值；
- nth($list, $n)：返回一个列表中指定的某个标签值
- join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表；
- append($list1, $val, [$separator])：将某个值放在列表的最后；
- zip($lists…)：将几个列表结合成一个多维的列表；
- index($list, $value)：返回一个值在列表中的位置值。
常用指令
@media
@if
@at-root
媒体查询(Mediaqueries)
6.png
颜色函数-RGB颜色函数
- 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）值；
Maps的函数
- 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。
指令(Directives)
@for
@each
@while
@function
@debug
@warn
@error
