Warum wird in SCSS „_' vor dem Dateinamen hinzugefügt?-CSS-Tutorial-php.cn

Warum wird in SCSS „_' vor dem Dateinamen hinzugefügt?

WBOY

Freigeben： 2023-08-25 14:09:13

nach vorne

1313 Leute haben es durchsucht

Warum wird in SCSS „_ vor dem Dateinamen hinzugefügt?

SCSS ermöglicht Entwicklern, CSS strukturierter zu schreiben. Außerdem können wir bei der Verwendung von SCSS mehrere Dateien für CSS erstellen und die erforderlichen Dateien in die Haupt-SCSS-Datei importieren.

In diesem Tutorial sehen wir das Ziel, „_“ vor dem Dateinamen in SCSS hinzuzufügen.

Wann sollten Sie in SCSS „_“ vor einen Dateinamen setzen?

Immer wenn wir -_' vor einem Dateinamen in SCSS hinzufügen, ignoriert der Compiler die Datei beim Kompilieren von SCSS. Wenn der Dateiname mit dem Zeichen „_“ beginnt, wird die Datei zu einer Teildatei.

Zum Beispiel haben wir zwei Dateien mit den Namen „style.scss“ und „_partial.scss“. Der Compiler kompiliert nur die Datei style.scss und ignoriert die Datei _partial.scss. Wenn wir jedoch das CSS der Datei _partial.scss verwenden müssen, können wir es in die Datei style.scss importieren.

Beispiel

Das folgende Beispiel zeigt, wie SCSS mit HTML verwendet wird.

Dateiname – demo.html

Wir haben der Datei unten eine „style.css“-Datei hinzugefügt, indem wir das „“-Tag verwenden, das vom SCSS-Compiler generiert wird. In der Ausgabe kann der Benutzer beobachten, dass CSS auf den Text des div-Elements angewendet wird und der Text kursiv dargestellt wird.

<html>
<head>
   <link rel = "stylesheet" href = "style.css">
</head>
<body>
   <h2> Using the <i> SCSS </i> with HTML. </h2>
   <div> This is a div element. </div>
</body>
</html>

Nach dem Login kopieren

Dateiname – style.scss

In der Datei unten haben wir Variablen erstellt, um die Schriftgröße und den Schriftstil zu speichern. Danach verwenden wir Variablen, um das div-Element zu formatieren.

$font-size : 20px;
$font-style: italic;
div {
   font-size: $font-size;
   font-style: $font-style;
}

Nach dem Login kopieren

Dateiname – style.css

Immer wenn wir die Datei style.scss kompilieren, wird der folgende Code zur Verwendung durch die HTML-Datei generiert.

div {
   font-size: 20px;
   font-style: italic;
}

Nach dem Login kopieren

Beispiel

<html>
<head>
   <style>
      /* compiled scss code */
      div {
         font-size: 20px;
         font-style: italic;
      }
   </style>
</head>
<body>
   <h2> Using the <i> SCSS </i> with HTML. </h2>
   <div> This is a div element. </div>
</body>
</html>

Nach dem Login kopieren

Beispiel

In diesem Beispiel zeigen wir, wie man „_“ vor dem Dateinamen hinzufügt und wie man dessen CSS in der Haupt-CSS-Datei verwendet.

Dateiname – demo.html

Die folgende Datei enthält einfachen HTML-Code und die Datei „style.css“ innerhalb des -Tags.

<html>
<head>
   <link rel = "stylesheet" href = "style.css">
</head>
<body>
   <h2> Using the <i> SCSS from the _partial.css file </i> with HTML.</h2>
   <div> Content of the div element. </div>
</body>
</html>

Nach dem Login kopieren

Dateiname – _partial.css

Benutzer müssen eine _partial.scss-Datei mit „_“ vor dem Dateinamen erstellen. Danach muss der Benutzer den folgenden Code in die Datei einfügen. Wenn wir SCSS-Code kompilieren, ignoriert der Compiler den Code dieser Datei

$text-color: blue;
$border-width: 2px;
$border-style: solid;
$border-color: green;

Nach dem Login kopieren

Dateiname – style.scss

Jetzt müssen Benutzer den folgenden Code zur Datei style.scss hinzufügen, die die Haupt-CSS-Datei ist. Im folgenden Code haben wir das CSS aus der Datei „_partial.css“ importiert. Auf diese Weise können wir den Code aus einem Teil der Datei verwenden.

@import "partial"
div {
   color: $text-color;
   border: $border-width $border-style $border-color;
}

Nach dem Login kopieren

Dateiname – style.css

Immer wenn wir die Datei style.scss kompilieren, wird automatisch die Datei style.css generiert.

div {
   color: blue;
   border: 2px solid green;
}

Nach dem Login kopieren

Beispiel

<html>
<head>
   <style>
      /* compiled SCSS code from the _partial.css file */
      div {
         color: blue;
         border: 2px solid green;
      }
   </style>
</head>
<body>
   <h2> Using the <i> SCSS from the _partial.css file </i> with HTML.</h2>
   <div> Content of the div element. </div>
</body>
</html>

Nach dem Login kopieren

Der Hauptgrund für das Einfügen von „_“ vor Dateinamen in SCSS besteht darin, die Datei zu partizipieren, damit der Compiler sie ignorieren kann. Wann immer wir das CSS einer Teildatei verwenden müssen, können wir es in die Hauptdatei importieren.

Der Hauptvorteil der Verwendung von Teildateien besteht darin, dass wir keinen doppelten Code schreiben müssen, was die Übersichtlichkeit erhöht. Beispielsweise können wir verschiedene Teildateien für verschiedene Teile von CSS hinzufügen und diese bei Bedarf verwenden.

Das obige ist der detaillierte Inhalt vonWarum wird in SCSS „_' vor dem Dateinamen hinzugefügt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!