How to use SCSS in Angular Project


SCSS is Sass 3 introduces a new syntax, which is fully compatible with CSS3, and inherits the power of SASS. That is, any standard CSS3 style sheet is a valid SCSS file with the same semantics. In addition, SCSS can also identify most of the CSS Hacks (some CSS tips) and browser-specific syntax, such as ancient IE Filter syntax.

Since SCSS is an extension of CSS, all code that works normally in CSS can also work normally in SCSS. That is, for a SASS user, you only need to understand how the SASS extension is working, you can fully understand the SCSS. Most extended, such as variables, Parent References, and instructions are consistent; the only difference is that SCSS needs to use semicolons and curly brackets rather than wrap and indentation.

Angular CLI supports a variety of CSS pretreatments, including:

  • SCSS
  • Less
  • SASS
  • The default is CSS.
  • Angular has two ways to specify CSS pre-processing. The following is SCSS as an example:

CSS prerequisite

in the new Angular project is used –Style Specifies CSS pre-processing

NG New My-Project –Style = SCSS

  Existing project designated CSS pre-processing  
For existing projects, it is also supported to modify CSS pre-processing.

View .angular-cli.json, there is similar to the following statement in the default configuration:

“Defaults”: {“styleext”: “CSS “,” Component “: {}}

If the project is unified using SCSS, it is recommended to change the CSS file in the project to SCSS, remember to modify other files to the CSS file. Where stYLES.CSS is referenced in .angular-cli.json.

   The above is the full content of this article, I hope this paper is to study or work on everyone. Have a certain reference to learning value, if you have any questions, you can leave a message, thank you for your support of Tumi Cloud. 
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment