Eine Zusammenfassung der Verwendung von CSS-Präprozessor-SCSS, die es wert ist, gesammelt zu werden

Dieser Artikel vermittelt Ihnen relevantes Wissen über den CSS-Prozessor scss: Der CSS-Präprozessor verwendet eine spezielle Programmiersprache, um CSS einige Programmierfunktionen hinzuzufügen, und verwendet CSS als Ziel zum Generieren von Dateien. Anschließend verwenden Entwickler diese Sprache einfach für Codierungsarbeiten. Ich hoffe, es hilft allen.

1. Warum erscheint der CSS-Präprozessor?

– CSS ist keine Programmiersprache und kann nur zum Schreiben von Website-Stilen verwendet werden Erforderliche Stile waren oft Es ist auch sehr einfach. Mit zunehmenden Benutzeranforderungen und der Verbesserung der Website-Technologie ist die statische Schreibmethode von CSS jedoch nach und nach nicht mehr mit dem Projekt zufrieden. Ohne alle Variablen, Konstanten und andere Programmiersyntax einer Programmiersprache wie JS würde CSS-Code unweigerlich aufgebläht und schwer zu warten sein. Da es jedoch keinen Ersatz für CSS gibt, erscheint der CSS-Präprozessor in der Frontend-Technologie als Erweiterung von CSS.

---

2. Gängige CSS-Präprozessoren

– Bisher ist die CSS-Präprozessortechnologie recht ausgereift und es sind viele verschiedene CSS-Präprozessorsprachen entstanden. Derzeit gibt es drei Mainstream-Varianten: Sass (Scss), Less und Stylus.

---

3. Die Bequemlichkeit des CSS-Präprozessors

– Nehmen Sie Sass als Beispiel

– Die Hauptfunktionen von Sass sind: Ermöglichen der Definition von Variablen, Ermöglichen der Verschachtelung von CSS-Code, Funktionsfunktionen, Mixin, Vererbung usw. Diese Funktionen machen das Schreiben von CSS konsistenter mit den Programmiersprachengewohnheiten, machen CSS-Code wiederverwendbar, machen Codefunktionen intuitiver und für Programmierer einfacher zu lesen und zu warten.

---

4. Sass-Präprozessor

Variablen

Mit Sass können Sie Variablen für die Wiederverwendung von Code definieren. Verwenden Sie $ für die Variablendefinition. Wenn es Codeblöcke gibt, die dieselben Attribute verwenden, können Sie eine Variable definieren, um die wiederverwendeten Attribute in der Variablen zu speichern. Wenn ein bestimmter Attributwert einheitlich geändert werden muss, müssen die zu ändernden Attribute nicht einzeln im Code gefunden werden, sondern die Variable kann direkt geändert werden. $ 进行变量定义。在有使用相同属性的代码块时，可以通过定义一个变量，将复用的属性储存到变量中。当需要统一修改某个属性值时，就无须在代码中挨个去找需要修改的属性，而是直接修改变量即可。

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

/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

In den Medikamentenanweisungen für öffentliche Komponenten wird der Rahmenstil der Komponente separat festgelegt. Dieser Stil wird auch für die Ränder verwendet, die Teile innerhalb von Komponenten trennen. Daher kann der Stil zur Wiederverwendung in einer Variablen gespeichert werden.

rrreeeDie Verschachtelungsregeln über scss können wie folgt geändert werden: rrreee

🎜Verschachtelung🎜🎜🎜 – Sass ermöglicht Codeverschachtelung für die Auswahl von Nachkommen. Im Vergleich zum nativen CSS-Selektor für Nachkommen ist der verschachtelte Stilcode intuitiver. 🎜rrreee🎜Der CSS-Codeblock der öffentlichen Komponente „Arzneimittelanweisungen“ wird verwendet, um den Anzeigestil des Titels festzulegen, wenn die linke Navigationsleiste per Mausklick ausgewählt wird. 🎜🎜Nach der Verwendung von Verschachtelungsregeln zum Verschachteln des Codes: 🎜rrreee🎜 Verschachtelung Der nachfolgende Code ähnelt eher einer js-ähnlichen Struktur als einer ganzen Reihe von Selektoren. Dies erleichtert die Beobachtung verschiedener Beziehungen zwischen Codes. 🎜🎜Darüber hinaus kann scss auch die Verschachtelung von Attributen und Pseudoelementen implementieren, um einen optimierten Code zu erzielen In eine Funktion umwandeln, rufen Sie diesen Ausdruck bei Bedarf auf, um die Funktion des einmaligen Schreibens von Code und seiner mehrfachen Wiederverwendung abzuschließen. Mixin von scss implementiert auch ähnliche Funktionen. Der Codeblock des Mixins erzeugt jedoch keinen Wert. 🎜🎜Um einen Mixin-Codeblock zu definieren, müssen Sie @mixin verwenden, und um einen definierten Mixin-Codeblock aufzurufen, verwenden Sie @include 🎜🎜Es basiert immer noch auf Codebeschreibung der Komponente der Arzneimittelanweisungen 🎜rrree 🎜In beiden Selektoren der Komponente wird derselbe CSS-Codeblock angezeigt. Seine Funktion besteht darin, die Bildlaufleiste auf der Seite auszublenden . 🎜🎜Der Code zum Ausblenden der Bildlaufleiste kann separat per Mixin definiert und dann aufgerufen werden. 🎜rrreee🎜🎜🎜Vererbung🎜🎜🎜Vererbung ist auch eine wichtige Funktion in Programmiersprachen, um die Codemenge zu reduzieren. In scss ist die Vererbungsfunktion ebenso wichtig. Die Vererbung ist nützlich, wenn ein Stil mit nur wenigen Unterschieden nahezu identisch mit einem anderen Stil ist. 🎜🎜Wenn Sie einen Code erben müssen, können Sie @extend verwenden. Der Selektor nach „extend“ ist der geerbte Code. 🎜🎜 (Es scheint, dass die durch Vererbung und Mixin implementierten Funktionen ähnlich sind. Wenn der Code von @mixin direkt geerbt wird, sind die implementierten Funktionen dann dieselben?) 🎜🎜 (Teilen von Lernvideos: 🎜 CSS-Video-Tutorial🎜)🎜🎜

Das obige ist der detaillierte Inhalt vonEine Zusammenfassung der Verwendung von CSS-Präprozessor-SCSS, die es wert ist, gesammelt zu werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!