less和sass的使用和区别

前言

sass和less都是css的预处理语言，是css的拓展。所谓预处理就是在编译成css之前，预先处理一番，以更优雅的方式编写css样式。
/
https://juejin.cn/post/6906845910157525000#heading-5

1. sass的使用

sass目前的版本都是以scss作命名表示

cnpm i sass-loader@7 -D
cnpm i node-sass@4 -D

https://www.sass.hk/guide/

1.1 嵌套

.father{
&:hover{
等同于 .father:hover
}
.son{
//后代选择器
}
}

1.2 变量

$color:red;

$color:$red; //变量里可以用变量

1.3 导入

<style lang="scss">
    @import url('xxx.scss')
    //用于scss的模块管理
</style>

2. less的使用

cnpm i less-loader@6.0.0

2.1 嵌套

.father{
&:hover{
等同于 .father:hover
}
.son{
//后代选择器
}
}

2.2 变量

@color:red;

3. less和sass的区别

1. sass对环境要求比较高，less对环境的要求比较松
2. 变量书写的方式不一样
3. less的变量@有先后和类似块级作用域的概念，有变量提升
   sass的变量$有先后和类似块级作用域的概念(3版本没有块级只有先后，现在已经改了)，没有变量提升

<style  lang="scss" scope>
$color: red;

.el-menu-vertical-demo {
  $color: blue;
  height: 100%;
  min-height: 100vh;
  &:not(.el-menu--collapse) {
    width: 200px;
  }
}

.el-menu {
  border: none;
  h3 {
    font-weight: bold;
    color: $color;//red
    text-align: center;
    line-height: 48px;
  }
}
$color: blue;
</style>

<style  lang="less" scope>
@color: red;

.el-menu-vertical-demo {
  @color: blue;
  height: 100%;
  min-height: 100vh;
  &:not(.el-menu--collapse) {
    width: 200px;
  }
}

.el-menu {
  border: none;
  h3 {
    font-weight: bold;
    color: @color;//blue
    text-align: center;
    line-height: 48px;
  }
}
@color: blue;//全局状态下变量提升
</style>