前端知识归纳（3）-- HTML/CSS（part4 Sass）

目录概览：

• 嵌套
• 变量
• mixin
• 循环

1.嵌套

sass代码

.link-list {
  border-radius: 10px;
  .link-item {
    text-decoration: none;
    
    &:hover {
      background-color: #188eee;
    }
  }
}

对应的css代码

.link-list {
  border-radius: 10px;
}
.link-list .link-item {
  text-decoration: none;
}
.link-list .link-item:hover {
  background-color: #188eee;
}

2.变量

sass代码

$blue: #188eee;
.tt {
  color: $blue;
}
.link {
  color: $blue;
}
.btn {
  color: $blue;
}

css代码

.tt {
  color: #188eee;
}

.link {
  color: #188eee;
}

.btn {
  color: #188eee;
}

3.mixin

sass代码

@mixin box-shadow($shadow...) {
  -moz-box-shadow: $shadow;
  -webkit-box-shadow: $shadow;
  box-shadow: $shadow;
}
.box {
  @include box-shadow(2px 4px #ccc);
}
.header {
  @include box-shadow(3px 4px #ccc);
}

css代码

.box {
  -moz-box-shadow: 2px 4px #ccc;
  -webkit-box-shadow: 2px 4px #ccc;
  box-shadow: 2px 4px #ccc;
}

.header {
  -moz-box-shadow: 3px 4px #ccc;
  -webkit-box-shadow: 3px 4px #ccc;
  box-shadow: 3px 4px #ccc;
}

4.循环

sass代码

@for $i from 1 to 4 {
  .item-#{$i} {
    background-image: url(xxx/#{$i});
  }
}

css代码

.item-1 {
  background-image: url(xxx/1);
}

.item-2 {
  background-image: url(xxx/2);
}

.item-3 {
  background-image: url(xxx/3);
}