So verwenden Sie SASS-Stile in Angular-Projekten

Wie verwende ich SASS-Stile in Angular-Projekten? Der folgende Artikel stellt Ihnen vor, wie Sie SASS-Stile in Angular verwenden. Ich hoffe, er wird Ihnen hilfreich sein!

Im Artikel Angular Custom Directive Tooltip haben wir gesagt, dass wir einen Artikel über den sass-Stil haben würden, und jetzt ist er da. sass 样式的文章，现在它来了。

前端三剑客之一，层叠样式表(Cascading Style Sheets，CSS），就是对 HTML 骨架的润色。但是我们通过原生编写的样式，会出现很多重复代码，而已逻辑不明确。

那么，我们可以通过 CSS 的扩展语言来进行编写维护。目前前端界比较流行的两个 CSS 扩展语言是 less 和 sass。本文讲解的是 sass。

less 也是差不多，sass 更加成熟

SASS 提供了两种编写的语法，一种是 .scss 为后缀，另一种是 .sass 为后缀。

• .scss 为后缀，语法用 {} 修饰
• .sass 为后缀，语法是缩紧方式

推荐使用 .scss

项目集成

angular 项目使用脚手架生成，在添加样式这一个步骤，会询问你编写样式的方式，让你选择：

选择 SCSS，然后确认即可，就是这么简单。

在 angular 中编写样式，可以分为组件样式和全局样式。【相关教程推荐：《angular教程》】

组件样式

组件样式就是组件单独拥有，其他组件不会生效，比如，你通过 ng g compoent demo 生成组件：

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

其中 demo.compoent.scss 就是 deom 这个组件的样式表。

全局样式

angular 脚手架生成的项目，默认在 src/style.scss 文件存放全局的样式。在这个文件修改的样式，将对整个应用的样式产生影响。

Sass 重点语法

针对日常的开发工作，我们来介绍下比较重要的内容。

1. 使用变量

使用变量能够让你在多个页面或者页面中的多处进行调用。

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

我们将变量方式在一个文件中进行管理，当需要使用到它的使用，我们直接进行 @import 导入使用即可：

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

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

2. 使用嵌套

在使用 css 样式的时候，我们需要对不同元素进行样式的编写，我们需要考虑到元素所在的层次，采用不同的权重对其进行修改。

现在有骨架如下：

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

现在有样式如下：

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

那么我们可以使用嵌套写法，逻辑清晰，阅读方便：

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

3. 使用计算

sass 提供了一系列的操作符，如 +、-、*、/、%，使用就像写 javascript 变量运算一样，竟然还可以带单位：

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

除了这些基本的运算符之外，sass 还提供了很多的方法，比如 String 函数：

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

又例如更改颜色的透明度方法：

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

4. 使用 mixin 混合器

在编写样式的时候，我们会出现在多个类中调用同一份的样式内容。比如：

.demo {
  font-size: 12px;
  color: red;
}
.another_demo {
  font-size: 12px;
  color: blue;
}

我们使用 mixin 改写：

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

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

使用 mixin 提取公共的代码出来，方便我们更改，改一处多处更改。当然，extend

Einer der drei Front-End-Schwertkämpfer, Cascading Style Sheets (

CSS), ist das Polieren des HTML-Skeletts. Die von uns nativ geschriebenen Stile enthalten jedoch viel wiederholten Code und die Logik ist nicht klar.

Dann können wir über die Erweiterungssprache CSS schreiben und warten. Derzeit sind less und sass die beiden beliebtesten CSS-Erweiterungssprachen in der Front-End-Welt. Dieser Artikel erklärt sass.

weniger ist fast dasselbe, Sass ist ausgereifter

SASS bietet zwei Schreibsyntaxen, eine ist .scss als Suffix und Das andere ist das Suffix .sass.

• .scss ist das Suffix, und die Syntax wird mit {}
• .sassgeändert > ist das Suffix. Die Syntax ist eine Kontraktionsmethode

Es wird empfohlen, .scss

zu verwenden Projektintegration

Das angular-Projekt wird mithilfe von Gerüsten generiert. Im Schritt des Hinzufügens von Stilen werden Sie gefragt, wie Sie Stile schreiben und können Folgendes auswählen:

🎜🎜Wählen Sie SCSS Code> und bestätigen Sie, so einfach ist das. 🎜🎜Schreiben Sie Stile in <code>angular, die in Komponentenstile und globale Stile unterteilt werden können. [Verwandte Tutorial-Empfehlung: „🎜Angular-Tutorial🎜“]🎜🎜🎜Komponentenstil🎜🎜🎜Komponentenstil bedeutet, dass die Komponente allein gehört und andere Komponenten nicht wirksam werden. Sie generieren beispielsweise Komponenten über ng g Komponentendemo: 🎜

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

🎜Wobei demo.compoent.scss das Stylesheet der deom-Komponente ist. 🎜🎜🎜Globale Stile🎜🎜🎜 angular Von Scaffolding generierte Projekte speichern globale Stile standardmäßig in der Datei src/style.scss. Die in dieser Datei geänderten Stile wirken sich auf die Stile der gesamten Anwendung aus. 🎜🎜🎜Sass-Schlüsselsyntax🎜🎜🎜Lassen Sie uns für die tägliche Entwicklungsarbeit die wichtigeren Inhalte vorstellen. 🎜🎜🎜1. Verwenden Sie Variablen🎜🎜🎜Durch die Verwendung von Variablen können Sie diese auf mehreren Seiten oder an mehreren Stellen auf einer Seite aufrufen. 🎜

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

🎜Wir verwalten die Variablenmethode in einer Datei, wir können sie direkt mit @import importieren: 🎜

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

🎜🎜2. Bei Verwendung von css Stil, wir müssen Stile für verschiedene Elemente schreiben. Wir müssen die Ebene der Elemente berücksichtigen und sie mit unterschiedlichen Gewichten modifizieren. 🎜🎜Jetzt ist das Grundgerüst wie folgt: 🎜

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

🎜Jetzt ist der Stil wie folgt: 🎜rrreee🎜 Dann können wir verschachteltes Schreiben mit klarer Logik und einfacher Lesbarkeit verwenden: 🎜rrreee🎜🎜3. Verwenden Sie Berechnungen🎜🎜🎜 sass Bietet eine Reihe von Operatoren wie +, -, *, /, %, die genau wie das Schreiben von javascript-Variablenoperationen verwendet werden können sogar Einheiten einschließen: 🎜rrreee🎜Zusätzlich zu diesen Grundoperatoren bietet sass auch viele Methoden, wie zum Beispiel die Funktion String: 🎜rrreee🎜Ein Beispiel für die Änderung der Transparenz von eine Farbe: 🎜rrree 🎜🎜4. Verwenden Sie einen Mixin-Mixer🎜🎜🎜Beim Schreiben von Stilen rufen wir den gleichen Stilinhalt in mehreren Klassen auf. Zum Beispiel: 🎜rrreee🎜Wir verwenden mixin, um Folgendes umzuschreiben: 🎜rrreee🎜Verwenden Sie mixin, um den allgemeinen Code zu extrahieren, sodass wir Änderungen an einer Stelle und an mehreren Stellen vornehmen können . Natürlich kann extend diesen Effekt auch haben. 🎜🎜🎜5. Verwenden Sie die erweiterte Vererbung🎜🎜🎜Zum Beispiel können wir den Stil der vorherigen Klasse weiterschreiben: 🎜🎜Ursprüngliches Skelett und Stil: 🎜rrreeerrreee🎜Nach dem Umschreiben: 🎜rrreeerrreee🎜Beherrschen Sie in der täglichen Entwicklung die oben genannten Die Fähigkeiten reichen aus, um mit Stilschreiben problemlos umgehen zu können~🎜🎜[Ende]🎜🎜Weitere programmierbezogene Kenntnisse finden Sie unter: 🎜Programmierlehre🎜! ! 🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie SASS-Stile in Angular-Projekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!