@minxin
@include引用
@mixin center-block {
margin-left: auto;
margin-right: auto;
}
#header {
width: 1000px;
@include center-block;
}
#footer {
width: 600px;
}
// css style
#header {
width: 1000px;
margin-left: auto;
margin-right: auro;
}
很简单嘛，不过上面两个margin没有合并，其实可以用%解决，稍后讨论。
@content嵌入
@mixin header {
#header {
@content;
}
}
@include header {
height: 100px;
width: 100px;
.logo {
widht: 50px;
}
}
//css style
#header {
height: 100px;
width: 100px;
}
#header .logo {
width: 50px;
}
可见，@include引用的内容嵌入@content中。
@content的使用基本体现在css3的media-queries,animation的keyframes:
@mixin screen($res-min, $res-max) {
@media screen and (min-width: $res-min) and (max-width:$res-max) {
@content;
}
}
@mixin keyframes($name) {
@keyframes #{$name} {
@content;
}
}
重点来了，关于css兼容性前缀的神来之笔：
$prefix-for-webkit: true !default;
$prefix-for-mozilla: true !default;
$prefix-for-microsoft: true !default;
$prefix-for-opera: true !default;
$prefix-for-spec: true !default;
@mixin prefixer($property, $value, $prefixes) {
@each $prefix in $prefixes {
@if $prefix == webkit and $prefix-for-webkit == true {
-webkit-#{$property}: $value;
}
@else if $prefix == moz and $prefix-for-mozilla == true {
-moz-#{$property}: $value;
}
@if $prefix == ms and $prefix-for-microsoft == true {
-ms-#{$property}: $value;
}
@if $prefix == o and $prefix-for-opera == true {
-o-#{$property}: $value;
}
@if $prefix and $prefix-for-spec == true {
#{$property}: $value;
}
@else {
@warn "Unrecognized prefix: #{prefix}";
}
}
}
调用一下：
@mixin box-shadow($shadow...) {
@include prefixer(box-shadow, $shadow, webkit);
}
div {
@include box-shadow(0 0 5px #fff);
}
//css style
div {
-webkit-box-shadow: 0 0 5px #fff;
box-shadow: 0 0 5px #fff;
}
%
组合申明
%申明的选择器可以把不同选择器的相同样式合并：
@mixin block {
margin: 0 auto;
}
%block {
@include block;
}
.header {
width: 100px;
@extend %block;
}
.footer {
width: 50px;
@extend %block;
}
//css style
.header, footer {
margin: 0 auto;
}
.header {
width: 100px;
}
.footer {
width: 50px;
}
即用即调
%申明的选择器，不调用就在那，不产生样式。
@function
sass定义了很多函数可供使用，当然你也可以自己定义函数，以@fuction开始。sass的官方函数链接为：sass fuction，实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为lighten($color,$amount)和darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。
$baseFontSize: 10px !default;
$gray: #ccc !defualt;
@function pxToRem($px) {
@return $px / $baseFontSize * 1rem;
}
body{
font-size:$baseFontSize;
color:lighten($gray,10%);
}
.test{
font-size:pxToRem(16px);
color:darken($gray,10%);
}
//css style
body{
font-size:10px;
color:#E6E6E6;
}
.test{
font-size:1.6rem;
color:#B3B3B3;
}
更多函数详见官方函数库sass Functions