初めての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 h 1    @include border-radius( 2px ) .speaker    @include border-radius
cssになると、コードは次のようになります.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 ; }
関数:使用方法は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; }}
ループしてスタイルを得ることで、マルチキャストマップなどの一括スタイルに作用します...