scss中的@mixin、@extend、数据类型、运算符号、内置函数

最新推荐文章于 2024-07-04 22:57:20 发布

积点德

最新推荐文章于 2024-07-04 22:57:20 发布

阅读量1.3k

点赞数

文章标签： scss 前端 css

本文链接：https://blog.csdn.net/m0_67883007/article/details/128458272

版权

混合器：定义混合指令：@mixin 函数名字（参数1，参数2，。。。）{}

没有返回值@return，参数可选可不选

形参一个key或者一组key与value或者是一个list项目列表

参数写自己定义的$常量，或者直接定义新的$常量（$key:value,$key2）

相当于是定义一组样式方便调用使用

用 @include 引用

@mixin alert {
	color: #ffffff;
    backfround-color: #fcfcfc;
}
.alert-warning {
    @include alert;
}

继承

别的选择器 —— 继承别的选择器的样式

css样式中编译出共有属性，随后在编译出单独的属性

继承元素中有后代选择器时：

如果 @extend 失败会收到错误提示。比如： a.important {@extend .notice}，当没有 .notice 选择器时将会报错，只有 h1.notice 包含 .notice 时也会报错，因为 h1 与 a 冲突，会生成新的选择器。会导致多种情况的发生。

所以尽量避免用后代选择器去继承。

可以继承有关别的的继承所有的样式包括子元素的

考虑网页的缓存加载的速度，可以考虑继承，因为css的体积更小。

css层叠样式两个不同的css规则应用到同一个元素上面时，根据选择器的权重大小来判断，权重相同的时候，后面的会有效覆盖

数字：普通数字

字符串：有无引号的区别

颜色：英文颜色、#、rgb

布尔值：ture、false

空值：null

数组（list）：用空格或者逗号分隔开

maps：相当于js里面的对象（object），key与value的形式

+、-、*、/、%

/在css中是分隔符的意思，同样在scss中也是分隔符的意思

三种情况下当作除法运算：

关注