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. (原創) Gvim 個人習慣常用設定 (vim)

    不定期更新這篇,因為查詢到好用的設定或者插件就會更新自己的設定. "set nocompatible let $LANG='zh_TW.UTF-8' set langmenu=zh_tw.u ...

  2. libcaffe.so.1.0.0: cannot open shared object file: No such file or directory 运行时报错

    caffe安装好后lib没有配置到/usr/lib或/usr/local/lib中,需手动配置: sudo vim ~/.bashrc export LD_LIBRARY_PATH=your_path ...

  3. C++_友元1-友元类是什么

    友元函数:不是类的成员函数,但是能够访问类的私有数据成员. 之前有个矛盾就是规定非成员函数不能直接访问类的私有数据,但是这会儿却可以,但那只是针对常规非成员函数而言,特殊的非成员函数就可以访问类的私有 ...

  4. [JLOI2015]管道连接（斯坦纳树）

    [Luogu3264] 原题解 多个频道,每个频道的关键点要求相互联通 详见代码,非常巧妙 #include<cstdio> #include<iostream> #inclu ...

  5. C++ GUI Qt4 编程 （第二版）

    [加拿大]JasminBlanchette [英]MarkSummerfield . 电子工业 2008. 前几天的问题多是因为版本不兼容的问题. QT本身Q4 Q5就有版本问题,然后集成到VS08 ...

  6. Pseudoprime numbers---费马小定理

    Pseudoprime numbers Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 13406   Accepted: 5 ...

  7. 【总结】kali(amd64)中安装nessus

    下载nessus: http://www.tenable.com/products/nessus/select-your-operating-system 注册nessus家庭版 http://www ...

  8. PHP创建自己的Composer包方法

    原文地址:http://www.jb51.net/article/137923.htm

  9. Tortoise SVN 快速操作手册

    1.库的存储结构 版本库文件结构如图所示: Code文件夹为源码文件夹,doc为文档目录文件夹, 1.1 branch:分枝文件夹 当多个人合作,可能有这样的情况出现:John突然有个想法,跟原先的设 ...

  10. (转)Linux curl命令参数详解

    Linux curl命令参数详解 命令:curl在Linux中curl是一个利用URL规则在命令行下工作的文件传输工具,可以说是一款很强大的http命令行工具.它支持文件的上传和下载,是综合传输工具, ...