sass语法进阶学习

sass里面运用的一些编程 还是相对来说 比较灵活的

sass代码：

// for循环
@for $i from 1 through 10 {
  .c_#{$i}{
      width:100px*$i;
      > p{
        font-size:12px*$i;
      }
  }
}
// while循环
$i : 10;
@while $i > 0 {
  .test_#{$i}{
    width : 100px*$i;
  };
  $i:$i - 1;
}

// each循环
@each $list in a_1,a_2{
  .#{$list}{
    background-image:url(/images/#{$list}.jpg) no-repeat;
  }
}

// if else
.test_if{
  @if 1 + 1 == 2 {border:1px solid red;}
  @if 5 > 5 {border:2px solid red;}
}
$v : 20;
.test_if_else{
  @if $v == 10{
    background-color:red;
  }@else{
    background-color:black;
  }
}
// 自定义方法
$klass : 'selected';
@function isSelected($class){
  @return $class == 'selected';
}

.selected{
  @if isSelected($klass){
    color:red;
  } @else{
    color:"";
  }
}

编译后的代码：

.c_1 {
  width: 100px;
}
.c_1 > p {
  font-size: 12px;
}

.c_2 {
  width: 200px;
}
.c_2 > p {
  font-size: 24px;
}

.c_3 {
  width: 300px;
}
.c_3 > p {
  font-size: 36px;
}

.c_4 {
  width: 400px;
}
.c_4 > p {
  font-size: 48px;
}

.c_5 {
  width: 500px;
}
.c_5 > p {
  font-size: 60px;
}

.c_6 {
  width: 600px;
}
.c_6 > p {
  font-size: 72px;
}

.c_7 {
  width: 700px;
}
.c_7 > p {
  font-size: 84px;
}

.c_8 {
  width: 800px;
}
.c_8 > p {
  font-size: 96px;
}

.c_9 {
  width: 900px;
}
.c_9 > p {
  font-size: 108px;
}

.c_10 {
  width: 1000px;
}
.c_10 > p {
  font-size: 120px;
}

.test_10 {
  width: 1000px;
}

.test_9 {
  width: 900px;
}

.test_8 {
  width: 800px;
}

.test_7 {
  width: 700px;
}

.test_6 {
  width: 600px;
}

.test_5 {
  width: 500px;
}

.test_4 {
  width: 400px;
}

.test_3 {
  width: 300px;
}

.test_2 {
  width: 200px;
}

.test_1 {
  width: 100px;
}

.a_1 {
  background-image: url(/images/a_1.jpg) no-repeat;
}

.a_2 {
  background-image: url(/images/a_2.jpg) no-repeat;
}

.test_if {
  border: 1px solid red;
}

.test_if_else {
  background-color: black;
}

.selected {
  color: red;
}