Difference between sass and SCSS

JerryWang_ Wang Zixi 2021-10-14 06:07:33

original text )

Difference Between SASS and SCSS

SASS(Syntactically Awesome Style Sheets) It's a kind of Hampton Catlin Design 、Chris Eppstein and Natalie Weizenbaum Developed style sheet language . It is a preprocessor scripting language , Will be compiled or interpreted as CSS. Sass Script Itself is a scripting language . its typing Rules are dynamic .

SCSS Usually called Sassy CSS, It's for SASS(Syntactically Awesome Style Sheets) The main syntax of , It builds on existing CSS Above grammar . It uses semicolons and parentheses , Such as CSS( Cascading style sheets ). SCSS yes CSS Superset , That is all CSS All functions will be in SCSS Available in the , And contains SASS(Syntactically Awesome Style Sheets) Some functions of . SCSS Make any CSS All terms are valid .

9 Big difference :

difference 1

SASS yes Syntactically Awesome Style Sheets, yes CSS An extension of , Provide nested rules 、 Inherit 、Mixins Other characteristics , and SCSS yes Sassy Cascaded Style Sheets, And CSS similar , Filled in CSS And SASS Whitespace and incompatibility between . It's in MIT Licensed under license . It first appeared in 2006 year .

difference 2

SASS Easier to use and Simpler Syntax , Therefore, there is no need to use semicolons 、 curve 、 Braces, etc , and SCSS And CSS Fully compatible with , The file extension is .scss type .

difference 3

SASS It has the characteristics of the best coding standard and good official documents , and SCSS Easier to learn to develop code .

difference 4

SASS be based on javascript And supports different language extensions , Have your own grammar 、 Open source CSS Preprocessor and advanced features , For example, control and instructions and their libraries .

difference 5

SASS It's more difficult to communicate with existing by rewriting code CSS Project integration , and SCSS Adding new code through sampling rather than rewriting an existing code base is easier to integrate with an existing code base .

difference 6

SASS Easier to use 、 Read and write , and SCSS More logic and complexity in implementing code .

difference 7

SASS The variable will be in dollars ($) Symbol at the beginning , and SCSS With modular function , You can organize your code in a more modular way by using some kind of annotation .

difference 8

SASS With advanced grammar function , And its file has .sass Extension , and SCSS Have similar to each valid CSS Files are SCSS File functionality .

difference 9

SASS And Ruby be similar , Installation requires the use of Ruby, No strict code indentation , and SCSS And CSS be similar , Easy to use without any additional installation or configuration .

difference 10

SASS Have the ability to CSS Local and global variables used in different locations of the file , and SCSS With different variables , For example, color variables , These variables can be used later in the style sheet .

difference 11

SASS It has nesting function , Can be CSS Selectors are nested and displayed in HTML in , And it is difficult to maintain long hierarchical nesting CSS, and SCSS Can handle multiple classes and different nested styles .

difference 12

SASS With document style , It is better than CSS Better , And have color 、 Operation function of attribute and parameter list , and SCSS Syntax has margins 、 A list of the style 、 fill 、 Display etc. .

difference 13

SASS With control instructions 、 Functional instructions 、Mixins And has extensible features , and SCSS It can be done with SASS Used together to indicate CSS Similar features .

difference 14

After the initial development ,SASS Extended to SassScript. It supports cross platform operating systems . It is subject to CSS、LESS、YAML And so on . This SASS The file extension of is .scss and .sass, Its official implementation is also a use Ruby Open source project developed .


SASS And SCSS All are CSS The preprocessor , They are very useful , Can be included based on CSS Of UI( The user interface ) Or front-end framework to simplify development . these SASS And SCSS The framework is programmatically taking advantage of powerful CSS Function at advanced level CSS Function provides powerful functions . SASS It's a kind of CSS Expand , Most of these functions will be extended , and SCSS yes CSS A superset of , among CSS All functions of will be in SCSS in . The choice of preprocessor depends on the functions and features required to make the application work efficiently by making trade-offs in an effective way .

And SCSS comparison ,SASS Easier to use and requires less syntax or configuration , Recommended for larger applications that require faster development scope and easier development of complex components , and SCSS Can be used to optimize Mixin Characteristics of the situation , And many other effective technologies .

Please bring the original link to reprint ,thank
Similar articles