码迷,mamicode.com
首页 > 其他好文 > 详细

初识sass

时间:2015-07-19 18:01:22      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:

ass和CSS非常相似,但是在Sass中是没有花括号({})和分号(;)的。

在Sass中定义变量,是用“$”符号声明,然后后面跟变量名称。在这个例子中,定义变量“red”,在变量名后使用冒号(:),然后紧跟变量值:

$height:100px

而SASS中嵌套和HTML差不多:

$fontsize: 12px
.speaker
  .name
    font:
      weight: bold
      size: $fontsize + 10px
  .position
    font:
      size: $fontsize
而你在CSS中生成的代码却是:
 
.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
h1
  @include border-radius(2px)
.speaker
  @include border-radius
而到了css中,代码却成了:
h1 {
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}  
.speaker {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
函数:使用方法和JS差不多。
$baseFontSize:10px;

@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;
}
}

循环得到样式,这样可以作用于轮播图之类的批量样式。。。

初识sass

标签:

原文地址:http://www.cnblogs.com/rengpiaomiao/p/4658878.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!