How to use SASS styles in Angular projects

How to use SASS styles in Angular projects? The following article will introduce to you how to use SASS styles in Angular. I hope it will be helpful to you!

In the Angular Custom Instructions Tooltip article, we said that we would publish an article about sass styles, and now it coming.

One of the three front-end swordsmen, Cascading Style Sheets (CSS), is the polish of the HTML skeleton. However, the styles we write natively will have a lot of repeated code, and the logic is not clear.

Then, we can write and maintain it through the extension language of CSS. The two CSS extension languages ​​that are currently popular in the front-end world are less and sass. This article explains sass.

less is similar, sass is more mature

SASS provides two writing syntaxes, one is .scss is the suffix, the other is .sass is the suffix.

• .scss is the suffix, and the syntax is {}.
• .sass is the suffix, and the syntax is Shrinking method

Recommended to use .scss

Project integration

angular The project is generated using scaffolding. In the step of adding styles, you will be asked how to write styles and let you choose:

Select SCSS, then confirm, it’s that simple.

Writing styles in angular can be divided into component styles and global styles. [Related tutorial recommendations: "angular tutorial"]

Component style

Component style means that the component is owned individually and other components will not take effect, such as , you generate the component through ng compoent demo:

- demo.component.ts
- demo.component.html
- demo.component.scss
- deom.component.spec.ts

where demo.compoent.scss is the style sheet of deom.

Global styles

angular Projects generated by scaffolding store global styles in the src/style.scss file by default . The styles modified in this file will affect the styles of the entire application.

Sass Key Grammar

For daily development work, let’s introduce the more important content.

1. Use variables

Using variables allows you to call them on multiple pages or in multiple places on the page.

// _varible.scss
// **** COLORS ****
$black: #000000;
$white: #ffffff;
$dark-green: #007f7f;
// **** usage ****
$primary-color: $dark-green;

We manage the variable method in a file. When we need to use it, we can directly @import import and use it:

@import "path/to/varible.scss";

#demo {
  color: $primary-color; // 调用
}

2. Use nesting

When using css styles, we need to write styles for different elements. We need to consider the level of the elements and use different styles. The weight is modified.

The skeleton is now as follows:

<div id="demo">
  <div class="inner">
    <span class="prefix">Mr.</span>
  </div>
  <div class="inner">
    <span class="name">Jimmy<span>
  </div>
</div>

The style is now as follows:

#demo .inner .prefix {
  color: red;
  font-size: 11px;
}
#demo .inner .name {
  font-size: 14px;
}

Then we can use nested writing, with clear logic and easy reading:

#demo {
  .inner{
    .prefix {
      color: red;
      font-size: 11px;
    }
    .name {
      font-size: 14px;
    }
  }
}

3. Use calculation

sass provides a series of operators, such as , -, *, /, %, you can use Just like writing javascript variable operations, you can also bring units:

width: 100px / 400px * 100%l;

In addition to these basic operators, sass also provides many methods, such as String Function:

to-upper-case('italic'); // ITALIC

Another example of changing the transparency of a color:

#demo {
  background-color: transparentize($black, 0.5)
}

4. Use the mixin mixer

When writing styles, we will call 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;
}

Use mixin to extract the public code, which is convenient for us to change, and change one place in multiple places Change. Of course, extend Serve also has this effect.

5. Use extend inheritance

For example, we can continue the style of the previous class:

Original skeleton and style:

<span class="prefix name">Hello, Jimmy.</span>

.prefix {
  font-size: 12px;
}
.name {
  color: red;
}

After rewriting:

<span class="name">Hello, Jimmy.</span>

.prefix {
 font-size: 12px;
}
.name {
  @extend .prefix
  color: red;
}

In daily development, mastering the above skills is enough for you to deal with style writing with ease~

[End]

Updated For more programming related knowledge, please visit: Programming Teaching! !

The above is the detailed content of How to use SASS styles in Angular projects. For more information, please follow other related articles on the PHP Chinese website!