suchen

Heim >Web-Frontend >HTML-Tutorial >Programmierhandbuch für CSS-SASS-Stil_HTML/Xhtml_Webseitenerstellung

Programmierhandbuch für CSS-SASS-Stil_HTML/Xhtml_Webseitenerstellung

WBOY
WBOYOriginal
2016-05-16 16:36:241577Durchsuche

Da immer mehr Entwickler SASS verwenden, müssen wir auf die Anzahl der SASS-Codes achten. Wir können von der Syntax von CSS (Cascading Style Sheets) ausgehen, um einige der Besonderheiten der SASS-Syntax zu erklären. Schließlich sind CSS-Styleguides sehr verbreitet.

In diesem Artikel werden hauptsächlich einige Funktionen vorgestellt, die mich persönlich interessieren. Möglicherweise können Sie davon profitieren und Ihre eigenen SASS-Nutzungshandbücher erstellen.
Behalten Sie weiterhin Ihre gewohnten CSS-Formatierungsregeln und Styleguides bei

Dieser Artikel konzentriert sich auf die Diskussion einiger Inhalte zu SASS, aber auf dieser Grundlage sollten Entwickler ihre bestehenden und guten Formatierungsregeln beibehalten. Wenn Sie noch keine eigenen Formatierungsregeln entwickelt haben, finden Sie hier einen Überblick über einige Styleguides, die Ihnen bei der Entwicklung Ihrer eigenen CSS-Schreibgewohnheiten helfen sollen. Hier sind nur einige der enthaltenen Dinge:

1. Halten Sie den Zeileneinzug konsistent
2. Halten Sie die Anzahl der Leerzeichen vor und nach dem Doppelpunkt/den Klammern konsistent
3. Behalten Sie einen Selektor pro Zeile und eine Regel pro Zeile bei
4. Versuchen Sie es Schreiben Sie relevante Attribute in Together
5. Erstellen Sie einen Plan für Benennungsregeln für Klassennamen
6. Vermeiden Sie die Verwendung von CSS-ID-Selektoren
7. Warten Sie

Als nächstes lernen wir, wie man schönen SASS-Code schreibt, am Beispiel des Schreibens einer Eigenschaft der .weather-Klasse:
Erste Liste @extend(s)

CSS-CodeInhalt in die Zwischenablage kopieren
  1. .Wetter {
  2. @extends %module;
  3. ...
  4. }

Auf diese Weise können Entwickler eine klare Vorstellung behalten, die Beziehung zwischen dieser Klasse und ihren Attributen und anderen Klassen und ihren Attributen sofort erkennen und eine klare Vorstellung von der Attributkonsistenz und der Wiederverwendung von Attributen behalten.
Normaler Stil

CSS-CodeInhalt in die Zwischenablage kopieren
  1. .Wetter {
  2. @extends %module;
  3. Hintergrund: LightCyan;
    4. ..
    5. }
    6. @include(s)
    8. .Weather {
    9. @extends %module;
  10. Hintergrund: LightCyan; @include Transition(
    11. alle
  11. 0,3s Ease-out); ...
  12. }
    14. Dadurch können Entwickler die Bereitstellung von @extend(s) und @include(s) auf einen Blick sehen, was es für sie selbst und andere Entwickler einfacher macht, den Code zu interpretieren. Sie können in einigen Fällen auch entscheiden, ob zwischen benutzerdefinierten @includes und öffentlichen @includes-Quellen unterschieden werden soll (insbesondere im Hinblick auf die Wiederverwendbarkeit und Aktualität des Codes).
Selektorverschachtelung




CSS-Code

Inhalt in die Zwischenablage kopieren
  1. .Wetter {
  2. @extends %module;
  3. Hintergrund: LightCyan;
    4. @include Transition(
  4. alle 0,3s Leichtigkeit);
    5. > h3 {
  6. border-bottom: 1px solid weiß;
    7. @include transform(rotate(90deg));
    8. }
    9. ｝
Verwenden Sie innerhalb des verschachtelten Abschnitts weiterhin die oben genannten Stilregeln. Verschachtelte Teile sollten immer an letzter Stelle stehen.

Alle Herstellerpräfixe verwenden @mixins
Das Herstellerpräfix (CSS-Präfix) ist sehr zeitkritisch. Aufgrund von Updates moderner Browser werden diese Präfixe immer seltener verwendet. Sie können sich an diese Änderungen anpassen, indem Sie den Inhalt Ihrer Mixins aktualisieren (oder einige in Ihren Mixins verwendete Bibliotheken werden automatisch aktualisiert). Auch wenn das Mixin nur aus einer Zeile besteht, spielt es keine Rolle.

Aber wenn die Privatisierung einiger Anbieterpräfixe sehr schwerwiegend ist, wird es sehr schwierig sein, diese Präfixe zu standardisieren, und die Anwendung anderer Präfixe oder Versionen ohne Präfix wird sich nicht lohnen. Ich werde mich dafür entscheiden, @mixin auf diese Anbieterpräfixe zu verzichten. Zum Beispiel -webkit-line-clamp, -mscontent-zoom-chaining oder ähnliche Situationen.


Verschachteln Sie nicht mehr als 3 Ebenen


CSS-Code
Inhalt in die Zwischenablage kopieren
Wenn Sie mehr als dreimal verschachteln, schreiben Sie wahrscheinlich einen betrügerischen (schlechten?) Selektor. Der Grund für den Betrug liegt darin, dass sich dieser Selektor zu sehr auf die Struktur von HTML verlässt (instabil), zu detailliert ist (die Funktion ist zu leistungsstark und weist keine Flexibilität auf) oder die Wiederverwendbarkeit zu schlecht ist (nicht sehr benutzbar). Gleichzeitig können zu viele Verschachtelungsebenen leicht zu unklarem und schwer verständlichem Code führen.

Manchmal gibt es zu viel Code für eine Klasse, sodass Sie einen Tag-Selektor verwenden müssen. Möglicherweise müssen Sie eine Klasse sehr genau festlegen, um unnötige Kaskadierung zu vermeiden. Selbst wenn möglich, verwenden Sie „extend“, um einige der Wiederverwendbarkeitsfunktionen in CSS zu nutzen.



CSS-Code
Inhalt in die Zwischenablage kopieren
  1. .Wetter
  2. > h3 {
  3. @extend %line-under;
  4. }
  5. }

Verschachtelter Code sollte 50 Zeilen nicht überschreiten

Wenn die Verschachtelung in SASS mehr als 50 Zeilen umfasst, wird sie möglicherweise nicht vollständig auf einer Seite des Compilers angezeigt, was das Lesen und Verstehen des Codes erschwert. Nesting soll ursprünglich das Denken und die Codeorganisation erleichtern und vereinfachen. Wenn es die Lesbarkeit beeinträchtigt, verschachteln Sie es bitte nicht.
Globale und regionale SASS-Dateisequenzen entsprechen Tabelleninhalten

Mit anderen Worten: Sie haben keinen festen Stil. Entwickler sollten sich daran erinnern, den Stil aller Teile konsistent und ordentlich zu halten.

Listen Sie zuerst die Hersteller-/globalen Bibliotheken auf, dann die benutzerdefinierten Bibliotheken, dann die Modi und schließlich die von jeder Abteilung verwendeten Bibliotheken.

Auf diese Weise sieht das „Verzeichnis“ wie im folgenden Beispiel aus, was auf den ersten Blick klar ist:

CSS-CodeInhalt in die Zwischenablage kopieren
  1. /* Anbieterabhängigkeiten */
  2. @import "Kompass";
  4. /* Verfasste Abhängigkeiten */
    5. @import
  5. "width: auto; 🎜>Höhe: auto; float: keine;" id="10_nwp">: keine;" mpid="10" target=" _blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app =0&jk=be9ebff1476c47c4&k=global&k0=global&kdi0=0&luki=9&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=c4476c47f1bf9ebe&ssp2=1&stid=0&t=tpclicked3_hc& tu =u1922429&u=http://www.admin10000.com/document/2137. html&urlid =0" id="10_nwl">:#0000ff;Schriftgröße:14px; Breite :automatisch;Höhe:automatisch; float:none;">global; @import
  6. "global/mixins";
  7. /* Muster */
  8. @import "global/tabs"
  9. ; @import "global/modals";
  10. /* Abschnitte */
  12. @import "global/header"; @import
  13. "global/footer";

    Diese Dateien sind wie ein Kompass, die Farben und Mixins erzeugen keinen kompilierten CSS-Code, es handelt sich um reine eigenständige Bibliotheken. Danach wurden Muster eingeführt, um das Umschreiben ohne Spezifitätskonflikte sicherer zu machen.
    SASS sinnvoll in mehrere kleine Dateien aufteilen

    Daran ist nichts auszusetzen. Wenn die Umstände es zulassen, versuchen Sie, mehrere kleine und präzise Dateien zu verwenden, damit Entwickler bestimmte Dateien finden können, anstatt in mehreren großen Dateien mit langem Code nach der Nadel im Heuhaufen zu suchen.

    ...

    CSS-CodeInhalt in die Zwischenablage kopieren
    1. @import "width: auto; Höhe: auto; float: keine;" id="9_nwp">text-decoration: keine;" mpid="9" target=" _blank" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di= 128&fv=0&is_app=0&jk=be9ebff1476c47c4&k=global&k0=global&kdi0=0&luki=9&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=c4476c47f1bf9ebe&ssp2=1&stid = 0&t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/ 2137.html&urlid=0" id="9_nwl">Farbe :#0000ff;Schriftgröße:14px;Breite:automatisch;Höhe:automatisch>float:none;">global< ;/span>/header/header/";
    2. @import "global/header/logo/"
    3. @import "global/header/dropdowns/";
      4. @import
    4. "global/header/nav/"
      5. @import
    5. "global/header/really-special-thingy/";

      Was ich oft mache, ist, diese Dateien einzeln in einer globalen SCSS-Datei zu referenzieren, anstatt auf eine _header.scss-Datei zu verweisen, und dann einzeln in der _header.scss-Datei auf sie zu verweisen. Dadurch kann die Indizierungszeit verkürzt und die Leseeffizienz verbessert werden.

      Sie können Globbing verwenden, wenn zu viele Dateien vorhanden sind und die Importsequenz zu lang ist.
      Denken Sie daran, Partials _partial.scss zu nennen

      Dies ist eine gängige Bezeichnung für Dateien, die nicht selbst kompiliert werden können. Eine solche Datei hängt bis zu einem gewissen Grad von anderen Dateien ab, sodass es unmöglich ist, die Kompilierung unabhängig abzuschließen. Ich persönlich füge beim lokalen Kompilieren gerne einen Unterstrich vor dem Dateinamen hinzu, z. B. _dropdown-menu.scss
      Zeilenzuordnung hinzufügen

      Sehen Sie hier, das bedeutet, dass das Entwicklungstool Ihnen die Quelle jeder Regel mitteilen kann, auch wenn es sich um eine importierte Teildatei handelt.
      Denken Sie bei der Bereitstellung daran, die optimierten Dateien zu kompilieren

      Eine laufende Webseite sollte immer minimales CSS verwenden.
      Es ist nicht erforderlich, eine CSS-Datei einzureichen

      Es kann einige Zeit dauern, aber es kann sehr schön sein, keine CSS-Dateien im Repository zu haben. Die Kompilierung der Dateien erfolgt zum Zeitpunkt der Bereitstellung. Das Einzige, was Sie sehen können, sind also die wunderschön formatierten Sass-Dateien, die optimiert wurden. Dies macht die Beschreibung von Dateien sehr nützlich. Die Dateibeschreibung wird verwendet, um einige vom Versionsherausgeber vorgenommene Änderungen zu vergleichen. Für bereits optimierte CSS-Dateien sind Dateibeschreibungen grundsätzlich unnötig.
      Großzügige Nutzungshinweise

      Selten bereuen Leute, Kommentare in ihrem Code hinterlassen zu haben. Unabhängig davon, ob es sich um nützliche oder unauffällige Kommentare handelt, werden sie schließlich gelöscht, wenn sie in eine optimierte CSS-Datei kompiliert werden, ohne dass dem Entwickler zusätzliche Kosten entstehen.

      .overlay {
      /* Modalitäten sind 6000, Speichernachrichten sind 5500, Header ist 2000 */
      Z-Index: 5000;
      Apropos Anmerkungen: Möglicherweise müssen Sie auch einige Standardisierungsanpassungen daran vornehmen. In SASS eignet sich „//“ hervorragend zum Hinzufügen von Kommentaren und „//“ erleichtert das Kommentieren und Entfernen von Kommentaren.

      　

      Konvertieren Sie einige häufig verwendete Werte und Werte mit besonderer Bedeutung in Variablen
      Wenn Sie feststellen, dass Sie einen Wert wiederverwenden (was im Frontend-Design sehr häufig vorkommt), sollten Sie ihn besser in eine Variable umwandeln. Auf diese Weise können Sie sich durch Benennung an die Bedeutung des Werts erinnern und beim Schreiben von Code die Konsistenz wahren. Ja, Sie müssen beim Ändern dieses Werts keine Zeile für Zeile anpassen.

      Wenn eine Zahl eine offensichtliche Bedeutung hat, ist die Umwandlung in eine Variable unerlässlich.



      CSS-Code
      Inhalt in die Zwischenablage kopieren
      1. $zHeader: 2000;
        2. $zOverlay: 5000;
        3. $zMessage: 5050;
        5. .header {
      6. z-index: $zHeader; }
      7. .overlay {
        9. z-index
      9. : $zOverlay; }
        10. .message {
      11. z-index
        12. : $zMessage;
      12. }
        13. Diese Nummern können in einer einzigen Datei gespeichert und als @imported importiert werden. Mit dieser Methode können Sie eine einheitliche Verwaltung aller Z-Index- oder anderen Variablen
      13. durchführen und Farben in Variablen konvertieren
      Außer Schwarzweiß. Viele Farben sind nicht dafür gedacht, nur einmal verwendet zu werden, auch wenn Sie denken, dass Sie sie nie wieder verwenden werden. Wenn Sie es jedoch in eine Variable konvertieren, wird es möglicherweise an anderer Stelle verwendet. Für Farbvariablen gibt es in Sass Farbfunktionen, die damit umgehen können, z. B. lighten() und darkern(). Dies ermöglicht Ihnen eine einfache Gesamtfarbkontrolle (einmal ändern, vergessen)
      Verschachteln Sie Ihre Medienbibliotheken und benennen Sie sie


      Die Funktion der Verschachtelung von Medienbibliotheken in Sass bedeutet, dass 1. Sie keine Selektoren an anderen Stellen neu schreiben müssen und unnötige Fehler verursachen. 2. Die Regeln, die Sie neu schreiben, werden klar und deutlich, und wenn diese verwendet werden, kann dies sehr verwirrend sein wenn sich der Code am Ende Ihres CSS-Codes oder in anderen Dateien befindet.


      CSS-Code

      Inhalt in die Zwischenablage kopieren

      1. .sidebar {
      2. schweben: richtigrichtig;
      3. Breite: 33,33 %
        4. @include bp(mama-bear) {
      5. Breite: 25 %; }
      6. }
        8. Eine ausführlichere Erklärung gibt es hier: http://css-tricks.com/naming-media-queries/
      Setzen Sie „Shame“ am Ende
    Fügen Sie in Ihrem globalen Stylesheet am Ende eine _shame.scss-Datei ein.




    CSS-Code

    Inhalt in die Zwischenablage kopieren
    @import
    1. "compass"
    2. ...
    4. @import
      5. "Schande"
      6. Wenn Sie schnelle Änderungen vornehmen müssen, können Sie diese hier ändern. Wenn Sie in Zukunft über die nötige Zeit und Energie verfügen, können Sie die in
    _shame.scss vorgenommenen Änderungen an der Gesamtarchitektur besser organisieren und strukturieren. Einzelheiten finden Sie unter: http://csswizardry.com/2013/04/shame-css/
    Sie sind der Anführer, der alles entscheidet



    Sass wird nichts tun, was Sie ihm nicht sagen, daher ist die endgültige Ausgabe der Sass-Datei für jeden unterschiedlich. Das Schreiben von CSS-Dateien mit Sass ist, als würde man Sass nicht verwenden, Sie sind der Anführer des Codes.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie man das Nofollow-Tag schreibt und Einführung in die Verwendung von nofollow_HTML/Xhtml_WebseitenproduktionNächster Artikel：Wie man das Nofollow-Tag schreibt und Einführung in die Verwendung von nofollow_HTML/Xhtml_Webseitenproduktion

In Verbindung stehende Artikel

Mehr sehen