Un résumé de l'utilisation du préprocesseur CSS scss qui mérite d'être collecté

Cet article vous apporte des connaissances pertinentes sur le processeur CSS scss. Le préprocesseur CSS : utilise un langage de programmation spécial pour ajouter certaines fonctionnalités de programmation au CSS, utilise CSS comme cible pour générer des fichiers, puis les développeurs utilisent simplement ce langage pour le travail de codage. J'espère que cela aide tout le monde.

1. Pourquoi le préprocesseur CSS apparaît-il ?

– CSS n'est pas un langage de programmation et ne peut être utilisé que pour écrire des styles de sites Web. Aux débuts du Web, la construction de sites Web était encore relativement basique, et le les styles requis étaient souvent C'est aussi très simple. Cependant, avec l'augmentation des besoins des utilisateurs et la mise à niveau de la technologie des sites Web, la méthode d'écriture statique du CSS n'est progressivement plus satisfaite du projet. Sans toutes les variables, constantes et autres syntaxes de programmation d'un langage de programmation comme js, le code CSS deviendrait inévitablement volumineux et difficile à maintenir. Mais rien ne remplace le CSS, c'est pourquoi le préprocesseur CSS apparaît dans la technologie frontale comme une extension du CSS.

---

2. Préprocesseurs CSS courants

– Jusqu'à présent, la technologie des préprocesseurs CSS est assez mature et de nombreux langages de préprocesseur CSS différents ont émergé. Il en existe actuellement trois principaux : Sass (Scss), Less et Stylus.

---

3. La commodité du préprocesseur CSS

– Prenons Sass comme exemple

– Les principales fonctions de Sass sont : permettre la définition de variables, permettre l'imbrication de code CSS, les fonctions de fonction, Mixin, l'héritage, etc. Ces fonctions rendent l'écriture CSS plus cohérente avec les habitudes du langage de programmation, rendant le code CSS plus réutilisable, rendant les fonctions de code plus intuitives et plus faciles à lire et à maintenir pour les programmeurs.

---

4. Préprocesseur Sass

Variables

Sass vous permet de définir des variables pour la réutilisation du code, utilisez $ pour la définition des variables. Lorsqu'il existe des blocs de code qui utilisent les mêmes attributs, vous pouvez définir une variable pour stocker les attributs réutilisés dans la variable. Lorsqu'une certaine valeur d'attribut doit être modifiée uniformément, il n'est pas nécessaire de rechercher les attributs qui doivent être modifiés un par un dans le code. Au lieu de cela, la variable peut être modifiée directement. $ 进行变量定义。在有使用相同属性的代码块时，可以通过定义一个变量，将复用的属性储存到变量中。当需要统一修改某个属性值时，就无须在代码中挨个去找需要修改的属性，而是直接修改变量即可。

在公共组件药品说明书中，对组件的边框样式进行了单独设置。此样式也用于组件内部各部分分隔的边框。因此可以将样式存储到一个变量当中进行复用。

/deep/ .borderLayout.showBorder{
border: 1px solid #EBEEF5
}
/deep/.borderLayout > p.showBorder.left {
border-right: 1px solid #EBEEF5;
}

通过scss的嵌套规则可以修改为：

$border: 1px solid #EBEEF5
/deep/ .borderLayout.showBorder{
border: $border
}
/deep/.borderLayout > p.showBorder.left {
border-right: $border;
}

---

嵌套

–Sass允许代码嵌套，用于选择后代。相对于css原生的后代选择器，嵌套样式的代码，更加直观。

/deep/ .ant-anchor-link-active>.ant-anchor-link-title{
color:#303133
}

公共组件‘药品说明书’ 的css代码块，用于设置左侧导航栏被鼠标点击选中时，title的显示样式,

使用嵌套规则将代码进行嵌套之后：

/deep/ .ant-anchor-link-active{
 .ant-anchor-link-title{
   color:#303133
 }
}

嵌套之后的代码，更接近js一样的结构，而不再是一整行的选择器。更有利于观察出代码间的各种关系。

此外，scss的也可以实现属性嵌套以及伪元素嵌套，从而实现更加精简的代码

---

Mixin

在JavaScript等编程语言中，允许将需要复用的代码块编写成一个函数，在有需要的地方就调用这个表达式从而完成代码编写一次就可以完成多次复用的功能。scss的Mixin实现的也是类似的功能。但是Mixin的代码块不产生一个值。

定义Mixin代码块需要使用 @mixin ,调用一个已定义的Mixin代码块使用@include

依旧是以药品说明书这个组件的代码说明

/deep/ .borderLayout > p > .layoutCon {
   overflow: hidden;
   &:hover{ // 此处即为伪元素嵌套
       overflow: auto;
   }
}
.m-nav-bar{
   display: flex;
   flex-direction: column;
   overflow: auto;
   height:100%;
   overflow: hidden;
   &:hover{
       overflow: auto;
   }
}

组件中有两个选择器都出现了同一段css代码块，其作用是隐藏页面中的滚动条，当鼠标hover到所属区域时，滚动条显示。

隐藏滚动条的代码可以使用mixin单独定义出来，然后再调用。

@mixin hide-scroll{
 overflow: hidden;
   &:hover{
       overflow: auto;
   }
}

/deep/ .borderLayout > p > .layoutCon {
  @include hide-scroll;
}

.m-nav-bar{
		@include hide-scroll;
   display: flex;
   flex-direction: column;
   overflow: auto;
   height:100%;
}

---

继承

继承也是编程语言中，减少代码量的重要功能，在scss中，继承功能同样重要。如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用继承就显得很有用。

当需要继承一段代码时，可以使用@extend，extend之后的选择器就是被继承代码。

（看起来，继承和mixin实现的功能似乎是类似的。如果将@mixin

Dans les instructions publiques des médicaments des composants, le style de bordure du composant est défini séparément. Ce style est également utilisé pour les bordures qui séparent les pièces à l'intérieur des composants. Par conséquent, le style peut être stocké dans une variable pour être réutilisé.

rrreeeLes règles d'imbrication via scss peuvent être modifiées en : rrreee

🎜Nesting🎜🎜🎜 – Sass permet l'imbrication de code pour sélectionner les descendants. Comparé au sélecteur de descendant natif de CSS, le code de style imbriqué est plus intuitif. 🎜rrreee🎜Le bloc de code CSS du composant public 'Drug Instructions' est utilisé pour définir le style d'affichage du titre lorsque la barre de navigation de gauche est sélectionnée par un clic de souris 🎜🎜Après avoir utilisé des règles d'imbrication pour imbriquer le code : 🎜rrreee🎜. Imbrication Le code suivant est plus proche d'une structure de type js, plutôt que d'une ligne entière de sélecteurs. Il est plus propice à l’observation de diverses relations entre les codes. 🎜🎜De plus, scss peut également implémenter l'imbrication d'attributs et l'imbrication de pseudo-éléments pour obtenir un code plus rationalisé🎜🎜🎜🎜Mixin🎜🎜🎜Dans les langages de programmation tels que JavaScript, il est permis d'écrire des blocs de code qui doivent être réutilisés en une seule fonction, appelez cette expression si nécessaire pour terminer l'écriture du code une fois et compléter la fonction de réutilisation multiple. Mixin de scss implémente également des fonctions similaires. Mais le bloc de code du mixin ne produit pas de valeur. 🎜🎜Pour définir un bloc de code Mixin, vous devez utiliser @mixin, et pour appeler un bloc de code Mixin défini, utilisez @include🎜🎜Il est toujours basé sur le description du code du composant des instructions du médicament🎜rrreee 🎜Le même bloc de code CSS apparaît dans les deux sélecteurs du composant. Sa fonction est de masquer la barre de défilement sur la page. Lorsque la souris survole la zone correspondante, la barre de défilement apparaît. affiché. 🎜🎜Le code pour masquer la barre de défilement peut être défini séparément à l'aide de mixin puis appelé. 🎜rrreee🎜🎜🎜Héritage🎜🎜🎜L'héritage est également une fonction importante dans les langages de programmation pour réduire la quantité de code. En scss, la fonction d'héritage est tout aussi importante. L'héritage est utile si un style est presque identique à un autre style, avec seulement quelques différences. 🎜🎜Lorsque vous devez hériter d'un morceau de code, vous pouvez utiliser @extend Le sélecteur après extension est le code hérité. 🎜🎜 (Il semble que les fonctions implémentées par héritage et mixin soient similaires. Si le code de @mixin est directement hérité, les fonctions implémentées seront-elles les mêmes ?) 🎜🎜 (Partage vidéo d'apprentissage : 🎜 tutoriel vidéo CSS🎜)🎜🎜

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!