[Sass]混合宏的参数--传一个不带值的参数

Sass 的混合宏有一个强大的功能,可以传参,那么在 Sass 中传参主要有以下几种情形:

A) 传一个不带值的参数

在混合宏中,可以传一个不带任何值的参数,比如:

  1. @mixin border-radius($radius){
  2. -webkit-border-radius: $radius;
  3. border-radius: $radius;
  4. }

在混合宏“border-radius”中定义了一个不带任何值的参数“$radius”。

在调用的时候可以给这个混合宏传一个参数值:

  1. .box {
  2. @include border-radius(3px);
  3. }

这里表示给混合宏传递了一个“border-radius”的值为“3px”。

编译出来的 CSS:

  1. .box {
  2. -webkit-border-radius: 3px;
  3. border-radius: 3px;
  4. }

[Sass]混合宏的参数--传一个带值的参数

在 Sass 的混合宏中,还可以给混合宏的参数传一个默认值,例如:

  1. @mixin border-radius($radius:3px){
  2. -webkit-border-radius: $radius;
  3. border-radius: $radius;
  4. }

在混合宏“border-radius”传了一个参数“$radius”,而且给这个参数赋予了一个默认值“3px”。

在调用类似这样的混合宏时,会多有一个机会,假设你的页面中的圆角很多地方都是“3px”的圆角,那么这个时候只需要调用默认的混合宏“border-radius”:

  1. .btn {
  2. @include border-radius;
  3. }

编译出来的 CSS:

  1. .btn {
  2. -webkit-border-radius: 3px;
  3. border-radius: 3px;
  4. }

但有的时候,页面中有些元素的圆角值不一样,那么可以随机给混合宏传值,如:

  1. .box {
  2. @include border-radius(50%);
  3. }

编译出来的 CSS:

  1. .box {
  2. -webkit-border-radius: 50%;
  3. border-radius: 50%;
  4. }

[Sass]混合宏的参数--传多个参数

Sass 混合宏除了能传一个参数之外,还可以传多个参数,如:

  1. @mixin center($width,$height){
  2. width: $width;
  3. height: $height;
  4. position: absolute;
  5. top: 50%;
  6. left: 50%;
  7. margin-top: -($height) / 2;
  8. margin-left: -($width) / 2;
  9. }

在混合宏“center”就传了多个参数。在实际调用和其调用其他混合宏是一样的:

  1. .box-center {
  2. @include center(500px,300px);
  3. }

编译出来 CSS:

  1. .box-center {
  2. width: 500px;
  3. height: 300px;
  4. position: absolute;
  5. top: 50%;
  6. left: 50%;
  7. margin-top: -150px;
  8. margin-left: -250px;
  9. }

有一个特别的参数“”。当混合宏传的参数过多之时,可以使用参数来替代,如:

  1. @mixin box-shadow($shadows...){
  2. @if length($shadows) >= 1 {
  3. -webkit-box-shadow: $shadows;
  4. box-shadow: $shadows;
  5. } @else {
  6. $shadows: 0 0 2px rgba(#000,.25);
  7. -webkit-box-shadow: $shadow;
  8. box-shadow: $shadow;
  9. }
  10. }

在实际调用中:

  1. .box {
  2. @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
  3. }

编译出来的CSS:

  1. .box {
  2. -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  3. box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
  4. }

[Sass]混合宏的参数--混合宏的不足

混合宏在实际编码中给我们带来很多方便之处,特别是对于复用重复代码块。但其最大的不足之处是会生成冗余的代码块。比如在不同的地方调用一个相同的混合宏时。如:

  1. @mixin border-radius{
  2. -webkit-border-radius: 3px;
  3. border-radius: 3px;
  4. }
  5.  
  6. .box {
  7. @include border-radius;
  8. margin-bottom: 5px;
  9. }
  10.  
  11. .btn {
  12. @include border-radius;
  13. }

示例在“.box”和“.btn”中都调用了定义好的“border-radius”混合宏。先来看编译出来的 CSS:

  1. .box {
  2. -webkit-border-radius: 3px;
  3. border-radius: 3px;
  4. margin-bottom: 5px;
  5. }
  6.  
  7. .btn {
  8. -webkit-border-radius: 3px;
  9. border-radius: 3px;
  10. }

上例明显可以看出,Sass 在调用相同的混合宏时,并不能智能的将相同的样式代码块合并在一起。这也是 Sass 的混合宏最不足之处。

像这样:

  1. .box {
  2.  
  3. margin-bottom: 5px;
  4.  
  5. }
  6.  
  7. .btn, .box {
  8.  
  9. @include border-radius;
  10.  
  11. }

[Sass]混合宏的参数的更多相关文章

  1. [Sass]混合宏

    [Sass]混合宏-声明混合宏 如果整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使 ...

  2. Sass混合宏、继承、占位符

    混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...

  3. Sass 混合宏、继承、占位符 详解

    混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...

  4. css编译工具Sass中混合宏,继承,占位符分别在什么时候使用

    //SCSS中混合宏使用 @mixin mt($var){ margin-top: $var; } .block { @include mt(5px); span { display:block; @ ...

  5. sass---Sass混合宏、继承、占位符

    混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...

  6. sass中 混合宏 VS 继承 VS 占位符 各自的使用时机和特点

    初学者都常常纠结于这个问题“什么时候用混合宏,什么时候用继承,什么时候使用占位符?”其实他们各有各的优点与缺点,先来看看他们使用效果: a) Sass 中的混合宏使用 举例代码见 2-24 行 编译出 ...

  7. Sass之混合宏、继承、占位符

    1.混合宏. 当样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无法达到我们目的了.这个时候混合宏就派上用场了. 而使用混合宏时,首先要声明混合宏,而声明混合宏时有两种,不带参数混合宏和带参数 ...

  8. scss 初学笔记 二 混合宏

    混合宏 格式  @mixin 定义混合宏 (相当于变量声明 var  $ ?) //不带参数混合宏 @mixin borderRadius{ -webkit-border-radius: 5px; b ...

  9. 详解scss的继承、占位符和混合宏

    1.继承和占位符 两者都是通过@extend来引用. 1.1 继承 一个已经存在的css样式类,可以被其他样式类继承. 例如,实现以下css样式: .btn, .btn--primary, .btn- ...

随机推荐

  1. 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这个表( ...

  2. neo4j关闭和开启密码访问权限

    本例:neo4j-enterprise-2.3.1版本 neo4j默认安装是开启访问密码验证 可以发现,在conf/下的neo4j-server.properties配置文件 # Require (o ...

  3. ORB-SLAM(五)优化

    ORB-SLAM作为单目SLAM,其精度很大程度上决定于帧与帧之间的位姿优化的是否准确.因此优化(optimization)在ORB-SLAM里面扮演了很重要的角色.这一小节探讨一下ORB-SLAM里 ...

  4. oracle Entity db.Database.SqlQuery ORA-01843: 无效的月份

    原因是oracle的日期格式化格式和本地语言环境的日期格式不一致导致的. 一般情景为oralce格式为英文格式 本地服务器或者开发机的环境为中文环境. 使用Dbcontext 实例一般不会有问题. 但 ...

  5. Bzoj4008 [HNOI2015]亚瑟王

    Time Limit: 20 Sec  Memory Limit: 512 MBSec  Special Judge Submit: 1009  Solved: 605[Submit][Status] ...

  6. Nginx配置SSL证书部署HTTPS网站

    1.购买ssl证书 购买网站:沃通 2.上传证书到nginx服务器,然后进行解压. 解压后的的效果: [root@bubidev-ng3 nginx]# pwd/etc/nginx [root@bub ...

  7. docker develop django

    $ docker pull django $ docker run -it -v $(pwd):/usr/src/app -p 8000:8000 django /bin/bash

  8. sql笨办法同步数据

    Helpers.SqlHelper sqlHelper = new Helpers.SqlHelper("server=***;database=Cms;user id=sa;passwor ...

  9. 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 ...

  10. Spring MVC学习笔记——SiteMesh的使用(转)

    转自 SiteMesh的使用 SiteMesh的介绍就不多说了,主要是用来统一页面风格,减少重复编码的. 它定义了一个过滤器,然后把页面都加上统一的头部和底部. 需要先在WEB-INF/lib下引入s ...