SASS - 混合(Mixin)
时间:2019-09-26
本文章向大家介绍SASS - 混合(Mixin),主要包括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中一个非常有用的功能。
原文地址:https://www.cnblogs.com/haibianren/p/11589396.html
- LINQ to XML LINQ学习第一篇
- PHP 安全与性能
- Extjs 项目中常用的小技巧,也许你用得着(5)--设置 Ext.data.Store 传参的请求方式
- WPF备忘录(5)怎样修改模板中的控件
- Linux 系统与数据库安全
- 使用委托实现同步回调与异步回调
- Application Firewall Design
- Extjs 项目中常用的小技巧,也许你用得着(4)---Extjs 中的cookie设置
- C#基础知识回顾--串行化与反串行化
- Shell实用实例参考
- 数据库记录安全解决方案
- 多客服功能终于也向所有微信认证的订阅号开放了
- WPF备忘录(4)打个勾画个叉娱乐下
- Linux Token Auth 一次性密码认证
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- flutter BottomAppBar实现不规则底部导航栏
- Yarr:一个UI很漂亮的RSS阅读器
- kotlin Standard中的内联函数示例详解
- 解决react-native软键盘弹出挡住输入框的问题
- flutter编写精美的登录页面
- Flutter实现App功能引导页
- Flutter底部不规则导航的实现过程
- Flutter实现用视频背景的登录页的示例代码
- Flutter实现可循环轮播图效果
- Android判断登录情况
- linux尝试登录失败后锁定用户账户的两种方法
- Linux内存泄漏检测shell脚本
- 详解Linux系统中网卡MAC地址克隆方法
- linux下日志定时轮询的流程详解
- Vim中查找替换及正则表达式的使用详解