一开始写 sass 以为跟普通 css 没多大区别,基本在里面写的逻辑和规则都差不多,偶尔用下变量,嵌套,import,计算等功能,之所以会这样是还没发现sass的强大功能啊,例如 mixin
,extend
,function
等等
mixin介绍
mixin 是混合的意思,可以定义一些通用的或者兼容浏览器的样式,比如我们在写css考虑浏览器兼容问题需要些很多前缀 -webkit-
,-o-
,-moz-
,-ms-
,每次都要重复写这些样式是很耗时间的,@mixin 可以定义一些可复用的 css 代码,加快开发速度
mixin定义
无参数mixin
@mixin large-text {
font: {
family: "Arial";
size: 30px;
weight: bold;
}
color: brown;
}
带参数mixin
@mixin sexy-border($color: #333, $width: 2px) {
border: {
color: $color;
width: $width;
style: dashed;
}
}
参数mixin特点:
- 可以指定默认值
- 可变参数
- 可以指定参数
@include sexy-border($width: 4px);
- 可以嵌套
- 参数有作用域之分
使用方法
.header {
@include large-text
}
.sub-menu {
@include sexy-border($width: 30px)
}
@content
有时候还看到@mixin里面还有一个 @content
,比如
@mixin title {
@content;
}
这个@content是调用mixin的时候定义的样式
.article-title {
@include title {
font: {
size: 24px;
font-weight: 600;
color: #333;
}
}
}
最后输出的css样式
.article-title {
font-size: 24px;
font-font-weight: 600;
font-color: #333;
}
个人感觉这个使用在声明一些@keyframe等较长的样式定义,兼容浏览器的声明里面
mixin高级使用
比如声明一个flex容器,css兼容写法如下
.flex-container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
用@mixin来声明
%flex-container {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
@mixin display-flex() {
@extend %flex-container;
}
使用方法
.flex-container {
@include display-flex
}
再来定义一个动画
@mixin keyframes($animationName) {
@-webkit-keyframes #{$animationName} {
@content;
}
@-moz-keyframes #{$animationName} {
@content;
}
@-o-keyframes #{$animationName} {
@content;
}
@keyframes #{$animationName} {
@content;
}
}
这里用到@content来把定义的帧动画样式输出
使用方法
@include keyframes(left-to-right) {
0% {
top: 0;
}
100% {
top: 300px;
}
}
本文为原创,未经授权,禁止任何媒体或个人自媒体转载
商业侵权必究,如需授权请联系340443366@qq.com