[武汉|结业弟子]JS-肖浩宇|2017年05月23日的日报-技能树.IT修真院

发表于： 2017-05-23 22:52:35

1 1076

【css-task11】less和sass有什么区别？
小课堂【武汉第119期】
分享人：肖浩宇

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”文件即可：

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;
}