[Sass]混合宏的参数
[Sass]混合宏的参数--传一个不带值的参数
Sass 的混合宏有一个强大的功能,可以传参,那么在 Sass 中传参主要有以下几种情形:
A) 传一个不带值的参数
在混合宏中,可以传一个不带任何值的参数,比如:
- @mixin border-radius($radius){
- -webkit-border-radius: $radius;
- border-radius: $radius;
- }
在混合宏“border-radius”中定义了一个不带任何值的参数“$radius”。
在调用的时候可以给这个混合宏传一个参数值:
- .box {
- @include border-radius(3px);
- }
这里表示给混合宏传递了一个“border-radius”的值为“3px”。
编译出来的 CSS:
- .box {
- -webkit-border-radius: 3px;
- border-radius: 3px;
- }
[Sass]混合宏的参数--传一个带值的参数
在 Sass 的混合宏中,还可以给混合宏的参数传一个默认值,例如:
- @mixin border-radius($radius:3px){
- -webkit-border-radius: $radius;
- border-radius: $radius;
- }
在混合宏“border-radius”传了一个参数“$radius”,而且给这个参数赋予了一个默认值“3px”。
在调用类似这样的混合宏时,会多有一个机会,假设你的页面中的圆角很多地方都是“3px”的圆角,那么这个时候只需要调用默认的混合宏“border-radius”:
- .btn {
- @include border-radius;
- }
编译出来的 CSS:
- .btn {
- -webkit-border-radius: 3px;
- border-radius: 3px;
- }
但有的时候,页面中有些元素的圆角值不一样,那么可以随机给混合宏传值,如:
- .box {
- @include border-radius(50%);
- }
编译出来的 CSS:
- .box {
- -webkit-border-radius: 50%;
- border-radius: 50%;
- }
[Sass]混合宏的参数--传多个参数
Sass 混合宏除了能传一个参数之外,还可以传多个参数,如:
- @mixin center($width,$height){
- width: $width;
- height: $height;
- position: absolute;
- top: 50%;
- left: 50%;
- margin-top: -($height) / 2;
- margin-left: -($width) / 2;
- }
在混合宏“center”就传了多个参数。在实际调用和其调用其他混合宏是一样的:
- .box-center {
- @include center(500px,300px);
- }
编译出来 CSS:
- .box-center {
- width: 500px;
- height: 300px;
- position: absolute;
- top: 50%;
- left: 50%;
- margin-top: -150px;
- margin-left: -250px;
- }
有一个特别的参数“…”。当混合宏传的参数过多之时,可以使用参数来替代,如:
- @mixin box-shadow($shadows...){
- @if length($shadows) >= 1 {
- -webkit-box-shadow: $shadows;
- box-shadow: $shadows;
- } @else {
- $shadows: 0 0 2px rgba(#000,.25);
- -webkit-box-shadow: $shadow;
- box-shadow: $shadow;
- }
- }
在实际调用中:
- .box {
- @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
- }
编译出来的CSS:
- .box {
- -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
- box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
- }
[Sass]混合宏的参数--混合宏的不足
混合宏在实际编码中给我们带来很多方便之处,特别是对于复用重复代码块。但其最大的不足之处是会生成冗余的代码块。比如在不同的地方调用一个相同的混合宏时。如:
- @mixin border-radius{
- -webkit-border-radius: 3px;
- border-radius: 3px;
- }
- .box {
- @include border-radius;
- margin-bottom: 5px;
- }
- .btn {
- @include border-radius;
- }
示例在“.box”和“.btn”中都调用了定义好的“border-radius”混合宏。先来看编译出来的 CSS:
- .box {
- -webkit-border-radius: 3px;
- border-radius: 3px;
- margin-bottom: 5px;
- }
- .btn {
- -webkit-border-radius: 3px;
- border-radius: 3px;
- }
上例明显可以看出,Sass 在调用相同的混合宏时,并不能智能的将相同的样式代码块合并在一起。这也是 Sass 的混合宏最不足之处。
像这样:
- .box {
- margin-bottom: 5px;
- }
- .btn, .box {
- @include border-radius;
- }
[Sass]混合宏的参数的更多相关文章
- [Sass]混合宏
[Sass]混合宏-声明混合宏 如果整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使 ...
- Sass混合宏、继承、占位符
混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...
- Sass 混合宏、继承、占位符 详解
混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...
- css编译工具Sass中混合宏,继承,占位符分别在什么时候使用
//SCSS中混合宏使用 @mixin mt($var){ margin-top: $var; } .block { @include mt(5px); span { display:block; @ ...
- sass---Sass混合宏、继承、占位符
混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...
- sass中 混合宏 VS 继承 VS 占位符 各自的使用时机和特点
初学者都常常纠结于这个问题“什么时候用混合宏,什么时候用继承,什么时候使用占位符?”其实他们各有各的优点与缺点,先来看看他们使用效果: a) Sass 中的混合宏使用 举例代码见 2-24 行 编译出 ...
- Sass之混合宏、继承、占位符
1.混合宏. 当样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无法达到我们目的了.这个时候混合宏就派上用场了. 而使用混合宏时,首先要声明混合宏,而声明混合宏时有两种,不带参数混合宏和带参数 ...
- scss 初学笔记 二 混合宏
混合宏 格式 @mixin 定义混合宏 (相当于变量声明 var $ ?) //不带参数混合宏 @mixin borderRadius{ -webkit-border-radius: 5px; b ...
- 详解scss的继承、占位符和混合宏
1.继承和占位符 两者都是通过@extend来引用. 1.1 继承 一个已经存在的css样式类,可以被其他样式类继承. 例如,实现以下css样式: .btn, .btn--primary, .btn- ...
随机推荐
- mysql-You can’t specify target table for update in FROM clause错误
mysql中You can't specify target table for update in FROM clause错误的意思是说,不能先select出同一表中的某些值,再update这个表( ...
- neo4j关闭和开启密码访问权限
本例:neo4j-enterprise-2.3.1版本 neo4j默认安装是开启访问密码验证 可以发现,在conf/下的neo4j-server.properties配置文件 # Require (o ...
- ORB-SLAM(五)优化
ORB-SLAM作为单目SLAM,其精度很大程度上决定于帧与帧之间的位姿优化的是否准确.因此优化(optimization)在ORB-SLAM里面扮演了很重要的角色.这一小节探讨一下ORB-SLAM里 ...
- oracle Entity db.Database.SqlQuery ORA-01843: 无效的月份
原因是oracle的日期格式化格式和本地语言环境的日期格式不一致导致的. 一般情景为oralce格式为英文格式 本地服务器或者开发机的环境为中文环境. 使用Dbcontext 实例一般不会有问题. 但 ...
- Bzoj4008 [HNOI2015]亚瑟王
Time Limit: 20 Sec Memory Limit: 512 MBSec Special Judge Submit: 1009 Solved: 605[Submit][Status] ...
- Nginx配置SSL证书部署HTTPS网站
1.购买ssl证书 购买网站:沃通 2.上传证书到nginx服务器,然后进行解压. 解压后的的效果: [root@bubidev-ng3 nginx]# pwd/etc/nginx [root@bub ...
- docker develop django
$ docker pull django $ docker run -it -v $(pwd):/usr/src/app -p 8000:8000 django /bin/bash
- sql笨办法同步数据
Helpers.SqlHelper sqlHelper = new Helpers.SqlHelper("server=***;database=Cms;user id=sa;passwor ...
- Couldn't open CUDA library cublas64_80.dll etc. tensorflow-gpu on windows
I c:\tf_jenkins\home\workspace\release-win\device\gpu\os\windows\tensorflow\stream_executor\dso_load ...
- Spring MVC学习笔记——SiteMesh的使用(转)
转自 SiteMesh的使用 SiteMesh的介绍就不多说了,主要是用来统一页面风格,减少重复编码的. 它定义了一个过滤器,然后把页面都加上统一的头部和底部. 需要先在WEB-INF/lib下引入s ...