scss/less的使用

1. 样式嵌套

```

.wrapper{
    padding:10px;
    
    .item{
        height:15px;
        width:100%;
    }
}

2. 变量

$navHeight:100px;

.nav{
    height: $navHeight;
}

3. 变量计算

​
$navHeight:100px;

.nav{
    height: $navHeight;
}

.main{
    //注意使用calc时，减号两边要有一个空格，否则计算错误
    height: calc(100% - #{$navHeight});
}

​

Less和Sass在语法上的共同点：

1、混入(Mixins)——class中的class；

2、参数混入——可以传递参数的class，就像函数一样；

3、嵌套规则——Class中嵌套class，从而减少重复的代码；

4、运算——CSS中用上数学；

5、颜色功能——可以编辑颜色；

6、名字空间(namespace)——分组样式，从而可以被调用；

7、作用域——局部修改样式；

8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

less和sass的区别

Less和Sass的主要不同就是他们的实现方式。

Less是基于JavaScript，是在客户端处理的。

Sass是基于Ruby的，是在服务器端处理的。

关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。