Comment utiliser les styles SASS dans les projets Angular ? L'article suivant vous présentera comment utiliser les styles SASS dans Angular. J'espère qu'il vous sera utile !
Dans l'article Angular Custom Directive Tooltip, nous avions dit que nous aurions un article sur le style sass
, et maintenant il est ici. 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), est le polissage du squelette HTML
. Cependant, les styles que nous écrivons de manière native comporteront beaucoup de code répété et la logique n’est pas claire.
CSS
. Actuellement, les deux langages d'extension CSS
les plus populaires dans le monde front-end sont less
et sass
. Cet article explique sass
. less c'est presque pareil, sass est plus mature
SASS
fournit deux syntaxes d'écriture, l'une est .scss
comme suffixe, et l'autre est One est .sass
comme suffixe. .scss
est le suffixe, et la syntaxe est modifiée avec {}
.sass</code > est le suffixe, La syntaxe est une méthode de contraction</li></ul><blockquote></p>Il est recommandé d'utiliser .scss<p></blockquote></p><p><span style="font-size: 18px;"> Intégration du projet</span></p><p><a href="https://www.php.cn/course.html" target="_blank" textvalue="编程教学"> Le projet <code>angular
est généré à l'aide d'un échafaudage. Lors de l'étape d'ajout de styles, il vous sera demandé comment écrire des styles et vous laissera choisir : 🎜🎜Sélectionnez SCSS</ code> et confirmez, c'est aussi simple que cela. 🎜🎜Écrivez des styles en <code>angular
, qui peuvent être divisés en styles de composants et styles globaux. [Recommandation de didacticiel connexe : "🎜Tutoriel angulaire🎜"]🎜🎜🎜Style de composant🎜🎜🎜Le style de composant signifie que le composant appartient seul et que les autres composants ne prendront pas effet. Par exemple, vous générez des composants via ng g. demo du composant
:🎜<span class="prefix name">Hello, Jimmy.</span>
demo.compoent.scss
est la feuille de style du composant deom
. 🎜🎜🎜Styles globaux🎜🎜🎜 angular
Les projets générés par l'échafaudage stockent les styles globaux dans le fichier src/style.scss
par défaut. Les styles modifiés dans ce fichier affecteront les styles de l'ensemble de l'application. 🎜🎜🎜Grammaire clé Sass🎜🎜🎜Pour le travail de développement quotidien, introduisons le contenu le plus important. 🎜🎜🎜1. Utiliser des variables🎜🎜🎜L'utilisation de variables vous permet de les appeler sur plusieurs pages ou à plusieurs endroits d'une page. 🎜.prefix { font-size: 12px; } .name { color: red; }
@import
: 🎜<span class="name">Hello, Jimmy.</span>
.prefix { font-size: 12px; } .name { @extend .prefix color: red; }
. sass
Fournit une série d'opérateurs, tels que +, -, *, /, %
, qui peuvent être utilisés tout comme l'écriture d'opérations de variables javascript
, et peuvent inclure même des unités : 🎜 rrreee🎜En plus de ces opérateurs de base, sass
fournit également de nombreuses méthodes, comme la fonction String
: 🎜rrreee🎜Un exemple de modification de la transparence de une couleur : 🎜rrreee 🎜🎜4. Utilisez mixin mixer🎜🎜🎜Lors de l'écriture de styles, nous appellerons le même contenu de style dans plusieurs classes. Par exemple : 🎜rrreee🎜Nous utilisons mixin
pour réécrire : 🎜rrreee🎜Utilisez mixin
pour extraire le code commun, afin que nous puissions apporter des modifications à un et à plusieurs endroits . Bien entendu, extend
peut également avoir cet effet. 🎜🎜🎜5. Utiliser l'héritage étendu🎜🎜🎜Par exemple, nous pouvons continuer à écrire le style de la classe précédente : 🎜🎜Squelette et style d'origine : 🎜rrreeerrreee🎜Après la réécriture : 🎜rrreeerrreee🎜Dans le développement quotidien, maîtriser les éléments ci-dessus les compétences vous suffisent pour gérer facilement l'écriture de style~🎜🎜[Fin]🎜🎜Pour plus de connaissances liées à la programmation, veuillez visiter : 🎜Enseignement de la programmation🎜 ! ! 🎜Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!