How to use SASS style in Angular Project
This article mainly explains "how to use SASS style in Angular project". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to use SASS style in Angular project".
In the Angular custom directive Tooltip article, we said there would be an article about the sass style, and now it's here.
One of the front three swordsmen, cascading style sheets (Cascading Style Sheets,CSS), is a touch-up to the HTML skeleton. But the style we write natively, there will be a lot of repetitive code, and the logic is not clear.
Then, we can write and maintain it through CSS's extension language. At present, the two popular CSS extension languages in the front-end world are less and sass. This article is about sass.
Less is about the same. Sass is more mature.
SASS provides two written grammars, one with .scss as suffix and the other with .sass as suffix.
.scss is suffixed and the syntax is modified with {}
.sass is the suffix, and the grammar is tightening.
.scss is recommended
Project integration
The angular project is built using scaffolding. In the step of adding a style, you will be asked how to write the style and give you a choice:
Select SCSS and confirm it. It's as simple as that.
Writing styles in angular can be divided into component styles and global styles.
Component style means that components are owned separately, and other components will not take effect, for example, you generate components through ng g compoent demo:
-demo.component.ts- demo.component.html- demo.component.scss- deom.component.spec.ts
Where demo.compoent.scss is the stylesheet for the deom component.
Global styl
Projects generated by angular scaffolding store global styles in the src/style.scss file by default. The style modified in this file will have an impact on the style applied as a whole.
Sass key grammar
For the daily development work, let's introduce the more important contents.
1. Use variables
Using variables allows you to make calls on multiple pages or in multiple places on a page.
/ / _ varible.scss// * COLORS * $black: # 0000000 * white: # ffffff;$dark-green: # 007f7f * primary-color: $dark-green
We manage the variable mode in a file. When we need to use it, we can directly import it into @ import:
@ import "path/to/varible.scss"; # demo {color: $primary-color; / / call}
two。 Use nesting
When using css style, we need to write styles for different elements, we need to take into account the level of elements, using different weights to modify it.
Now there is a skeleton as follows:
Mr. Jimmy
Now the styles are as follows:
# demo .inner .prefix {color: red; font-size: 11px;} # demo .inner .name {font-size: 14px;}
Then we can use nested writing, which is logical and easy to read:
# demo {.prefix {color: red; font-size: 11px;} .name {font-size: 14px;}
3. Use calculation
Sass provides a series of operators, such as +, -, *, /,%, which can be used with units just like writing javascript variable operations:
Width: 100px / 400px * 100% l
In addition to these basic operators, sass provides a number of methods, such as the String function:
To-upper-case ('italic'); / / ITALIC
Another example is the method of changing the transparency of a color:
# demo {background-color: transparentize ($black, 0.5)}
4. Use the mixin Mixer
When writing a style, we will appear to invoke the same style content in multiple classes. For example:
.demo {font-size: 12px; color: red;}. Another_demo {font-size: 12px; color: blue;}
We use mixin to rewrite:
@ mixin common-style {font-size: 12px;} .demo {@ include common-style; color: red;} .another_demo {@ include common-style; color: blue;}
Using mixin to extract common code, it is convenient for us to change and change more than one place. Of course, extend has the same effect.
5. Using extend inheritance
For example, we can continue the style of the previous class:
Original skeleton and style:
Hello, Jimmy..prefix {font-size: 12px;} .name {color: red;}
After rewriting:
Hello, Jimmy..prefix {font-size: 12px;}. Name {@ extend .prefix color: red;} Thank you for reading, the above is the content of "how to use SASS style in Angular project". After the study of this article, I believe you have a deeper understanding of how to use SASS style in Angular project. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!
