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 樣式的文章，現(xiàn)在它來了。

前端三劍客之一，層疊樣式表(Cascading Style Sheets，CSS），就是對 HTML 骨架的潤色。但是我們通過原生編寫的樣式，會出現(xiàn)很多重復(fù)代碼，而已邏輯不明確。

那么，我們可以通過 CSS 的擴展語言來進行編寫維護。目前前端界比較流行的兩個 CSS 擴展語言是 less 和 sass。本文講解的是 sass。

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

SASS 提供了兩種編寫的語法，一種是 .scss 為后綴，另一種是 .sass 為后綴。

• .scss 為后綴，語法用 {} 修飾
• .sass 為后綴，語法是縮緊方式

推薦使用 .scss

項目集成

angular 項目使用腳手架生成，在添加樣式這一個步驟，會詢問你編寫樣式的方式，讓你選擇：

選擇 SCSS，然后確認(rèn)即可，就是這么簡單。

在 angular 中編寫樣式，可以分為組件樣式和全局樣式?！鞠嚓P(guān)教程推薦：《angular教程》】

組件樣式

組件樣式就是組件單獨擁有，其他組件不會生效，比如，你通過 ng g compoent demo 生成組件：

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

其中 demo.compoent.scss 就是 deom 這個組件的樣式表。

全局樣式

angular 腳手架生成的項目，默認(rèn)在 src/style.scss 文件存放全局的樣式。在這個文件修改的樣式，將對整個應(yīng)用的樣式產(chǎn)生影響。

Sass 重點語法

針對日常的開發(fā)工作，我們來介紹下比較重要的內(nèi)容。

1. 使用變量

使用變量能夠讓你在多個頁面或者頁面中的多處進行調(diào)用。

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

我們將變量方式在一個文件中進行管理，當(dāng)需要使用到它的使用，我們直接進行 @import 導(dǎo)入使用即可：

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

#demo {
  color: $primary-color; // 調(diào)用
}

2. 使用嵌套

在使用 css 樣式的時候，我們需要對不同元素進行樣式的編寫，我們需要考慮到元素所在的層次，采用不同的權(quán)重對其進行修改。

現(xiàn)在有骨架如下：

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

現(xiàn)在有樣式如下：

#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 函數(shù)：

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

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

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

4. 使用 mixin 混合器

在編寫樣式的時候，我們會出現(xiàn)在多個類中調(diào)用同一份的樣式內(nèi)容。比如：

.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 提取公共的代碼出來，方便我們更改，改一處多處更改。當(dāng)然，extend

L'un des trois épéistes front-end, Cascading Style Sheets (

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.

Ensuite, nous pouvons écrire et maintenir via le langage d'extension de 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="http://ipnx.cn/course.html" target="_blank" textvalue="編程教學(xué)"> 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>

  ??Où 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;
  }

  ??Nous gérons la méthode variable dans un fichier. Lorsque nous avons besoin de l'utiliser, nous pouvons l'importer directement en utilisant @import?: ??

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

  ????2. Utiliser l'imbrication???? ??Lorsque nous utilisons le <. code>css, nous devons écrire des styles pour différents éléments. Nous devons considérer le niveau des éléments et les modifier avec des poids différents. ????Maintenant, le squelette est le suivant : ??

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

  ??Maintenant le style est le suivant : ??rrreee?? Ensuite, nous pouvons utiliser une écriture imbriquée, avec une logique claire et une lecture facile : ??rrreee????3. Utiliser des calculs??????. 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!