混合器一个很重要特性就是可以传递参数,可以根据不同场景来定制css代码的复用。极大提高了混合器的适用性,看如下scss代码实例:

@mixin makeradius($radius) {
border-radius: $radius;
}
antTest{
background-color: blue;
border: 4px solid #ccc;
@include makeradius(8px);
}

  编译生成的css代码如下:

antTest{
background-color: blue;
border: 4px solid #ccc;
border-radius: 8px;
}

  这样的话,圆角尺寸就不是一个固定值,而是可以根据需要进行定制。再看一段scss代码实例:

@mixin setborder($color, $width) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p {
@include setborder(blue, 2px);
}

  如果混合器没带参数,那么可以省略小括号;如果带有参数,必须带有小括号。参数与参数之间用逗号分隔。也可以给混合器的参数设置默认值,看如下scss代码代码实例:

@mixin setborder($color, $width: 2px) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
p {
@include setborder(green);
}
h1 {
@include setborder(green, 4px);
}

  上面的代码中,设置第二个参数$width默认值是2px,如果没有传递此参数,那么就直接使用默认值。如果传递了此参数,那么新的参数将会覆盖默认参数。传递参数也可以使用键值对的方式,scss代码实例如下:

@mixin setborder($color, $width) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
h1 {
@include setborder($color: green, $width: 4px);
}

  参数变量(...)也可以在@include引用混合器的时候,将值列表中的值逐条作为参数引用:

@mixin colorlist($text, $background, $border) {
color: $text;
background-color: $background;
border-color: $border;
}
$values: #ccc, #0ff, #fff;
.orignal{
@include colorlist($values...);
}

scss-@mixin传参的更多相关文章

  1. scss-null在@mixin传参中的应用

    可以给混合器声明参数,以便灵活的配置相关属性值,看如下scss代码: @mixin antzone-div($color, $font-size) { color:$color; font-size: ...

  2. git commit -a -m "M 1、引入mixin,公共样式mixin传参处理;";git push origin master:master

    <script> import wepy from 'wepy' import api from '../api/api' export default class recharge ex ...

  3. Less-minxin传参

    //mixin传参 --简单传参,example: .border-radius(@radius) { -webkit-border-radius: @radius; -moz-border-radi ...

  4. mixin 在传参中可以出现 参数 在类内部可以定义 作用域

    mixin 在传参中可以出现 参数  在类内部可以定义

  5. Oracle 用Drapper进行like模糊传参查询需要在参数值前后带%符合

    Oracle 用Drapper进行like模糊传参查询需要在参数值前后带%符合   string sqlstr="select * from tblname where name like ...

  6. Angular页面传参的四种方法

    1. 基于ui-router的页面跳转传参 (1)在Angular的app.js中用ui-route定义路由,比如有两个页面, 一个页面(producers.html)放置了多个producers,点 ...

  7. 使用java传参调用exe并且获取程序进度和返回结果的一种方法

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 在某个项目中需要考虑使用java后台调用由C#编写的切图程序( ...

  8. Oracle Sales Cloud:报告和分析(BIEE)小细节2——利用变量和过滤器传参(例如,根据提示展示不同部门的数据)

    在上一篇随笔中,我们建立了部门和子部门的双提示,并将部门和子部门做了关联.那么,本篇随笔我们重点介绍利用建好的双提示进行传参. 在操作之前,我们来看一个报告和分析的具体需求: [1] 两个有关联的提示 ...

  9. js动态绑定click事件时function传参问题

    今天碰到了这样一个问题,我在javascript中动态创建了一个button, 然后我想给改button添加click事件,绑定的function想要传入一个变量参数, 一开始我想直接通过函数传参传进 ...

  10. C#进阶系列——WebApi 接口参数不再困惑:传参详解

    前言:还记得刚使用WebApi那会儿,被它的传参机制折腾了好久,查阅了半天资料.如今,使用WebApi也有段时间了,今天就记录下API接口传参的一些方式方法,算是一个笔记,也希望能帮初学者少走弯路.本 ...

随机推荐

  1. CSS复合选择器

    复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签. 交集选择器 交集选择器由两个选择器构成,其中第一个为标签选择器,第二个为class选择器, ...

  2. 品味ZooKeeper之纵古观今_1

    品味ZooKeeper之纵古观今 本章思维导图 这一系列主要是从整体到细节来品味Zookeeper,先从宏观来展开,介绍zookeeper诞生的原因,接着介绍整体设计框架,接着是逐个细节击破. 本章是 ...

  3. java技术

    线程池的原理及实现:https://blog.csdn.net/hsuxu/article/details/8985931 Java高级工程师面试题总结及参考答案:https://www.cnblog ...

  4. Tomcat 部署项目的几种常见方式

    转自:https://www.cnblogs.com/yuht/p/5714624.html https://www.cnblogs.com/ysocean/p/6893446.html Tomcat ...

  5. Hibernate学习笔记(一)—— Hibernate概述及入门

    一.Hibernatea概述 1.1 什么是Hibernate? 在介绍什么是Hibernate之前,我们先讨论一下什么是框架?框架是用来提高开发效率的,框架封装好了一些功能,我们需要使用这些功能时, ...

  6. Android newsClient 小实例应用

    1.newsClient新闻客户端涉及知识点汇总: (1)ListView(用来显示消息) (2)开子线程去服务器取数据 (3)解析xml文件 (4)利用handler或者runOnUiThread( ...

  7. elementui bug ..

    .el-menu { overflow: hidden !important;} element 菜单导航栏 会 超出 父组件一点..在组件中加上上边那句来隐藏!!!

  8. springboot(四)-项目部署

    Springboot和我们之前学习的web应用程序不一样,其本质上是一个java应用程序.部署的方式有两种:打成jar包,或者打成war包. 打成jar包 切换到项目文件中 然后mvn install ...

  9. oracle 笔记---(四)__数据字典

    数据字典 user_*  该视图存储了关于当前用户所拥有的对象的信息.(即所有在该用户模式下的对象) all_* 该试图存储了当前用户能够访问的对象的信息.(与user_*相比,all_* 并不需要拥 ...

  10. 智能手表ticwatch穿戴体验

    前言 可穿戴设备近几年越来越火,最开始是谷歌眼睛.手环,再到手表.VR眼镜,相信未来几年这片领域依旧火热~ 自从谷歌发布Android Wear.苹果发布Apple Watch之后,智能手表的战役就正 ...