Als der Umfang der Anwendung größer wurde, wurde die Beschreibung der Datei application.scss länger, sodass ich mich entschied, diesmal die Datei für jeden Controller zu trennen. Ich hatte viel Ärger und lernte viel, deshalb habe ich beschlossen, einen Artikel zu schreiben, damit ich ihn nicht vergesse.
Ruby 2.5.7 Rails 5.2.4
Ich werde zuerst nur die Antwort schreiben.
application.scss
// require_tree .
// require_self
erb:application.html.erb
<head>
...
<%= stylesheet_link_tag 'application' %>
...
</head>
Es ist in Ordnung, wenn Sie diese Beschreibung und eine .scss-Datei für jeden Controllernamen in app / assets / stylesheet / erstellen!
Ich werde den Inhalt von hier aus ein wenig erklären.
Zuerst habe ich application.scss zu einer Datei im gemeinsamen Stil gemacht und versucht, allen Seiten mit zwei Dateien mit dem Namen controller.scss jeder Seite zu entsprechen. Die Beschreibung zu diesem Zeitpunkt ist wie folgt.
application.scss
// require_self
erb:application.html.erb
<head>
...
<%# application.Laden von scss%>
<%= stylesheet_link_tag 'application' %>
<%#Controller-Name.Laden von scss%>
<%= stylesheet_link_tag params[:controller] %>
...
</head>
Das // require_tree . In der Datei application.scss ist eine Beschreibung, die alle .scss-Dateien in app / assets / stylesheet liest. Löschen Sie sie daher einmal.
Wenn Sie stattdessen params [: controller] in das stylesheet_link_tag von application.html.erb schreiben, können Sie den Pfad des Controllers einschließlich des Verzeichnisses abrufen. Selbst wenn der Controller in Verzeichnisse unterteilt ist, kann diese Schreibmethode verwendet werden.
Diese Methode ist für CSS-Dateien in Ordnung, verursacht jedoch einen Fehler für CSS-Dateien.
.scss kann nur von Browsern unterstützt werden, indem es in das .css-Format kompiliert wird. Mit anderen Worten, es kann normalerweise nicht im .scss-Format angezeigt werden.
Die vorkompilierte .scss-Datei (.css-Datei) wird in der Produktionsumgebung unter app / public / assets gespeichert, und der Dateiname wird in das Hash-Format geändert. Mit anderen Worten, die CSS-Datei kann nicht von den in application.html.erb beschriebenen "<% = stylesheet_link_tag params [: controller]%>" abgerufen werden. Selbst wenn der Dateiname in das Hash-Format geändert wird, funktioniert es, wenn Sie den Hash wie in "stylesheet_link_tag" angeben. Dieser Hash ist jedoch nicht realistisch, da er sich bei jeder Aktualisierung der Datei ändert.
Ich konnte nicht wirklich erreichen, wie die .scss-Datei, die ich machen wollte, vom Controller aufgeteilt wurde, also wechselte ich zu der Beschreibung am Anfang.
Wenn application.scss // require_tree . hat, bedeutet dies, dass alle .scss-Dateien unter Assets / Stylesheet gelesen werden.
Dies sollte nicht zu oft passieren. Wenn Sie jedoch den Stil angeben, während der Klassenname des CSS-Selektors behandelt wird, erhält der später beschriebene Vorrang, sodass Sie ihn nicht wie gewünscht ändern können. Übrigens besteht die Gefahr, dass Abhängigkeiten entstehen.
application.scss
// require_tree .
// require_self
Wenn Sie wie zu Beginn schreiben, wird application.scss geladen, nachdem alle .scss-Dateien geladen wurden. Außerdem ist die Reihenfolge der Inhalte von "// require_tree." In der Wörterbuchreihenfolge und sie werden in der Reihenfolge des Dateinamens a → z gelesen. Je näher die Initiale des Dateinamens zwangsläufig an z im Baum liegt, desto später wird er gelesen, sodass er tendenziell eine höhere Priorität hat.
Schauen wir uns vorher die .scss-Variablen an.
In scss können Eigenschaften und Werte als Variablen verwendet werden. Vorerst in meinem Fall
_variables.scss
//Hamburger Animation
$hamburger-transition: 0.3s;
//Themenfarbe
$thema-color1: #fff9f9;
$thema-color2: #ffefef;
$thema-color-font: #555;
//Medienabfrage
$media-sp-max: 450px;
$media-pc-min: 1024px;
$media-tb-min: $media-sp-max + 1px;
$media-tb-max: $media-pc-min - 1px;
//Beispiel
Name des Selektors{
background: $thema-color1;
}
Mit dieser Option können Sie die Themenfarbe, die Breite der Medienabfrage, den Übergang des Hamburger-Menüs usw. für jede Datei gleichzeitig ändern.
Sie können eine Variable definieren, indem Sie mit $ beginnen und dann den Wert eingeben. Schreiben Sie beim Aufruf einfach den Variablennamen anstelle des Werts.
Da die Variable jedoch nicht in jeder Datei definiert ist, muss die Datei, die nur diese Variable enthält, in die .scss-Datei jedes Controllernamens importiert werden.
Controller-Name.scss
@import "variables";
...
Durch Schreiben von "@import" Dateiname "können in diesem Fall die in _variables geschriebenen Variablen verwendet werden.
Hier stellte sich die Frage.
"Application.scss beschreibt // require_tree .. Jede .scss-Datei beschreibt den Import von Variablendateien. Jedes Mal, wenn jede Datei zur Kompilierungszeit gelesen wird, wird auch die Variablendatei beschrieben. Wird es als CSS-Datei gelesen? "
Ich kann sagen, dass es kein Problem gibt, auch wenn es gelesen wird, aber ich dachte, dass es viel Abfall gibt, also habe ich weiter nachgeforscht.
Das Ergebnis war, dass ich es vermieden habe, ohne es zu wissen. Lol
Ich habe einen Dateinamen erstellt, indem ich in einem Artikel beschrieben habe, wie eine variable Datei erstellt wird, aber es scheint, dass sie nicht durch Hinzufügen eines Unterstrichs "_" am Anfang des Dateinamens kompiliert wird lol Mit anderen Worten, _variables.scss, das dieses Mal verwendet wird, wird von der Vorkompilierung ausgeschlossen, da es sich um einen Dateinamen handelt, der mit einem Unterstrich beginnt. Wenn Sie sorgfältig darüber nachdenken, ist es richtig, dass Dateien, die nur Variablen schreiben, nicht direkt formatiert werden. Es macht also keinen Sinn, in CSS zu konvertieren. Wenn Sie andere Dateien in CSS konvertieren, ersetzen Sie den Variablenteil durch den Inhalt. Ich war seltsamerweise davon überzeugt, dass die variable Datei ausreichen würde, wenn ich das könnte.
Ich werde zu Beginn auf die Implementierungsmethode zurückkommen, aber vorerst denke ich darüber nach, sie auf diese Weise zu betreiben.
application.scss
// require_tree .
// require_self
...
_variables.scss
$Variablennamen:Wert;
...
Jeder Controller-Name.scss
@import "variables";
...
erb:application.html.erb
<head>
...
<%= stylesheet_link_tag 'application' %>
...
</head>
Bisher habe ich den Stil nur in application.scss geschrieben und einen Block erstellt, indem ich den Controller-Namen unter vollständiger Verwendung von Kommentaren geschrieben habe. Ich frage mich jedoch, ob die Wartung einfacher ist, selbst wenn die Datei für jeden Controller getrennt ist. Ich denke. In dem unwahrscheinlichen Fall, dass der Klassenname abgedeckt wird, werden wir ihn auf leicht verständliche Weise visuell beschreiben, indem wir die Selektorverschachtelung verwenden, die auch eine Funktion von .scss ist. (Der Klassenname für die Wiederverwendung (Flex, Grid, BTN usw.) wird in der Datei application.scss separat beschrieben.)
Ich würde mich freuen, wenn Sie mir beibringen könnten, wie man die .scss-Datei für jeden Controller vorkompiliert, ohne // require_tree . zu verwenden!
Wenn Sie Fragen, unterschiedliche Interpretationen oder Unannehmlichkeiten bei der Beschreibungsmethode haben, würden wir uns freuen, wenn Sie in den Kommentaren darauf hinweisen könnten.
Vielen Dank für das Lesen bis zum Ende!
Rails Guide-Asset Pipeline Web Design Leaves - SASS [CSS HappyLife - Lass uns Sass lernen! Vol.7] Teilen Sie Dateien zur einfacheren Verwaltung (teilweise)](http://css-happylife.com/archives/2012/0124_1850.php) HACK NOTE --Sass: Verwalten wir Variablen in einer separaten Datei
Recommended Posts