总结一下sass中用到@的地方.
1.继承@extend
SASS允许一个选择器,继承另一个选择器。比如,现有class1:
.class1 { border: 1px solid #ddd; }
class2要继承class1,就要使用@extend命令:
.class2 { @extend .class1; font-size:120%; }
2.混合@mixin
sass中使用@mixin
声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值。声明的@mixin
通过@include
来调用。
无参数
@mixin center-block { margin-left:auto; margin-right:auto; } .demo{ @include center-block; }
有参数
@mixin opacity($opacity:50) { opacity: $opacity / 100; filter: alpha(opacity=$opacity); } .opacity{ @include opacity; //参数使用默认值 } .opacity-80{ @include opacity(80); //传递参数 }
mixin的实例,用来生成浏览器前缀
@mixin rounded($vert, $horz, $radius: 10px) { border-#{$vert}-#{$horz}-radius: $radius; -moz-border-radius-#{$vert}#{$horz}: $radius; -webkit-border-#{$vert}-#{$horz}-radius: $radius; } #navbar li { @include rounded(top, left); } #footer { @include rounded(top, left, 5px); }
3.插入@import
@import命令,用来插入外部文件。
@import "path/filename.scss"; //如果插入的是.css文件,则等同于css的import命令。 @import "foo.css";
延伸:css中@import的用法
1)@import语法结构
在html中
<style type="text/css"> @import url(CSS文件路径地址); </style>
@import在html中使用截图
在css中
直接使用
@import url(CSS文件路径地址);
import在CSS代码或CSS文件中使用截图
4.条件语句@if@else
@if可以用来判断:
p { @if 1 + 1 == 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; } }
配套的还有@else命令:
@if lightness($color) > 30% { background-color: #000; } @else { background-color: #fff; }
5.循环语句
SASS支持for循环:
@for $i from 1 to 10 { .border-#{$i} { border: #{$i}px solid blue; } }
也支持while循环:
$i: 6; @while $i > 0 { .item-#{$i} { 2em * $i; } $i: $i - 2; }
each命令,作用与for类似:
@each $member in a, b, c, d { .#{$member} { background-image: url("/image/#{$member}.jpg"); } }
6.自定义函数
@function double($n) { @return $n * 2; } #sidebar { double(5px); }