sass基础语法-Mixin混合器,%placeholder占位符继承之间的区别

1.背景

如果你的网站中有几处样式相同的话,比如一些颜色和字体,那么可以使用变量来处理这个问题.但是当你的样式越来越多,需要复用大段的样式,独立变量就显得有点吃力了,这时候你可以通过sass中的混合器来进行复用(当然也可以用占位符或者继承,下面会讨论这三者之间的区别).

2.混合器@mixin

特点:可传参

缺点:如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余.

不传参数使用方法:

@mixin cont{color: red;font-size: 14px;
}

调用:

body{@include cont;
}

这个看上去好像跟占位符的用法一样,是的,两者几乎没有很大区别,唯一不同的是当一个页面中多次调用的话,@mixin不会将样式相同的代码进行合并,而使用占位符多次调用的话则会处理这个问题.下面先进行代码演示这个问题的存在,再来接着讨论@mixin混合器.

scss:

@mixin my-color{color: red;
}
.div1{@include my-color;
}.div2{@include my-color;
}

生成之后的css:

/* line 5, ../sass/mixin2.scss */
.div1 {color: red;
}/* line 9, ../sass/mixin2.scss */
.div2 {color: red;
}

但是我想要的结果是这样的:

/* line 13, ../sass/mixin2.scss */
.div1, .div2 {color: green;
}

而使用占位符后:

%my-color{color: green;
}.div3{@extend %my-color;
}.div4{@extend %my-color;
}

生成代码:

/* line 13, ../sass/mixin2.scss */
.div3, .div4 {color: green;
}

相比之下显然是这个代码比较友好一点.
混合器@mixin好处在于它能够传参数进行操作...

多值参数:

调用时可不传参数,则使用默认值,也可直接传入值,如@include传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入。

@mixin cont($color:red,$fontSize:14px){color: $color;font-size: $fontSize;
}body{@include cont();
}

生成代码:

/* line 8, ../sass/mixin.scss */
body {color: red;font-size: 14px;
}

多组参数:
如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如$variables...。
scss:

@mixin box-shadow($shadow...) {-webkit-box-shadow:$shadow;box-shadow:$shadow;
}
.box{border:1px solid #ccc;@include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}

css:

.box {border: 1px solid #ccc;-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 3px 3px rgba(0, 0, 0, 0.3), 0 4px 4px rgba(0, 0, 0, 0.3);box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3), 0 3px 3px rgba(0, 0, 0, 0.3), 0 4px 4px rgba(0, 0, 0, 0.3);
}

如果不写这三个点，就会报错：混合器只带一个参数，却传入了3个参数

以上小结:当大量复用样式中需要使用到变量的时候可以使用混合器@mixin进行重写,例如圆角的兼容性,处理浏览器前缀等问题,否则使用继承@extend进行重写.如有不足,希望大神可以留言指点一丢丢,有问题也可以一起讨论.

sass基础语法-Mixin混合器,%placeholder占位符继承之间的区别相关推荐

Placeholder 占位符
Placeholder 占位符一般在开发过程中,先用这个占用空间的位置,等以后用其他的替换.
sass/scss语法@mixin
----------------------------题外话--------------------------------- css新增HSL颜色模式,h色调(360度圆盘),s饱和度(百分比), ...
玩玩机器学习3——TensorFlow基础之Session基本运算、占位符和变量的使用
通过TensorFlow的矩阵和常量的"加减乘除"运算,讲一下Session.变量以及占位符的使用目录 Session创建会话与运算变量的使用占位符的使用 Session创建 ...
Could not resolve placeholder 占位符不能被解析
Could not resolve placeholder 'active.logging.path' in value "${active.logging.path}" spri ...
JS基础语法(02)-JS的转义符
转义符: \ 改变原来符号的作用就叫转义符 /*** 转义符: `\` 改变原来符号的作用就叫转义符* \" :输出双引号* \t:水平制表符,说人话就是多打几个空格* \n:换行符* \\ ...
JS基础语法(03)-前自增与后自增区别
/*前自增与后自增的异同点相同点:无论是前自增还是后自增,对于变量而言,没有区别,都是自身+1不同点:* 前自增:先+1(变量自身+1),后赋值(将变量的值赋值给自增表达式的结果)* 后自增:先赋值, ...
mysql 占位符出错_占位符报语法错误
新增和更新方法类里面的占位符能够跑起来,但是删除和查询单个女神里面的占位符就会报语法错误,将占位符手动改为具体整型数字就可以正确运行. 以下是部分源码.//删除功能代码块 public void de ...
【C】printf()使用占位符精细控制输出格式
受限于表格宽度,本文在电脑上阅读体验更好. printf()的精细格式控制在大部分教科书里都没有详细描述,事实上也没必要.但有时学生OJ做题时又需要,建议老师们收藏本文,作为资料存档,待学生们需要时发 ...
tensorflow中张量、常量、变量、占位符
引言从实例出发 #先导入TensorFlow import tensorflow as tf# Create TensorFlow object called hello_constant hell ...
html 空格占位符_HTML常用英文单词，快来背单词吧
页面布局(layout) header 头部/页眉: index 首页/索引: logo 标志: nav/sub_nav 导航/子导航: banner 横幅广告: main/content 主体/内容 ...

sass基础语法-Mixin混合器,%placeholder占位符继承之间的区别

sass基础语法-Mixin混合器,%placeholder占位符继承之间的区别相关推荐

最新文章

热门文章