一、混合器
如果你的整个网站中有几处小小的样式类似(例如一致的颜色和字体),那么使用变量来统一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂,你需要大段大段的重用样式的代码,独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。
混合器使用@mixin标识符定义。看上去很像其他的css @标识符,比如说@media或者@font-face。这个标识符给一大段样式赋予一个名字,这样你就可以轻易地通过引用这个名字重用这段样式。下边的这段sass代码,定义了一个非常简单的混合器,目的是添加跨浏览器的圆角边框。
@mixin rounded-corners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius : 5px;
}
然后就可以在你的样式表中通过@include来使用这个混合器,放在你希望的任何地方。@include调用出混合器中的所有样式提取出来放在@include被调用的地方。如果像下边这样写:
notice {
background-color: green;
border: 2px solid #00aa00;
include rounded-corners;
}
混合器定义:@mixin 混合器的名称 {代码}
@include 调用混合器的值
案例:sass代码:
@mixin a {
text-decoration: none;
font-family: "微软雅黑";
font-size: 28px;
}
.nav {
color: blue;
@include a;
}
.list {
color: aquamarine;
@include a;
}
@mixin zbtn {
width: 100px;
height: 40px;
border-radius: 10px;
}
//带有参数的混合器
@mixin color($bgcolor, $wdith, $bc, $bt:$bc) {
background-color: $bgcolor;
border: $wdith solid $bc;
color: $bt;
}
.btn {
@include zbtn;
// @include color(gray, pink, 5px)
@include color(blue, 5px, pink, )
}
.btn1 {
@include zbtn;
@include color(palevioletred, red, 10px)
}
.btn2 {
@include zbtn;
@include color(blue, green, 15px)
}
css代码:
.nav{color:blue;text-decoration:none;font-family:"微软雅黑";font-size:28px}
.list{color:#7fffd4;text-decoration:none;font-family:"微软雅黑";font-size:28px}
.btn{width:100px;height:40px;border-radius:10px;background-color:blue;border:5px solid pink;
color:pink}.btn1{width:100px;height:40px;border-radius:10px;background-color:#db7093;
border:red solid 10px;color:10px}.btn2{width:100px;height:40px;border-radius:10px;
background-color:blue;border:green solid 15px;color:15px}
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
&l