sass、less是什么？如何使用？

【CSS-TASK11】less和sass有什么区别？

分享人：胡兵

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

预处理器

CSS 预处理器是一种语言，用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处。

我们最常用的预处理器有scss和less

2.知识剖析

sass背景

sass诞生于2007年，最早也是最成熟的一款CSS预处理器语言。

现在的sass已经有了两套语法规则：一个依旧是用缩进作为分隔符来区分代码块的；另一套规则和CSS一样采用了大括号（｛｝）作为分隔符。后一种语法规则又名SCSS，在sass3之后的版本都支持这种语法规则。目前我们所称的sass一般指语法更为严格和友好的scss。

less背景

2009年开源的一个项目，受sass的影响较大，使用CSS的语法,在很多流行的框架和工具中已经能经常看到less的身影了（例如Twitter的Bootstrap框架就使用了less）。

当时sass和现在的scss不同，采用了缩进作为分隔符来区分代码块，而不是CSS中广为使用的大括号（｛｝）。为了让CSS现有的用户使用起来更加方便，Alexis开发了less并提供了类似CSS的书写功能。

3.常见问题

scss和less有什么不同

我们知道scss和less相似，它们都可以使用变量、常量、嵌套、混入、继承等功能，可以更有效有弹性的写出CSS，下面我们看看它们之间的差异。

4.解决方案

a.安装

sass

sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。

less

less安装直接引入less和js文件即可，js放在less之后：

b.变量

sass 是以$开头定义的变量，如：$mainColor: #963;

less 是以@开头定义的变量，如 @mainColor: #963;

c.作用域

sass 没有局部变量，满足就近原则。

less 中{}内定义的变量为局部变量。作用域和其他程序语言中的作用域非常的相同，他首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止，

d.混合（Mixins）

sass的混合：sass样式中声明Mixins时需要使用“@mixin”命令，在选择器调用定义好的Mixins需要使用“@include”。

                
                    /*声明一个Mixin叫作“abc”*/
                    @mixin abc($bg-c:red){
                           width: 100px;
                        height:100px;
                        background-color: $bg-c;
                    }

                    /*调用abc Mixins*/
                    .a{
                        @include abc();
                    }

                    .b{
                        /*将参数$bg-c的值重定义为blue*/
                      @include abc(blue);
                    }

less 的混合：在less中，混合是指将定义好的“ClassA”中引入另一个已经定义的“Class”，就像在当前的“Class”中增加一个属性一样。

                
                    /*声明一个Mixin叫作“abc”*/
                    .abc($bg-c:red){
                         width: 100px;
                        height:100px;
                        background-color: $bg-c;
                    }

                    /*调用abc Mixins*/
                    .a{
                        .abc();
                    }

                    .b{
                        /*将参数$bg-c的值重定义为blue*/
                      .abc(blue);
                    }

两者编译出的值相同

                
                    .a{
                        width: 100px;
                        height:100px;
                        background-color: red;
                    }

                    .b{
                        width: 100px;
                        height: 100px;
                        background-color: blue;
                    }

e.嵌套

两者写法相同

                
                    section {
                      margin:10px;
                      nav {
                        height:25px;
                        a {
                          color:#0982c1;
                          &:hover {
                            text-decoration:underline;
                          }
                        }
                      }
                    }

f.继承

                
                    /*sass的继承：@extend*/
                    .block {
                      margin: 10px 5px;
                      padding: 2px;
                    }
                    p {
                      @extend .block;/*继承.block选择器下所有样式*/
                      border: 1px solid #eee;
                    }
                    ul,ol {
                      @extend .block; /*继承.block选择器下所有样式*/
                      color: #333;
                      text-transform: uppercase;
                    }
                    /*less的继承：类似于mixins*/
                    .block {
                      margin: 10px 5px;
                      padding: 2px;
                    }
                    p {
                      .block;/*继承.block选择器下所有样式*/
                      border: 1px solid #eee;
                    }
                    ul,ol {
                      .block; /*继承.block选择器下所有样式*/
                      color: #333;
                      text-transform: uppercase;
                    }

编译后

                
//sass

.block,p,ul,ol {
  margin: 10px 5px;
  padding:2px;
}
p {
  border: 1px solid #eee
}
ul,ol {
  color:#333;
  text-transform:uppercase;
}

                
               //less

                .block {
                margin: 10px 5px;
                padding:2px;
                }
                p {
                margin: 10px 5px;
                padding:2px;
                border: 1px solid #eee
                }
                ul,ol {
                margin: 10px 5px;
                padding:2px;
                color:#333;
                text-transform:uppercase;
                }

g.高级语言

sass对条件语句和循环语句的处理要比less语言强大。具有真正的语言处理能力。

5.编码实战

6.扩展思考

还有什么好的预处理器语言？

stylus，2010年产生于Node.js社区,可同时使用缩进和括号写法，写法非常灵活，扩展性与scss相当，高于less，但由于规定过少，可能容易让人混乱。

我该如何选择css预处理器

sass诞生是最早也是最成熟的CSS预处理器，有Ruby社区和Compass支持；Stylus早期服务于Node JS项目，在该社区得到一定支持者；less出现于2009年，支持者远超于Ruby和Node JS社区；
sass和stylus扩展性更强，sass广泛使用于国外，less在国内受众最多。stylus是后起之秀。
sass和less语法较为严谨、严密，而Stylus语法相对散漫，其中less学习起来更快一些，因为他更像CSS的标准；
sass和less相互影响较大，其中sass受less影响，已经进化到了全面兼容CSS的SCSS；
sass和less都有第三方工具提供转译，特别是sass和Compass是绝配；

7.参考文献

参考一： CSS预处理器——sass、less和Stylus实践

参考二： sass用法指南

参考三：为您详细比较三个 CSS 预处理器（框架）：sass、less 和 Stylus

参考四： less 中文网

8.更多讨论

sass如何安装？

先安装Ruby，接着在命令行输入下面的命令：

                
                    gem install sass

鸣谢

感谢大家观看

BY : 胡兵