sass(scss)、less用法与区别

css预处理器：为了兼容浏览器，去掉css写的不少冗余代码，即简化css代码的编写

PS：scss是sass3.0升级而来，主要区别是，嵌套由缩进变成花括号

一、保存文件扩展名不同

sass通常保存为.scss扩展名，less扩展名为.less，stylus扩展名为.styl

二、声明变量符号不同

sass声明变量时候符号使用$，less则使用@，stylus对变量名没有任何限定，变量名与变量值之间能够用冒号、空格和等号隔开。

例如：

less：

@orange:#feb914;

header {

     background-color:@orange;

}

sass：

$orange:#feb914;

header {

    background-color:$orange;

}

stylus：

bgorange = #feb914;

header

     background-color bgorange

三、变量做用域不同

先局部定义中查找，若是找不到，则逐级向上查找

PS:less全部变量的计算以最后一次被定义为准

例如：

less：

@size: 40px;

.content {

     width: @size;

}

@size:60px;

.container {

     width: @size;

}

输出：

.content {

     width: 60px;

}

.container {

     width: 60px;

}

sass：

同上输出为：

.content {

     width: 40px;

}

.container {

     width: 60px;

}

stylus同sass，即变量的计算以变量最近一次的定义为准

四、引入外部css文件

sass：

引入的文件名若是如下划线_开头的话，sass会认为该文件是一个引用文件，不会将其编译为css文件

@import

例如：

// 源代码

@import "_test1.scss";

@import "_test2.scss";

@import "_test3.scss";

// 编译后

h1 {

   font-size:17px;

}

h2 {

   font-size:17px;

}

h3 {

    font-size:17px;

}

less：扩展语法

@import (keyword) "filename";

keyword:

1）、reference:使用一个外部文件参与编译，但不输出其内容

2）、inline:直接将引入的文件放入输出文件中，但不处理这个引入的文件

3）、less:无论文件扩展名是什么都将该文件做为一个less文件处理

4）、css:无论文件扩展名是什么都将文件做为一个css文件处理

5）、once:只进入文件一次（去重），这是默认方式

5）、multiple:能够引入文件屡次

stylus:

同sass，自定义指令@require能够进行引入文件的去重，引入的文件只会编译一次

五、嵌套

1)、引用父级选择器的标记：&、@at-root、/

less:

#sort {

    margin-top: 24px;

    ul {

       margin-left: 8px;

       line-height: 36px;

       vertical-align: middle

    }

}

input {

    width: 80px;

    &:-ms-input-placeholder {

         font-size: 16px;

         color: @white;

    }

}

编译为：

#sort {

   margin-top:24px;

}

#sort ul {

   margin-left: 8px;

   line-height: 36px;

   vertical-align:middle;

}

input {

    width: 80px;

}

input:-ms-input-placeholder {

    font-size: 16px;

   color: @white;

}

2)、sass 属性嵌套

.fakeshadow {

     border: {

        style: solid;

        left: {

           width: 4px;

           color: #888;

        }

         right: {

            width: 2px;

            color: #ccc;

         }

      }

}

编译为：

.fakeshadow {

     border-style: solid;

     border-left-width: 4px;

     border-left-color: #888;

     border-right-width: 2px;

     border-right-color: #ccc;

}

六、混入（mixin）

某段css常常须要在多个元素中使用，可使用mixin

less：

.my-mixin {

   color: black;

}

.my-other-mixin() {

     background: white;

}

.my-hover-mixin() {

   &:hover {

       border: 1px solid red;

    }

}

.border-radius(@radius: 5px) {

     -webkit-border-radius: @radius;

     -moz-border-radius: @radius;

     border-radius: @radius;

}

.class {

   .my-mixin;

   .my-other-mixin;

}

button {

    .my-hover-mixin();

}

#header {

   .border-radius(4px);

}

.button {

   .border-radius;

}

编译为：

.my-mixin {

    color: black;

}

.class {

   color: black;

   background:white;

}

button:hover{

    border:1px solid red;

}

#header {

   -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  border-radius: 4px;

}

.button {

   -webkit-border-radius: 5px;

  -moz-border-radius: 5px;

  border-radius: 5px;

}