LESS和Sass/Scss的一些不同之处

开始有人觉得用某些编辑器写CSS的速度太慢，创造了各种IDE；后来嫌弃IDE写CSS还是不够快，于是发明了Zen-coding（即现在的Emmet）；不过还是有人觉得CSS书写可以再快点、再方便点，于是就有了LESS和Sass等CSS预处理工具。

Emmet/Zen-coding加快了CSS的输入速度；而LESS和Sass除了加快CSS的书写速度，还增强了CSS这种语言，减少了代码量。

刚开始接触LESS和Sass，还不太熟悉。我会在博客上继续记录。

基本

LESS文件使用.less后缀名。

而Sass有两种:.sass和.scss，.sass的文件格式较松散但书写较快，可以不用花括号和分号; .scss文件与CSS较为接近，使用花括号和分号，如下：

// sass
.sass
    height:1px

// scss
.scss {
    height:1px;
}

(注：Sass和Scss区别仅限于花括号、分号和引号；我现在更喜欢使用Scss，所以下文出现的Sass有可能是指Scss)

变量(Variables)

LESS:

@var:value;

Sass:

$var:value;

嵌套(Nesting)

LESS和Sass的嵌套基本一致：

.header {
    .logo {
        display:block;
    }
    a {
        color:#f00;
    }
}

以上的代码通过LESS或Sass编译都会生成下面这样的CSS代码:

.header .logo {
    display:block;
}
.header a {
    color:#f00;
}

导入(Import)

// LESS
@import "file.less";

// Scss
@import "file.scss";

// Sass
@import file

LESS和Sass对import的处理也基本相同：同类文件就混合在一起然后编译；CSS文件则会在生成的CSS文件头部添加CSS的@import，如下：

// LESS
@import "import/reset.css";
// 生成的CSS代码
@import "import/reset.css";

// Sass
@import "import/reset.css";
// 生成的CSS代码
@import url(import/reset.css);

Extend/Inheritance

LESS和Sass现在都实现了Extend功能（有人反映LESS没有extend之类的功能，在这里介绍一下，LESS 1.4后就已经可以使用extend，请关注LESS的英文官方网站！某些介绍LESS的中文网站已年久失修，资料老旧）。

我更喜欢在HTML中实现继承多种CSS样式，而且一些CSS框架也是这样做的，例如使用<a class="pure-button pure-button-success">butotn</a>，而不是使用<a href="pure-button-success">button</a>

Compass

Compass，简单点来说就是Sass的工具箱。Compass之于Sass，就像Composer之于PHP，npm之于node.js。而LESS暂时没有发现类似的功能/工具，有点遗憾。

还有很多

更多的关于LESS和Sass的不同我会在后续的文章中继续记录。你也可以参考LESS和Sass的官方网站了解更多。