Home > Web Front-end > JS Tutorial > How to use SASS styles in Angular projects

How to use SASS styles in Angular projects

青灯夜游
Release: 2022-05-09 10:51:08
forward
2408 people have browsed it

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!

How to use SASS styles in Angular projects

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:

How to use SASS styles in Angular projects

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
Copy after login

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;
Copy after login

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; // 调用
}
Copy after login

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>
Copy after login

The style is now as follows:

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

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

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

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;
Copy after login

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

to-upper-case(&#39;italic&#39;); // ITALIC
Copy after login

Another example of changing the transparency of a color:

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

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;
}
Copy after login

We use mixin to rewrite:

@mixin common-style {
  font-size: 12px;
}

.demo {
  @include common-style;
  color: red;
}
.another_demo {
  @include common-style;
  color: blue;
}
Copy after login

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>
Copy after login
.prefix {
  font-size: 12px;
}
.name {
  color: red;
}
Copy after login

After rewriting:

<span class="name">Hello, Jimmy.</span>
Copy after login
.prefix {
 font-size: 12px;
}
.name {
  @extend .prefix
  color: red;
}
Copy after login

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!

Related labels:
source:juejin.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template