初识sass | 易学教程

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;
  }
}
循环得到样式，这样可以作用于轮播图之类的批量样式。。。

来源：https://www.cnblogs.com/rengpiaomiao/p/4658878.html

标签

border-radius

Sass

Shadow

css