初识sass
ass和CSS非常相似,但是在Sass中是没有花括号({})和分号(;)的。
在Sass中定义变量,是用“$”符号声明,然后后面跟变量名称。在这个例子中,定义变量“red”,在变量名后使用冒号(:),然后紧跟变量值:
$height:100px
而SASS中嵌套和HTML差不多:
$fontsize:
12px
.speaker
.name
font
:
weight:
bold
size
: $fontsize +
10px
.position
font
:
size
: $fontsize
.speaker .name {
font-weight
:
bold
;
font-size
:
22px
;
}
.speaker .position {
font-size
:
12px
;
}
混合(Mixins)
混合是Sass中另一个很优秀的特性。混合可以让你定义一整块的Sass代码,、给他们定义参数,可以设置默认值。和LESS差不多
这是在sass中的代码
@mixin border-radius($amount:
5px
)
-moz-border-radius: $amount
-webkit-border-radius: $amount
border-radius: $amount
h
1
@include border-radius(
2px
)
.speaker
@include border-radius
h
1
{
-moz-border-radius:
2px
;
-webkit-border-radius:
2px
;
border-radius:
2px
;
}
.speaker {
-moz-border-radius:
5px
;
-webkit-border-radius:
5px
;
border-radius:
5px
;
}
@function pxToRem($px) {
@return $px / $baseFontSize * 1rem;
}
传参:
@mixin shadow($shadow...){
box-shadow:$shadow;
-webkit-box-shadow:$shadow;
-moz-box-shadow:$shadow;
-o-box-shadow:$shadow;
-ms-box-shadow:$shadow;
}
如果传参后面是...便可以输入任意个值。。
判断:
$type:c;
.d3{
@if $type == a{
color:red;
}
@else if $type==b{
color:blue;
}
@else{
color:green;
}
color:if($type == a,red,blue);;
}
通过$type的值的改变,来决定样式的类型。。
循环:
@for $i from 1 through 5{
.item-#{$i}{
width:100px * $i;
}
}
循环得到样式,这样可以作用于轮播图之类的批量样式。。。
posted on 2015-07-19 17:06 /*我不是无情的人*/ 阅读(144) 评论(0) 编辑 收藏 举报