ANGULAR4 of the road (3) angular foot hand introduced scss

Scss. Sass .... SCCC ... SSSs ... CCCCC ... MMP

First, the similarities and differences between SCSS and sass:

SCSS is Sass 3 introduces the new syntax, its syntax is fully compatible with CSS3, and inherits the powerful features of Sass. In other words, any standard CSS3 style sheet is a valid SCSS file with the same semantics. In addition, SCSS can identify most CSS hacks (some CSS tips) and browser-specific syntax, such as: Old IE filter syntax.

Since SCSS is an extension of CSS, all code that works correctly in CSS can work correctly in SCSS. That is, for a Sass user, it is only necessary to understand how the Sass extension works, to fully understand SCSS. Most extensions, such as variables, parent references, and directives, are consistent, except that SCSS need to use semicolons and braces instead of line wrapping and indentation. For example, here's a simple Sass code:

#sidebar   30%  background-color: #faa

You can convert to SCSS syntax by simply adding curly braces and semicolons:

#sidebar {  30%;  Background-color: #faa;}

In addition, SCSS is not sensitive to whitespace symbols. The above code can also be written in the following way:

#sidebar {width:30%; Background-color: #faa}

Okay, get to the point:

If you create projects with ANGULAR-CLI, your style files want to use SCSS and have ng serve automatically compile them

The first step:

You can use it when creating a project.

New Sassy-project--style=sass

or modify your existing project with NG set Defaults.styleext scss;

Ng Set Defaults.styleext scss

Step Two:

Use NPM tools to install Sass dependencies and loader (NPM can't try CNPM)

NPM Install Node-sass--save-devnpm install sass-loader--save-dev

Step Three:

Modify the. angular-cli.json file

"Styles": [    "Styles.scss"],"Defaults": {    "Styleext": "Scss",    " Component ": {}}

Fourth Step:

"To change a. css file that already exists in the project to a. Scss" project is automatically modified "

Note: The newly created component project will generate the. scss file directly

Creating a new Component: NG G Component Component Name

ANGULAR4 of the road (3) angular foot hand introduced scss