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. 12、OpenCV Python 图像梯度

    __author__ = "WSX" import cv2 as cv import numpy as np def lapalian_demo(image): #拉普拉斯算子 # ...

  2. [jvm] JVM体系结构

    一.jvm 运行时数据区域 程序计数器 java虚拟机栈 本地方法栈 java堆 方法区 运行时常量池 直接内存(非JVM区域) 二.深入探讨HotSpot虚拟机在Java堆中对象分配.布局和访问的全 ...

  3. 条目十五《注意strng实现的多样性》

    条目十五<注意strng实现的多样性> 下面以一个打印string空对象的大小切入本条目: #include #include using namespace std; int main( ...

  4. mysql的唯一索引UNIQUE

    创建唯一索引的目的不是为了提高访问速度,而只是为了避免数据出现重复.唯一索引可以有多个但索引列的值必须唯一,索引列的值允许有空值.如果能确定某个数据列将只包含彼此各不相同的值,在为这个数据列创建索引的 ...

  5. 绿色版NVM安装与配置详细说明

      绿色版本(不需要安装,直接解压,然后配置环境变量等) 由于最初发布的nvm并不支持window,所以如果希望可以像在*nix上一样控制node的版本,有两种选择: nvm-windows nodi ...

  6. Qt 学习之路 2(35):文件

    Qt 学习之路 2(35):文件 豆子 2013年1月5日 Qt 学习之路 2 12条评论 文件操作是应用程序必不可少的部分.Qt 作为一个通用开发库,提供了跨平台的文件操作能力.从本章开始,我们来了 ...

  7. SQL 随手记

    SQL 学习片段: 建立一个简单的联系数据表, mobile_number char(11).mobile_province nvarchar(50).mobile_area nvarchar(200 ...

  8. XMAL基础

    XMAL基础(WPF编程宝典) XAML基础规则 XAML文档中的每个元素都映射为.Net类的一个实例.元素名称也完全对应于类名.例如:元素<Button>指示WPF创建Button对象 ...

  9. 设计模式学习总结(十)责任链模式(Chain Of Responsibility)

    责任链主要指通过一连串的操作来实现某项功能或者在处理相关的业务时,对于自己的业务则进行处理,反之,对于不属于自己的业务,则进行下发!   一.示例展示: 以下例子主要通过对煤矿对井下警告信息的处理来进 ...

  10. DB Intro - MongoDB Relations

    https://www.quackit.com/mongodb/tutorial/mongodb_create_a_relationship.cfm