1.混合器:
什么是sass混合器:
是检查代码的重复率的
2.标识符:@mixin
调用:@include name
语法:
@mixin 名字
{
样式属性
1:
取值
1
;
样式属性
2:
取值
2
;
……
}
//调用 名字
选择器
{
@include 名字;
}
@mixin border{
width: 100px;
height: 100px;
}
#div{
@include border;
background-color:red ;
}
css显示:
#div {
width: 100px;
height: 100px;
background-color: red;
}
3.何时用:
3.1:一个逻辑单元一个属性(能否有一个好名字);
3.2:html外观的展示描述
4.传参:(按照变量的格式,通过逗号分隔,将参数写进圆括号里,引用指令时,按照参数的顺序,再将所赋的值对应写进括号)
@minix name(形参)
@include name(实参)
@mixin box($width,$height){
width: $width;
height: $height;
}
#div2{
@include box(100px,100px)
}
css显示:
#div2 {
width: 100px;
height: 100px;
}
4.混合器中的css规则:包含css规则,以及选择器和属性。可使用父级元素&
5.选择器继承:一个选择器继承另一个选择器的样式,若error和seriouserror有共同样式会在一块,不同不会再一块
6.不要在css规则中使用后代选择器
7.数据类型:
- 数字,
1, 2, 13, 10px
- 字符串,有引号字符串与无引号字符串,
"foo", 'bar', baz
- 颜色,
blue, #04a3f9, rgba(255,0,0,0.5)
- 布尔型,
true, false
- 空值,
null
- 数组 (list),用空格或逗号作分隔符,
1.5em 1em 0 2em, Helvetica, Arial, sans-serif
- maps, 相当于 JavaScript 的 object,
(key1: value1, key2: value2)
7.1数字运算:+ - * / %
"/"以下为除号运算符:
- 如果值,或值的一部分,是变量或者函数的返回值
- 如果值被圆括号包裹
- 如果值是算数表达式的一部分
p {
font: 10px/8px;
height: 22;
width: 50px;
height: 200px/2;
width: 5px;
}
css显示为:
p {
font: 10px/8px;
height: 22;
width: 50px;
height: 200px/2;
width: 5px;
}
"/"以下不为除号运算符:
只需要用 #{} 插值语句将变量包裹。
8.颜色值运算:颜色值的运算是分段计算进行的,也就是分别计算红色,绿色,以及蓝色的值:
p{
color: #010305+#020406;
}
01+02=03;03+04=07。以此类推。
css显示为:
p {
color: #03070b;
}
8.2:如果颜色值包含 alpha channel(rgba 或 hsla 两种颜色值),必须拥有相等的 alpha 值才能进行运算,因为算术运算不会作用于 alpha 值。
p {
color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}
css显示为:透明度不能算出。
p {
color: rgba(255, 255, 0, 0.75);
}
9.字符串运算:
+号可用于连接字符串:
有加号的在加号左边,连接无引号,结果都有引号,反之。
p{
content: "ni hao"+ wuhan;
content: ni hao+ "wuhan";
}
css显示为:
p {
content: "ni haowuhan";
content: ni haowuhan;
}
9.1:运算表达式与其他值连用时,用空格隔开。
9.2:在字符串中用#{}来运算
p{
content: "ni hao #{null} han";
}
css显示为:
p {
content: "ni hao han";
}