Less与Scss的应用

less和scss都是现在比较流行的预处理语言，但是不能被浏览器直接解析，需要装换为css之后才

能在浏览器中使用，less和scss都向下兼容css；

less的运用

1.变量

less的变量使用@来定义

                @w:100px;                                                        
                @h:200px;                                                

使用变量就带入使用即可；

2.Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力

直接可以层层嵌套：例如

div{

width:@w;

hight:@h;

p{

color:pink;

}

}

3.运算

算术运算符 +、-、*、/ 可以对任何数字、颜色或变量进行运算

运算符两边用空格隔开，否则不生效或者报错

.one {
    // width: 100px;
    // width: @w + 20px;
    width: 100 + 100px;
    // height: 100px;
    height: @w - 100px;
    line-height: (@m / 2px);
    // line-height: @w ./ 2px;
    // background-color: rebeccapurple;
    background-color: @bg;
    text-align: center;
    color: (#224488 / 2); //结果是 #112244
}

4混合(类似于我们js的函数)

定义混合

.混合名称（可以传参（@a，@b））{

样式

}

arguments代表接收到的参数

.混合名称(@w,@h,@m){
    border:@w @h @m;//写法一
    border:@arguments;//写法二
}

导入

通过@import可以导入其它less或css文件

@import "./public";      若文件后缀为.less可以省略

scss的运用

1.scss用$来定义变量

2.scss也支持层层嵌套

3.scss也中支持+ - * /运算

4.scss混合器使用@mixin标识符定义

该混合器也是支持传参的

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

上述scss略简，用法代码参考less。