sass小结

sass使用小结：

1、变量

变量必须以$开头，如果将变量使用到字符串中，需把变量名放到#{}大括号中。

$comW: 200px;
$comH: 200;
$comC: red;

#div1{
    width: $comW;
    height: #{$comH}px;  // 在字符串使用需要加上#{}
    background: $comC;
}

 

2、简单的运算

$comW: 200px;
$comH: 200;
$comC: red;

#div1{
    position: absolute;
    width: $comW;
    height: #{$comH}px;         // 在字符串使用需要加上#{}
    background: $comC;

    top: 10px + 150px;          // top: 150px - 10;
    
    // left: $comW + $comW;     // 或者 left: #{$comH + $comH}px
    // left : 100px + $comH;    // 或者 left: 100px + $comW
    left: $comH*2px;            // 或者 left: $comH*$comW

    margin: (14px/2);           // 使用除法需要用括号包裹起来
}

 

3、复用

（1）、@extend指令--继承（继承样式）

.a1{
    color: blue;
}

.a2{
    @extend .a1;
    font-size: 30px;
}


// 编译后
.a1, .a2 {
  color: blue;
}

.a2 {
  font-size: 30px;
}

（2）、@mixin指令--重用样式。可传参也可以不传

@mixin border-font($b, $f){
    border: $b + px  solid red;
    font-size: $f + px;
  }
  
.a3{
    @include border-font(2, 13);   // 这里需要使用到include指令
}


// 编译后
.a3 {
  border: 2px solid red;
  font-size: 13px;
}

以上两个指令都实现了样式代码的复用。区别在于，@extend指令引入的是一段相对固定的代码；而@mixin指令引入的样式代码可以通过参数来改变，灵活性更好。

 

4、@import指令

一般都是使用来引入文件。多是在一个scss样式文件中引入另个样式文件   @import 'base'  或者  @import 'base.scss'

 

5、@if--@else if--@else指令。条件语句

@mixin bgcolor($d){
    @if( $d == 1 ){
        background-color: red;
    } @else if( $d == 2 ){
        background-color: green;
    } @else{
        background-color: blue;
    }
}

.a4{
    width: 200px;
    height: 200px;
    @include bgcolor( 5 );
}


// 编译后
.a4 {
  width: 200px;
  height: 200px;
  background-color: blue;
}

 

6、循环语句

（1）、@for指令

@for $i from 1 to 5{   // 从1到4，不包括5
    .b#{$i}{
        background-image: url('../images/#{$i}.png');
    }
}


// 编译后
.b1 {
  background-image: url("../images/1.png");
}

.b2 {
  background-image: url("../images/2.png");
}

.b3 {
  background-image: url("../images/3.png");
}

.b4 {
  background-image: url("../images/4.png");
}

（2）、 @while

$j : 1;

@while $j < 5{
    .c#{$j}{
        background-image: url('../images/#{$j}.png');
    }

    $j : $j + 1;
}

// 编译后
.c1 {
  background-image: url("../images/1.png");
}

.c2 {
  background-image: url("../images/2.png");
}

.c3 {
  background-image: url("../images/3.png");
}

.c4 {
  background-image: url("../images/4.png");
}

 

（3）、@each指令

@each $k in 1,2,3,4{
    .d#{$k}{
        background-image: url('../images/#{$k}.png');
    }
}

// 编译后
.d1 {
  background-image: url("../images/1.png");
}

.d2 {
  background-image: url("../images/2.png");
}

.d3 {
  background-image: url("../images/3.png");
}

.d4 {
  background-image: url("../images/4.png");
}

 

7、@function指令---函数  （每个函数都需要有返回值内容）

@function colorRgba($r, $g, $b, $a){
    @return rgba($r, $g, $b, $a);
}

.e{
    background-color: colorRgba(0,0,0,0.2);
}


// 编译后
.e {
  background-color: rgba(0, 0, 0, 0.2);
}

 

以上是使用sass过程中的一些小结。对于sass的理解是，使用编程，类似于写js的形式去写css。主要是避免重复地写相同相似的样式代码，提高写css的效率。