Heim >Web-Frontend >js-Tutorial >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.
CSS
schreiben und verwalten. 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 {}
.sass
geändert > ist das Suffix. Die Syntax ist eine KontraktionsmethodeEs wird empfohlen, .scss
zu verwenden Projektintegration
🎜🎜Wählen SieSCSS 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 der 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 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!