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 不允许。
总结