SASS - 混合(Mixin)
- SASS – 简介
- SASS – 环境搭建
- SASS – 使用Sass程序
- SASS – 语法
- SASS – 变量
- SASS- 局部文件(Partial)
- SASS – 混合(Mixin)
- SASS – @extend(继承)指令
- SASS – 操作符
- SASS – 函数
- SASS – 输出格式
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)的更多相关文章
- sass(混合mixin的调用、@content)
sass中使用@mixin声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值.声明的@mixin通过@include来调用 1.无参数mixin scss.styl ...
- Sass的混合-@mixin,@include
1,无参数,有参数和带默认值参数的@mixin声明sass文件内容: //带参数,默认50@mixin opa($opa:50){ opacity: $opa / 100; filter:alpha( ...
- [Sass]混合宏的参数
[Sass]混合宏的参数--传一个不带值的参数 Sass 的混合宏有一个强大的功能,可以传参,那么在 Sass 中传参主要有以下几种情形: A) 传一个不带值的参数 在混合宏中,可以传一个不带任何值的 ...
- [Sass]混合宏
[Sass]混合宏-声明混合宏 如果整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使 ...
- Sass混合宏、继承、占位符
混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...
- Sass 混合宏、继承、占位符 详解
混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...
- sass中mixin常用的CSS3
圆角border-radius @mixin rounded($radius){ -webkit-border-radius: $radius; -moz-border-radius: $radius ...
- autoprefixer安装或者里sass的$mixin处理浏览器前缀
Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器.它适用于普通的CSS,可以实现css3代码自动补全.也可以轻松跟Sass,LESS及Stylus集成,在CSS编译 ...
- hbuilder和sublime的autoprefixer安装或者里sass的$mixin处理浏览器前缀
Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器.它适用于普通的CSS,可以实现css3代码自动补全.也可以轻松跟Sass,LESS及Stylus集成,在CSS编译 ...
随机推荐
- [NOIP 2017 day1]逛公园
题目描述 策策同学特别喜欢逛公园. 公园可以看成一张 N 个点 M 条边构成的有向图,且没有自环和重边.其中 1 号点是公园的入口, N 号点是公园的出口,每条边有一个非负权值,代表策策经过这条边所要 ...
- endnote的使用
下载网址: https://support.clarivate.com/Endnote/s/article/EndNote-Installer-download?language=en_US 关联of ...
- 安装数据库Typical path for xclock: /usr/X11R6/bin/xclock 错误问题
[oracle@localhost database]$ ./runInstaller Starting Oracle Universal Installer... Checking Temp spa ...
- 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 / ...
- python 数据处理 对txt文件进行数据处理
数据: 对txt文件进行数据处理: txt_file_path = "basic_info.txt" write_txt_file_path = "basic_info1 ...
- Java生鲜电商平台-优惠券系统设计详解
Java生鲜电商平台-优惠券系统设计详解 优惠券作为电商最常用的营销手段,对于商家而言可以起到拉新.促活.提高转化的作用,对用户而言也可以获得实惠,今天就来谈谈优惠券系统的设计逻辑. 我对于优惠券系统 ...
- 010、Java中扩大数据类型
01.代码如下: package TIANPAN; /** * 此处为文档注释 * * @author 田攀 微信382477247 */ public class TestDemo { public ...
- java分词技术(自动提取关键词,段落大意)hanlp
这是老师大作业需要的技术才知道hanlp这个外部包 使用方法 包以及数据如下GIT下载很慢我传百度云了 链接:https://pan.baidu.com/s/14a22v1g_CAQN-G-k8 ...
- DevOps - 工程师职责
章节 DevOps – 为什么 DevOps – 与传统方式区别 DevOps – 优势 DevOps – 不适用 DevOps – 生命周期 DevOps – 与敏捷方法区别 DevOps – 实施 ...
- 《Java并发编程的艺术》并发编程的基础(四)
一.线程简介 1.线程的概念 系统运行的最小单元 2.为何使用多线程 更好地利用系统资源(处理器多核心),提高响应速度. 3.线程的状态 NEW(创建状态) RUNABLE(运行状态,系统调度,争抢时 ...