sass/scss和less对比

一、less、sass/scss是什么

1. less：是一种动态样式语言， 对CSS赋予了动态语言的特性，如变量、继承、运算、函数。Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行。
2. sass：是一种动态样式语言，Sass语法属于缩排语法，比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。
3. sass与scss是什么关系：Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。

 

二、less和sass/scss相同之处

1. LESS和SCSS都是css的预处理器，可以拥有变量，运算，继承，嵌套的功能，使用两者可以使代码更加的便于阅读和维护。语法上有些共性，比如下面这些：
   • 混入(Mixins)——class中的class；
   • 参数混入——可以传递参数的class，就像函数一样；
   • 嵌套规则——Class中嵌套class，从而减少重复的代码；
   • 运算——CSS中用上数学；
   • 颜色功能——可以编辑颜色；
   • 名字空间(namespace)——分组样式，从而可以被调用；
   • 作用域——局部修改样式；
   • JavaScript 赋值——在CSS中使用JavaScript表达式赋值。
2. 都可以通过自带的插件，转成相对应的css文件。

 

三、less和sass的区别

1、编译环境不同

Sass的安装需要安装Ruby环境，Less基于JavaScript

Sass的安装须要Ruby环境，是在服务端处理的，而Less是须要引入less.js来处理Less代码输出css到浏览器，也能够在开发环节使用Less，而后编译成css文件，直接放到项目中，也有 Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。

2、变量符不同，less是@，scss是$，并且变量的作用域：sass有变量和作用域，变量有全局和局部之分，并且有优先级

Less-做用域
@color: #00c; /* 蓝色 */
#header {
  @color: #c00; /* red */
  border: 1px solid @color; /* 红色边框 */
}

#footer {
  border: 1px solid @color; /* 蓝色边框 */
}

Less-做用域编译后
#header{border:1px solid #cc0000;}
#footer{border:1px solid #0000cc;}

scss-做用域
$color: #00c; /* 蓝色 */

#header {

  $color: #c00; /* red */
  border: 1px solid $color; /* 红色边框 */
}

#footer {
  border: 1px solid $color; /* 蓝色边框 */
}

Sass-做用域编译后

#header{border:1px solid #c00}
#footer{border:1px solid #c00}

咱们能够看出来，less和scss中的变量会随着做用域的变化而不同。

3、输出设置，less没有输出设置，sass提供4种输出选项：nested，compact，compressed和expanded

输出样式的风格能够有四种选择，默认为nested

• • nested：嵌套缩进的css代码
  • expanded：展开的多行css代码
  • compact：简洁格式的css代码
  • compressed：压缩后的css代码

4、sass支持条件语句，可使用if{}else{}，for{}循环等。less不支持

/* Sample Sass “if” statement */

@if lightness($color) > 30% {

} @else {

}

/* Sample Sass “for” loop */

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

5、引用外部css文件

scss引用的外部文件命名必须以_开头, 以下例所示:其中_test1.scss、_test2.scss、_test3.scss文件分别设置的h1 h2 h3。文件名若是如下划线_开头的话，Sass会认为该文件是一个引用文件，不会将其编译为css文件。

// 源代码：
@import "_test1.scss";
@import "_test2.scss";
@import "_test3.scss";

// 编译后：
h1 {
  font-size: 17px;
}
 
h2 {
  font-size: 17px;
}
 
h3 {
  font-size: 17px;
}

Less引用外部文件和css中的@import没什么差别。

6、sass和less的工具库不一样

Sass有工具库Compass, 简单说，Sass和Compass的关系有点像Javascript和jQuery的关系,Compass是Sass的工具库。在它的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能。

Less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库，Bootstrap的样式文件部分源码就是采用Less语法编写。

7、less和scss都可以使用&符号表示父选择器，但是SCSS的&符号只能出现在一个组合选择器的开始位置，LESS则没有这个限制

less：

 .bg-variant(@color) {
   background-color: @color;
   a&:hover,
   a&:focus {
     background-color: darken(@color, 10%);
   }
 }

scss：

 a {
   font-weight: bold;
   text-decoration: none;
   &:hover { text-decoration: underline; }
   body.firefox & { font-weight: normal; }
 }

 

四、sass和less的语法要点

1、sass

注释效果：
//单行注释不会被编译出来
/**/多行注释会被编译出来

---

插值语法：
$key:margin;
.box{
    #{$key}:auto;  //井号
}

---

作用域原则：就下(近)原则
$number:123px;
.box3{
  height:$number  
  
  $number:456px; //变量声明不会提升
  width:$number; //就近原则
}                
结果是
height:123px;
width:456px;

---

选择器嵌套规则

ul{
  list-style:none;
  li{
    float:left;
    div{margin:10px;}
    p{margin:20px;}
  }
  &hover{  //如果直接用 :hover会有空格
    color:red;
    font:{  //拓展写开
            family:arial;
            size:10px;
            weight:bold;
        }
  }
}

---

运算规则：

$num:100px;
.box{
  width:$num * 3;
  height:$num +10px;


**在sass当中运算的单位值不相同会报错
不会自动转化单位**


默认不会对 / 斜线进行运算操作

font: 20px / 1.5;   //默认不会转义

padding: （20px / 1.5）  //加了括号会变成运算 （13.33333px）加括号

}

---

内置函数规则

.box5{
    width:round(3.4px)   ->3px
    height:percentage(0.2) ->20%
    margin:random();
}

---

自定义函数规则

@function sum($n,$m){
    @return $n+$m
}

---

混入样式规则

@mixin show{
    display:block;
}      //不会渲染到页面上只是作为混入

@mixin hide($color){
    display:none;
    color：$color;
}

.box6{
    width:100px;
    @include show;  //直接调用
    @include hide(blue);   //这样不会单独生成样式只是做到混入
}

****

.line{
    display:inline;  //这样写会多一条样式
}

%line{
    display:inline;  //这样写就不会生成.line样式
}

.box7{
    @extend .line; //只有引入时才会自动解析为下方样式
                   //继承.line选择器下所有样式
}

.line,.box7{
    display:inline;
}

---

条件写法规则


$count:5;
.box11{
    @if($count > 4){
        width:100px +$count
    } 
}

---

循环语句规则

循环语句
@for  $i  from  0 through 2{
    .box-#{$i}{
        width:100px + $i;
    }
}

---

导入规则

@import   “./reset.css";

 

2、less

注释规则

//单行注释不会被编译出来
/**/多行注释会被编译出来

---

插值规则：

插值
@key:margin;
.box{
    @{key}:auto;       //类似解构
}

---

作用域规则


.box3{
    @number:456px;
    width:@number; //就近原则
}  

---

选择器嵌套规则

ul{
    list-style:none;
    li{
        float:left;
        div{margin:10px;}
        p{margin:20px;}
    }
    &hover{
        color:red;
    }
}

---

运算规则

@num:100px;
.box{
  width:@num * 3;
  height:@num +10px;
//两个数值相加如果单位不同以第一个单位为准

  font: 20px / 1.5;   //智能转义

  padding:~"20px / 1.5"   //会转义（手动转义）

  color：#010203  * 2；
}

---

内置函数规则

.box5{
    width:round(3.4px)   ->3px
    height:percentage(0.2) ->20%
}

---

混入样式规则

混入样式
.show{
    display:block;
}

.hide(@color){
    display:none;
    color：@color
}

.box6{
    width:100px;
    .show;
    .hide(blue);   //这样不会单独生成样式只是做到混入
}

---

命名空间规则(less专有)


#nm(){
    .show{display:inline-block}
}

.box7{
    #nm.show; 
}

---

继承和合并规则


继承
.line{
    display:inline;   
}

.box7{
    &:extend(.line)
}

合并
.box9{
    background+:url(a.png);
    background+:url(b.png);
}

---

条件写法



@count:5;
.get(@cn) when(@cn >4){
    width:100px +@cn;
}

.box1{
    .get(@count)
}

---

循环写法：


@count :0;


.get(@cn)  when (@cn <3){
    .get((@cn+1))
    .box-@{cn}{
        width:100px +@cn
    }
}

.get(@count2)

---

导入规则

@import './reset.less'