Less和Sass常用归纳

 

目录

变量使用

嵌套使用

混合函数使用

小技巧：换算rem至px

---

变量使用

// Less
@color: #999;
#wrap {
  color: @color;
}

// Sass
$color: #999;
#wrap {
  color: $color;
}

嵌套使用

& ：代表的上一层选择器的名字，此例便是header

// Less和Sass相同
#header{
  &_content{//等于 #header_content
    margin:20px;
  }
}

混合函数使用

// Less
.border(@color:#000){
    border:solid 1px @color;
}
#main{
    .border(red);
}

// Sass
@mixin border($color: #000) {   // sass也可以使用@function
   border:solid 1px #color;
}
#main{
    @include border(red);
}

 

小技巧：换算rem至px

// 1rem = 16px, 设计稿要求width: 100px
// less
.px2rem(@name, @px) {
  @{name}: @px / 16 * 1rem
}
// 使用
.test {
    .px2rem(width, 100)
}

// Sass
@function px2rem($px) {
  @return $px / 16 * 1rem;
}
// 使用
.test {
    width: px2rem(100);
}