混合器一个很重要特性就是可以传递参数,可以根据不同场景来定制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. SDUT OJ 多项式求和

    多项式求和 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Description 多项式描述 ...

  2. 网站安装 https 证书

    1.点击进入官网  数安时代 2.点击选择你需要的ssl 证书 3.点击进入选择 免费申请 ,填写你需要 安装 ssl 证书 的域名 4.根据你的需求选择,我这里选择的是 数安时代 ,接下来按照步骤操 ...

  3. java程序员的从0到1:统计某字符串在某文件中出现的次数(面试题)

    目录: 1. 编程题目 2. 方法一 3. 方法二 4. 方法三 5. 方法四 6. 总结 正文: 1. 编程题目 写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数. 2. ...

  4. Training set,Gallery set 和Probe set的区别

    这段时间看了CVPR2017的这篇论文”SphereFace:Deep Hypersphere Embedding for Face Recognition" 里面有提到Probe set, ...

  5. display inline-block 间隔

    1.如果li横排用display:inline-block; 则li之间不能有间隔 必须连着一起,所以才一般用float:left; .today-wrap{ position: relative; ...

  6. PIE SDK栅格增强控制

    1. 功能简介 亮度是指发光体(反光体)表面发光(反光)强弱的物理量:对比度指的是一幅图像中明暗区域最亮的白和最暗的黑之间不同亮度层级的测量:透明度是描述光线透过的程度 栅格数据增强控制主要是通过对亮 ...

  7. Merge Sorted Array II

    Merge two given sorted integer array A and B into a new sorted integer array. Example A=[1,2,3,4] B= ...

  8. Java 写入pdf文件

    import java.awt.Color; import java.io.File; import java.io.FileOutputStream; import com.lowagie.text ...

  9. 切换myEclipse工作空间后设置,myEclipse添加注释/设置豆沙背景颜色/调节字体大小

    一.添加注释 操作位置: 注释规范 Files/** * @文件名称: ${file_name} * @文件路径: ${package_name} * @功能描述: ${todo} * @作者: ${ ...

  10. Python+Selenium操作select下拉框

    首先需要倒入Select模块: from selenium.webdriver.support.select import Select 常用方法: 通过索引定位:select_by_index() ...