[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- ...
随机推荐
- Java防止SQL注入(转)
一.SQL注入简介 SQL注入是比较常见的网络攻击方式之一,它不是利用操作系统的BUG来实现攻击,而是针对程序员编程时的疏忽,通过SQL语句,实现无帐号登录,甚至篡改数据库. 二.SQL注入攻击的总体 ...
- 【Android群英传】学习笔记(一)
本系列博客为笔者在学习<Android群英传>的学习总结 Android相关工具镜像连接:http://www.androiddevtools.cn/ Dalvik与ART Dalvik包 ...
- python gettitle.py
#!/usr/bin/env python # coding=utf-8 import threading import requests import Queue import sys import ...
- Day11-协程/异步IO/RabbitMQ
协程,又称微线程,纤程.英文名Coroutine.一句话说明什么是线程:协程是一种用户态的轻量级线程. 协程拥有自己的寄存器上下文和栈.协程调度切换时,将寄存器上下文和栈保存到其他地方,在切回来的时候 ...
- 解决Python中不能输入汉字的问题
我们在python的IDE中有时候会输入中文,python对中文不是太友好.现在我们就解决这个问题.一般情况下在你的代码前面加入: # coding: utf-8 reload(sys)sys.set ...
- mac电脑http代理服务设置公司内网的相关配置
哈喽,亲爱的小伙伴们 ,今天给大家分享一下公司内网配置 http代理服务设置及外网访问 ,<这是mac电脑的噢> ===链接地址我的github项目 https://github.c ...
- SQLServer------存储过程在C#中的使用方法
//存储过程的使用 PSContext _db = new PSContext(); _db.Database.CommandTimeout = ; Type t = typeof(CompanySt ...
- js拖拽原理和碰撞原理
拖拽的原理onmousedown 选择元素onmousemove 移动元素onmouseup 释放元素 1:如果拖拽的时候有文字:被选中,会产生问题原因:当鼠标按下的时如果页面中有文字或者图片被选中的 ...
- UITextField set placeholderColor and UITextField set clearButton Image
self.usernameTextField.tintColor = [UIColor whiteColor]; [self.usernameTextField setValue:UIColorFro ...
- cpp 调用python
在用cpp调用python时, 出现致命错误: no module named site , 原因解释器在搜索路径下没有找到python库.可以在调用Py_Initialize前,调用 Py_Se ...