0
点赞
收藏
分享

微信扫一扫

sass 与 scss 的区别和关系

朱小落 2022-06-30 阅读 75

sass 与 scss 的区别和关系

github 库:
sass scss: ​​​https://github.com/sass/ruby-sass​​​ less: ​​https://github.com/less/less.js​​

sass 是 scss 的前身。

sass 语言在写的时候没有大括号 ​​{}​​​ 和 分号​​;​​,就是裸奔的状态,其语言的目的是给那些不喜欢加大括号和分号结尾的人们。

后来 ​​sass​​​ 进阶成了 ​​scss​​​,支持了大括号和分号,更像 ​​less​​了

​.sass​​​ 和 ​​.scss​​​ 都是用的是同一个编译工具 ​​sass​​​(这是工具名,不是语言名),目前 ​​sass​​​还支持对 ​​.sass​​文件的编译

举个例子

SCSS

nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}

li { display: inline-block; }

a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}

SASS

nav
ul
margin: 0
padding: 0
list-style: none

li
display: inline-block

a
display: block
padding: 6px 12px
text-decoration: none

上面的两个都会生成 CSS

nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}

这是他们 github 的官方说明

Sass makes CSS fun again. Sass is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more.
It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

Sass has two syntaxes. The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”),
and is a superset of CSS’s syntax.
This means that every valid CSS stylesheet is valid SCSS as well.
SCSS files use the extension ​​​.scss​​.

The second, older syntax is known as the indented syntax (or just “Sass”).
Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS.
Instead of brackets and semicolons, it uses the indentation of lines to specify blocks.
Although no longer the primary syntax, the indented syntax will continue to be supported.
Files in the indented syntax use the extension ​​​.sass​​.


举报

相关推荐

0 条评论