Eine kurze Analyse der Verwendung von SASS-Stilen 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

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

weniger ist fast dasselbe, Sass ist ausgereifter

• .scss ist das Suffix, und die Syntax wird mit {}
• .sass</code geändert > ist das Suffix. Die Syntax ist eine Kontraktionsmethode</li></ul><blockquote></p>Es wird empfohlen, .scss<p></blockquote></p><p><span style="font-size: 18px;"> zu verwenden Projektintegration</span></p><p><a href="//m.sbmmt.com/course.html" target="_blank" textvalue="编程教学"> Das <code>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>

  Nach dem Login kopieren
  🎜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 der Seite aufrufen. 🎜

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

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

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

  Nach dem Login kopieren
  🎜🎜2. Bei Verwendung von < Code>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;
  }

  Nach dem Login kopieren
  🎜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 Kenntnisse im Bereich Programmierung finden Sie unter: 🎜Programmierlehre🎜! ! 🎜

  Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Verwendung von SASS-Stilen in Angular-Projekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!