mixin是可以重用的一组CSS声明。mixin有助于减少重复代码,只需声明一次,就可在文件中引用。

可以看出,mixin类似变量,不同的是变量存储值,mixin存储一组css声明。mixin可以传入参数。

要创建一个mixin,可以使用@mixin指令:

@mixin mixin-name() {
/* css 声明 */
}

一旦创建了mixin,就可以引用它,使用@include指令后跟mixin的名称:

...
@include mixin-name();
...

举例说明

mixin的一个常见用法是浏览器厂商前缀。

当浏览器厂商添加新的非标准CSS特性时,通常会标明厂商前缀,表示该特性只在特定浏览器上有效。

例如,-webkit-border-radius在Chrome和Safari浏览器有效,而-mozilla-border-radius在Firefox上有效。

对于这样的特性,通常需要包含所有浏览器的对应特性声明,以便兼容这些浏览器,这里就可以用minxin来实现:

@mixin border-radius() {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px;
} aside {
border: 1px solid orange;
@include border-radius();
}

经过编译会输出以下css内容:

aside {
border: 1px solid orange;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
-ms-border-radius: 8px;
border-radius: 8px; }

mixin 参数

可以给mixin传入参数,mixin中的css声明将更加灵活。

示例:

@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
} aside {
border: 1px solid orange;
@include border-radius(7px);
}

经过编译会输出以下css内容:

aside {
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
-ms-border-radius: 7px;
border-radius: 7px; }

mixin是sass中一个非常有用的功能。

SASS - 混合(Mixin)的更多相关文章

  1. sass(混合mixin的调用、@content)

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

  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. autoprefixer安装或者里sass的$mixin处理浏览器前缀

    Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器.它适用于普通的CSS,可以实现css3代码自动补全.也可以轻松跟Sass,LESS及Stylus集成,在CSS编译 ...

  9. hbuilder和sublime的autoprefixer安装或者里sass的$mixin处理浏览器前缀

    Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器.它适用于普通的CSS,可以实现css3代码自动补全.也可以轻松跟Sass,LESS及Stylus集成,在CSS编译 ...

随机推荐

  1. [NOIP 2017 day1]逛公园

    题目描述 策策同学特别喜欢逛公园. 公园可以看成一张 N 个点 M 条边构成的有向图,且没有自环和重边.其中 1 号点是公园的入口, N 号点是公园的出口,每条边有一个非负权值,代表策策经过这条边所要 ...

  2. endnote的使用

    下载网址: https://support.clarivate.com/Endnote/s/article/EndNote-Installer-download?language=en_US 关联of ...

  3. 安装数据库Typical path for xclock: /usr/X11R6/bin/xclock 错误问题

    [oracle@localhost database]$ ./runInstaller Starting Oracle Universal Installer... Checking Temp spa ...

  4. Redis Cluster 4.0.9 集群安装搭建

    Redis Cluster 4.0.9集群搭建步骤:yum install -y gcc g++ gcc-c++ make openssl cd redis-4.0.9 make mkdir -p / ...

  5. python 数据处理 对txt文件进行数据处理

    数据: 对txt文件进行数据处理: txt_file_path = "basic_info.txt" write_txt_file_path = "basic_info1 ...

  6. Java生鲜电商平台-优惠券系统设计详解

    Java生鲜电商平台-优惠券系统设计详解 优惠券作为电商最常用的营销手段,对于商家而言可以起到拉新.促活.提高转化的作用,对用户而言也可以获得实惠,今天就来谈谈优惠券系统的设计逻辑. 我对于优惠券系统 ...

  7. 010、Java中扩大数据类型

    01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...

  8. java分词技术(自动提取关键词,段落大意)hanlp

    这是老师大作业需要的技术才知道hanlp这个外部包  使用方法 包以及数据如下GIT下载很慢我传百度云了   链接:https://pan.baidu.com/s/14a22v1g_CAQN-G-k8 ...

  9. DevOps - 工程师职责

    章节 DevOps – 为什么 DevOps – 与传统方式区别 DevOps – 优势 DevOps – 不适用 DevOps – 生命周期 DevOps – 与敏捷方法区别 DevOps – 实施 ...

  10. 《Java并发编程的艺术》并发编程的基础(四)

    一.线程简介 1.线程的概念 系统运行的最小单元 2.为何使用多线程 更好地利用系统资源(处理器多核心),提高响应速度. 3.线程的状态 NEW(创建状态) RUNABLE(运行状态,系统调度,争抢时 ...