less和sass区别和使用场景-小佑Blog| 小佑前端 | WEB前端博客

首先sass和less都是css的预编译处理语言，他们引入了mixins，参数，嵌套规则，运算，颜色，名字空间，作用域，JavaScript赋值等加快了css开发效率,当然这两者都可以配合gulp和grunt等前端构建工具使用。sass和less主要区别:在于实现方式 less是基于JavaScript的在客户端处理所以安装的时候用npm，sass是基于ruby所以在服务器处理。

less详细，首先扩展文件名的格式是 xxx.less，<script src="less.js"...> 这种方式编译less，但在实际项目中还是用命令行的 lessc xxx.less>xxx.css 方式然后引入编译后的css文件这样减少在运行时上面出现的问题。

less详细

1.//安装less

npm install -g less

2.变量

@变量名:值
@width：100px;
.box{
    width:@width;
}

3.混合

定义classa 然后可以将classa引入到classb中
.classa(a){
    width:@width;
}

.classb{
    .classa(a);
}

4.嵌套规则

父级{
    子集
}

5.函数和运算

//可以将值计算
@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: @base-color * 3;
  border-left: @the-border;
  border-right: @the-border * 2;
}
#footer { 
  color: @base-color + #003300;
  border-color: desaturate(@red, 10%);
}

sass详细

sass服务器编译

首件扩展文件名的格式是 xxx.scss 或者是 xxx.sass

使用方法: sass xxx.scss xxx.css

编译风格：
nested:嵌套缩进的css代码，默认
expanded:没有缩紧的,扩展的css代码
campact:简介格式的css代码
compressed:压缩后的css代码(生产环境)
监听目录
sass --watch xxx.scss:xxx.css //监听文件
sass --watch scsspath:csspath //监听文件夹

变量

$变量名:值
$width：100px;

.box{
    width:$width;
}

如果变量包含字符串则写在 #{}之中
$c:color;

.box{
    border-#{$c}:red;
}

嵌套计算

less和sass嵌套相同，计算同理

继承

同less混合相同定义classa 然后再classb可饮用classa值

//使用方法 定义classa 
.classb{
    @extend .classa
}

Mixin

//使用方法先用@mixin命令定义一个代码块
@mixin left(参数1，参数2){
    float:left;
    margin-left:10px;
}
//使用@include调用刚刚定义的代码块
.box{
    @inclidu left(参数1，参数2);
}

颜色函数 lighten(颜色，百分比)
插入文件
@import命令插入外部文件 .scss和css都可
条件语句
//@if 可以用来判断 @else 则是配套

.box{
    @if 1+1>1 {width:100px;}@else {
        width:200px;
    }
}

循环语句

//@for @while @each

@for $i from 1 to 10{
    border-#{$i}{
        border:#{$i}px solid red;
 	 }
}

//@while

$i:6;
@while $i>0{
    .item-#{$i}{
        width:2em*$i;
    }
    $i:$i-2;
}

//@each

    @each $member in a, b, c, d {
　　　　.#{$member} {
　　　　　　background-image: url("/image/#{$member}.jpg");
　　　　}
　　}

自定义函数

@function name($n){
    @return $n*2;
}

.box{
    width:name(value);
}

总结

两者都有其优缺点，如果你开发环境中并没有ruby 并且你不想安装ruby你就可以使用less，如果你觉得sass的语法你更倾向并且你安装了ruby你就可以使用sass。总之工具不重要，码出一手好代码才是真理。

目录CONTENT

less和sass区别和使用场景