Less和Sass常用归纳与写法区别

变量使用

// 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);
}
 

函数使用demo

// 正常移动端 1rem = 16px,  设计稿要求width: 160px

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