sass中使用@mixin声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值。声明的@mixin通过@include来调用

1、无参数mixin

scss.style

css.style

2、有参数mixin

scss.style

css.style

3、多个参数mixin

调用时可直接传入值,如@include传入参数的个数小于@mixin定义参数的个数,则按照顺序表示,后面不足的使用默认值,如不足的没有默认值则报错。除此之外还可以选择性的传入参数,使用参数名与值同时传入。

scss.style

css.style

4、多组值参数mixin

如果一个参数可以有多组值,如box-shadow、transition等,那么参数则需要在变量后加三个点表示,如$variables...。

scss.style

css.style

5、@content

在sass3.2.0中引入,可以用来解决css3的@media等带来的问题。它可以使@mixin接受一整块样式,接受的样式从@content开始。

scss.style

css.style

混合(mixin)和继承

PS:@mixin通过@include调用后解析出来的样式是以拷贝形式存在的,而下面的继承则是以联合声明的方式存在的,所以从3.2.0版本以后,建议传递参数的用@mixin,而非传递参数类的使用下面的继承%。

sass(混合mixin的调用、@content)的更多相关文章

  1. SASS - 混合(Mixin)

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – 语法 SASS – 变量 SASS- 局部文件(Partial) SASS – 混合(Mixin) SASS ...

  2. Sass的混合-@mixin,@include

    1,无参数,有参数和带默认值参数的@mixin声明sass文件内容: //带参数,默认50@mixin opa($opa:50){ opacity: $opa / 100; filter:alpha( ...

  3. [Sass]混合宏的参数

    [Sass]混合宏的参数--传一个不带值的参数 Sass 的混合宏有一个强大的功能,可以传参,那么在 Sass 中传参主要有以下几种情形: A) 传一个不带值的参数 在混合宏中,可以传一个不带任何值的 ...

  4. [Sass]混合宏

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

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

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

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

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

  7. sass中mixin常用的CSS3

    圆角border-radius @mixin rounded($radius){ -webkit-border-radius: $radius; -moz-border-radius: $radius ...

  8. Vue 项目中添加全局过滤器以及全局混合mixin

    可以在.vue文件中定义局部使用的过滤器 export default{ data(){ return [] }, filters:{ toUpperCase:function(value){ ret ...

  9. sass之mixin的全局引入(vue3.0)

    sass之mixin的全局引入(vue3.0) 1.scss文件(mixin.scss) /* 渐变 */ @mixin gradual($color, $color1){ background: $ ...

随机推荐

  1. json_decode转换数组过程中,结果为null处理办法,百分之百有效

    json_decode这个函数是json_encode的反函数,一般传递数据的时候为了压缩数据,会将数组格式的数据转换成json格式,用到的函数就是json_encode,然后接收到数据之后再用jso ...

  2. 删除outlook2007账户

    开始-设置-控制面板-邮件-显示配置文件-删除-确定

  3. Cboard 实现看板里面图表仪表盘之间的联动

    首先要了解Cboard的概念, 1.看板 2.图表 看Cborad的菜单知道了,首先先设计图表,可以展现未柱状图或者其它图片形式或者数据表格式.然后看板可以由多个图表组合而成. 需求如下: 看板包含两 ...

  4. java 连接 Redis

    使用 jedis-2.9.0.jar 包 连接 Docker 中的 Redis 容器. package redisTest; /** * @Author:YangLianjun * @Descript ...

  5. DP小小结

    入门题 : [Luogu1441]砝码称重 , [NOIP2015]子串 [AHOI2009]中国象棋 , 详见代码 [HNOI2007]梦幻岛宝珠 , 详见代码 [NOIP2012]开车旅行 , 没 ...

  6. 1144G Two Merged Sequences ( 贪心+构造)

    题目:https://codeforces.com/problemset/problem/1144/G 题意: 将一个序列分成两个序列,两个序列中元素的相对顺序保持和原序列不变,使得分出的两个序列一个 ...

  7. Qt随笔 - QSettings

    QSettings类提供了持久的跨平台应用程序设置. 嗯,一句话概括QSettings-- 创建 来看一下原型: QSettings::QSettings(const QString &org ...

  8. 【程序员技术练级】学习一门脚本语言 python(一)文件处理

    现在工作上主要用的语言是java,java在企业级的应用上能够发挥很好的用途,但有时候要做一个小功能时,比如批量更新文件,抓取网页等,这时候用java就显得太笨重了.因此就学习了python这门脚本语 ...

  9. 腾讯蔡晨:十年沉淀,腾讯iOA为企业安全保驾护航

    欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 背景:5月23-24日,以"焕启"为主题的腾讯"云+未来"峰会再广州召开,广东省各级政府机构领导.海 ...

  10. 调用sqlserver中的存储过程

    1.存储过程名 string strSQL = "usp_GetUnReturnPassports"; 2.创建数据库对象 database Database db = Datab ...