What's the difference between SCSS and Sass?
From what I've been reading, Sass is a language that makes CSS more powerful with variable and math support.
What's the difference with SCSS? Is it supposed to be the same language? Similar? Different?
Sass is a CSS pre-processor with syntax advancements. Style sheets in the advanced syntax are processed by the program, and turned into regular CSS style sheets. However, they do not extend the CSS standard itself.
The main reason for this is the addition of features that CSS painfully lacks (like variables).
The difference between SCSS and Sass, this text on the Sass documentation page should answer the question:
There are two syntaxes available for Sass. The first, known as SCSS (Sassy CSS) and used throughout this reference, is an extension of the syntax of CSS. This means that every valid CSS stylesheet is a valid SCSS file with the same meaning. This syntax is enhanced with the Sass features described below. Files using this syntax have the .scss extension.
The second and older syntax , known as the indented syntax (or sometimes just “Sass”), provides a more concise way of writing CSS. It uses indentation rather than brackets to indicate nesting of selectors, and newlines rather than semicolons to separate properties. Files using this syntax have the .sass extension.
However, all this works only with the Sass pre-compiler which in the end creates CSS. It is not an extension to the CSS standard itself.
I'm one of the developers who helped create Sass.
The difference is UI. Underneath the textual exterior they are identical. This is why sass and scss files can import each other. Actually, Sass has four syntax parsers: scss, sass, CSS, and less. All of these convert a different syntax into an Abstract Syntax Tree which is further processed into CSS output or even onto one of the other formats via the sass-convert tool.
Use the syntax you like the best, both are fully supported and you can change between them later if you change your mind.
The Sass .sass file is visually different from .scss file, eg
example.sass
$color: red
=my-border($color)
border: 1px solid $color
body
background: $color
+my-border(green)
example.scss
$color: red;
@mixin my-border($color) {
border: 1px solid $color;
}
body {
background: $color;
@include my-border(green);
}
Any valid CSS document can be converted to Sassy CSS (SCSS) simply by changing the extension from .css to .scss .
上一篇: div内的图像在图像下面有额外的空间
下一篇: SCSS和Sass有什么区别？