less css 二维,css，less 和 sass

CSS(层叠样式表)是一门非程序式语言，入门学习使用非常直观方便，没有变量、函数、SCOPE(作用域)，需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用。

为了方便前端开发的工作量，出现了sass和less。

SASS

是一种对css的一种扩展提升，增加了规则、变量、混入、选择器、继承等等特性。可以理解为用js的方式去书写，然后编译成css。

比如说，sass中可以把反复使用的css属性值定义成变量，然后通过变量名来引用它们，而无需重复书写这一属性值。

less

LESS，受Sass的影响较大，也使用CSS的语法，让大部分开发者和设计师更容易上手。

LESS保留了css的任何功能，同时提供了多种方式能平滑的将写好的代码转化成标准的CSS代码，可以在任何使用随时切换到css的语法进行书写。

使用方法

传统的css可以直接被html引用，

由于sass和less使用了类似JavaScript的方式去书写，所以必须要经过编译生成css，而html引用只能引用编译之后的css文件。

sass和less的区别

编译环境

Sass的安装需要Ruby环境，是在服务端处理。

Less不需要安装其他语言，在Node中进行编译。只需要导入less.js来处理然后输出css到浏览器。是在客户端处理。

当然Less也提供服务器端的编译功能。

变量符不同，变量的作用域不同

变量符：Less是@，而Scss是$。

作用域：

// 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没有输出设置。

Sass提供4中输出选项：

nested 嵌套缩进，

compact 简洁格式，

compressed 压缩后，

expanded 展开的多行。

Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。

引用外部CSS文件

scss引用的外部文件命名必须以_开头。文件名如果以下划线_开头的话，Sass会认为该文件是一个引用文件，不会将其编译为css文件。

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

工具库不同

SCompass是Sass的工具库。是在它的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能。

Less有UI组件库Bootstrap,iview等。

继承

Sass中，写好的选择器进行集成，需要@extend关键字。

Less中，直接写入即可：.be-extend-class;

Mixin

Sass中，需要进行Mixin操作的选择器需要@mixin关键字，选择器后可以传入变量和默认值。

嵌套(相同点)

Sass和Less均允许元素嵌套。如果父子选择器均用逗号分开，那么编译时会按结合律拆开编译。

Sass和Less指代上层元素均使用&符号。

总结

不管是Sass，还是Less，都可以视为一种基于CSS之上的高级语言，其目的是使得CSS开发更灵活和更强大。 Sass的功能比Less强大,基本可以说是一种真正的编程语言了，Less则相对清晰明了,易于上手,对编译环境要求比较宽松。考虑到编译Sass要安装Ruby,而Ruby官网在国内访问不了,个人在实际开发中更倾向于选择Less。