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. 当AVPlayer在被释放之后,Player一直监听的时间没有被移除,提示错误的解决办法

    Xcode Consolu打印出来的提示: An instance 0x156608c0 of class AVPlayer was deallocated while key value obser ...

  2. UVA - 11995 模拟

    #include<iostream> #include<cstdio> #include<algorithm> #include<cstdlib> #i ...

  3. redis mac安装配置

    去官网下载redis. 解压后 终端cd 至目标文件夹 编译测试: sudo make test 编译安装: sudo make install 输入redis-server启动服务 停止 redis ...

  4. python学习，day2：列表的使用，增删改合并等

    # coding=utf-8 # Author: RyAn Bi names = ['A','B','C','D'] print(names) print(names[0]) #从0开始记录 prin ...

  5. 蓝桥-青蛙跳杯子（bfs）

    问题描述 X星球的流行宠物是青蛙,一般有两种颜色:白色和黑色. X星球的居民喜欢把它们放在一排茶杯里,这样可以观察它们跳来跳去. 如下图,有一排杯子,左边的一个是空着的,右边的杯子,每个里边有一只青蛙 ...

  6. [转] linux下shell中使用上下键翻出历史命名时出现^[[A^[[A^[[A^[[B^[[B的问题解决,Linux使用退格键时出现^H解决方法

    [From] https://www.zmrbk.com/post-2030.html https://blog.csdn.net/suifengshiyu/article/details/40952 ...

  7. 在Eclipse中添加Servlet-api.jar的方法

    方法一: 正确的加载servlet-api.jar的方法如下: 1:右击项目工程名称 2:Properties 3:  Jvav Build Path 4:  Libraries 5:  Add Ex ...

  8. svn的branch truck tag

    对于branch truck tag一直迷迷糊糊的,想搞明白,但是一直又没来弄明白,最近就用了这种方式来开发 可以我又不是完全了解怎么操作,所以查看了下资料,这个解释得很详细呀,连我都看得懂的东西,真 ...

  9. PIE SDK栅格数据的投影转换

    1. 功能简介 为了适应不同数据显示分析的需要,数据的投影可以进行相应的转换,目前PIE SDK支持多种数据格式的投影转换,下面对栅格数据格式的投影转换功能进行介绍. 2. 功能实现说明 2.1. 实 ...

  10. 安装Samba服务让宿主机和虚拟机共享文件

    安装 samba 服务器之后,很方便的实现 Windows 和 Linux 进行通信. 安装步骤: 1 .在 Ubuntu 系统下面安装 samba 服务: $ sudo apt-get instal ...