【已解决】CSS、Sass、SCSS、Less 的联系和区别

CSS ：

层叠样式表 (Cascading Style Sheets)，用来表现 HTML 或 XML 等文件样式的计算机语言。简单来说，它是负责网页中样式，比如颜色、大小、边框、边距等等。

Sass：

(Syntactically Awesome StyleSheets)，

官网介绍：世界上最成熟、最稳定、最强大的专业级CSS扩展语言！（Sass官网上的描述），因为它允许使用变量、嵌套规则等众多功能，而且完全兼容CSS，使得CSS语言更强大，更优雅。

它最开始的语法叫做“缩进语法”，与Haml类似，使用缩进来区分代码块，并且用回车将不同规则分隔开，例如：

    .element
        color: red
        a
            float: right

而较新的语法叫做“SCSS”，使用和CSS一样的块语法，即使用大括号将不同的规则分开，使用分号将具体的样式分开，例如：

    .element {
        color: red;
        a {
            float: right;
        }
    }

两者都等同于CSS中

    .element {
        color: red;
    }
    .element a {
        float: right;
    }

通常情况下，这两套语法通过.sass和.scss两个文件扩展名区分开。

SCSS：

Sassy CSS，是Sass的一种语法格式，这种格式仅在 CSS3 语法的基础上进行拓展，所有 CSS3 语法在 SCSS 中都是通用的，同时加入 Sass 的特色功能。此外，SCSS 也支持大多数 CSS hacks 写法以及浏览器前缀写法 (vendor-specific syntax)，以及早期的 IE 滤镜写法。这种格式以 .scss 作为拓展名。

Less：

官网介绍：Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展，Less 可以运行在 Node 或浏览器端。

区别和联系

Sass 和 Less 都是 CSS 扩展，目的都是使 CSS 更方便、更强大。它们的区别：

1. Sass 更强大，Less 更简单。

2. 编译环境不同，Sass 安装时需要 Ruby 环境，Sass 是在服务端处理的；而 Less 需要引入 Less.js 来处理 Less 代码输出css 到浏览器。

3. 变量符不一样，Sass 是 $，Less 是 @。

4. Sass 允许使用条件语句，例如 if { } else { }， for { } 等，而 Less 不允许。

总结

【已解决】CSS、Sass、SCSS、Less 的联系和区别

猜你喜欢