Stil Eine Seite mit SASS

Sie können mit CSS viel tun - vielleicht mehr als Sie denken, aber die ehrwürdige Style-Bogensprache hat seine Einschränkungen. In einem modernen Webprojekt, mit NPM-Modulen, JavaScript-Frameworks, ES6 und mehr, kann es sich etwas anachronistisch fühlen, um wieder zum Schreiben von Vanille-CSS zurückzufallen.

Glücklicherweise gibt es Optionen, mit denen Sie andere Sprachen verwenden können, die mit CSS kompilieren. Diese Tools werden als "Präprozessoren" bezeichnet, integrieren diese Tools in Ihren Web-Build-Prozess und generieren nutzbare Styles-Blätter aus der Erweiterungssprache, die Sie ausgewählt haben.

SASS (syntaktisch fantastische Stylesheets) ist einer der beliebtesten dieser Optionen - Lesen Sie mehr mit unserem Guide Was ist sass? SASS fügt viele wertvolle neue Sprachfunktionen hinzu, die nicht (derzeit) in CSS verfügbar sind, um Ihre Websites und Apps aufrechtzuerhalten. Dazu gehören Dinge wie Mixins- und Kontrollrichtlinien, die entmutigend, aber eigentlich recht unkompliziert sind, und wir schauen uns diese in diesem Tutorial an. Wenn Sie die Dinge sogar einfacher halten möchten, könnten Sie ein Benutzer a Webseitenersteller .

• Coole CSS-Animationen, um wieder herzustellen

Es gibt eigentlich zwei verschiedene Syntaxe für SASS, eine, die eine .scss-Dateierweiterung verwendet, und eine, die .SASS verwendet. Das erstere sieht eher aus wie CSS (in der Tat sind alle .css-Dateien gültig. SSSSS-Dateien), während letztere CSS-Klammern und Semikolons für Einbuchtung und Neulinien beseitigt. Wir konzentrieren uns auf. Sscss, aber die Wahl ist einfach auf die persönliche Präferenz. Aktualisieren Sie Ihre Site? Stellen Sie sicher, dass Ihre Web-Hosting Service macht das, was Sie brauchen, und holen Sie sich Cloud-Speicherung. Recht auch.

Laden Sie die Dateien für dieses Tutorial hier herunter (Ausgabe 282)

01. Richten Sie den Compiler ein

Die Verwendung von SASS erfordert im Wesentlichen einen Compiler. Der einfachste Weg, dies zu tun, wäre an der Befehlszeile. Sie können dies mit Homebrew tun. Der Sass-Compiler ist in verschiedenen Sprachen implementiert, und HomeBrew wird die DART-Version installieren, die schnell ist.

brew install sass/sass/sass

02. Erstellen Sie eine Sass-Datei

Lassen Sie uns versuchen, eine einfache SASS-Datei zu erstellen, um den Compiler in Aktion zu sehen. Eine der einfachsten Konzepte in SASS ist Variablen, die einmal mit einem angegeben werden können Guthaben Präfix und dann in Ihrem gesamten Code verwendet. Wir werden erstellen. SASS-INPUT.SCSS. .

 $ text-color: #cccccc;
Körper {
    Farbe: $ Textfarbe;
} 

03. Command Line Compilation

Jetzt können wir den Sass-Compiler an der Befehlszeile ausführen, um unsere .scss-Datei in den CSS-Ausgang zu konvertieren. Sie werden in der Ausgabedatei feststellen, dass die Variablen weg sind und nur mit einer Standard-CSS-Syntax überlassen sind, die vom Browser verwendbar ist.

 SASS SASS-INPUT.SCSS CSS-OUTPUT.CSS 

04. Automatisieren Sie Ihren Build

Das ist großartig, aber Sie möchten den Sass-Compiler nicht jedes Mal, wenn Sie Änderungen vornehmen, nicht manuell ausführen. Eine Option ist, dass er auf Änderungen an Dateien in einem Verzeichnis anhören und die Ausgabe automatisch in ein anderes Verzeichnis neu kompiliert (Konservierung von Dateinamen). Dadurch können Sie auch effektiv Ihre Quelle. SSSSS-Datei von Ihrem gebauten CSS absetzen.

 Mkdir SRC
Mkdir SRC / SASS
mkdir public.
mkdir public / css
SASS --WATCH SRC / SASS /: PUBLIC / CSS /

05. Spielen Sie mit dem Sass-Styling

Schauen wir uns nun eine einfache Starter-Site an, mit der wir mit dem Sass-Styling herumspielen können. Wir können beginnen, indem wir ein unstauliches Beispiel-Standort klonen. Die Schlüsselstelle ist, dass unsere HTML-Seite nichts über SASS kennt. Es verfügt über einen einzelnen CSS-Dateieintrittspunkt, den wir als nächstes erstellen werden.

 CD Public
curl -o index.html https: // roh.
githubuscontent.com/simon-a-j/sass-
Lernprogramm/
Master / Public / Index.html 

06. Das Haupt-Stylesheet

Wir verwenden styles.css als Haupt-CSS-Einstiegspunkt, der später zum Importieren anderer Module verwendet werden. Das bedeutet, dass wir SASS mitteilen müssen, um diese Datei zu generieren, sodass wir auch eine Styles.Scss-Datei erstellen müssen, in unserem SRC / SASS-Ordner. Wenn du läuft sass --watch. Dazu wird dies automatisch in CSS in der Öffentlichkeit / CSS. Ordner und erfrischend Ihre Site zeigt seine Änderungen an. Versuchen Sie, einige Änderungen vorzunehmen und die HTML-Seite im Browser aufzufragen, während Sie gehen.

 // styles.scsss
Körper {
  Schriftfamilie: Sans-Serif;
  Text-ALIGN: CENTER;
}

07. Farbschema verwalten

Schauen wir uns an, wie SASS helfen kann, ein Farbschema für den Standort zu verwalten. Es ist üblich, eine Palette von fünf oder sechs Farben für eine Webseite zu haben. Wir können diese externalisieren _Colours.Scss. . Das Unterstrich-Präfix sagt SASS an, dass Sie dies nicht in eine neue HTML-Datei (A 'Partial') kompilieren. Aber wir können es etwas anders verwenden.

 // _Colours.Scss
$ farb-primär: # 231651;
$ farbe sekundär: # 2374AB;
$ farblicht: # d6fff6;
$ color-highlight1: # 4dccbd;
$ color-highlight2: # FF8484;

08. Verwenden Sie Farbvariablen

Um diese Farbvariablen zu verwenden, haben wir gerade eingerichtet, wir können SASS mitteilen, um den Inhalt von zu importieren _Colours.Scss. in unser Hauptstilblatt. Wir machen das mit einem @importieren Erklärung. Sobald Sie dies getan haben, beachten Sie, wie die Variablen in der Ausgabe-CSS-Datei gelöst sind.

 // styles.scsss
@Import "_Colours.scss";
Körper {
  Schriftfamilie: Sans-Serif;
  Text-ALIGN: CENTER;
  Hintergrund: Lineargradient (155DEG,
$ farb-primär 70%, $ farb-sekundär
70%);
  Farbe: $ farblicht;
  MIN-HÖHE: 100VH;
}
h1 {
    Farbe: $ farb-highlight1;
}
h2 {
  Farbe: $ farb-highlight2;
}

09. Nest-Styles.

Eine weitere nützliche Merkmale von Sass ist die Fähigkeit, Stile zu nisten. Das heißt, Sie können einen Stil für ein Element angeben, das nur angewendet wird, wenn dieses Element innerhalb eines übergeordneten Elements auftritt. Lassen Sie uns dies verwenden, um unser Styling von Links zu differenzieren, je nachdem, ob sie in der Kopf- oder Körperkörper erscheinen.

 A {
  Farbe: $ farb-sekundär;
}
.Profile-Header {
  ein {
    Schriftgröße: 16px;
    Margin-Links: 10px;
    Margin-Right: 10px;
    Polsterung: 10px;
    Borderradius: 5px;
    Farbe: $ farblicht;
    Hintergrundfarbe: $ farbsekundär;
  }
}

10. Notieren Sie das responsive Raster

Lassen Sie uns nun unseren Inhalt in ein responsives Rasterformat arrangieren. SASS hat ein paar Funktionen, um dies wesentlich einfacher zu machen. Sowie Variablen, um unsere Haltepunkte anzugeben, können wir nisten @Medien Abfragen innerhalb von anderen Stilen, was das Verhalten, das auf der Bildschirmgröße spezifisch ist, wesentlich lesbarer ist.

 $ Haltepunkt: 800px;
.profile-körper {
  Anzeige: Flex;
  Ausrichten-Gegenstände: Stretch;
  Rechtfertigungsinhalt: Raum-um;
  Margin-Top: 32px;
  Margin-Links: 10VW;
  Margin-Right: 10VW;
  @Media-Bildschirm und (Max-Breite:
$ Haltepunkt) {
      Flex-Richtung: Säule;
  }
}
.Profile-Sektion {
  Hintergrundfarbe: $ color-highlight1;
  Farbe: $ farb-primär;
  Marge: 16px;
  Borderradius: 10px;
  Breite: 340px;
  .Profile-Inhalt {
    Polsterung: 20px;
  }
  @Media-Bildschirm und (Max-Breite:
$ Haltepunkt) {
    Breite: 100%;
  }
}

11. Führen Sie Mixins ein

Mixins sind ein weiteres leistungsfähiges Sass-Feature, das Sie als eine Möglichkeit haben, wiederverwendbare Stylesheet-Funktionen zu definieren. Ein Mixin ist einmal definiert, kann Parameter einnehmen und können dann überall in Ihrem Sass-Code aufgerufen werden. Ein Gebrauchsfall dafür ist, das Anbieter-Präfix zu bewältigen. Wenn wir möchten, dass eine CSS-Transformation in älteren Browsern funktioniert, ist dies möglicherweise erforderlich -webkit. Präfix für Chrome und Safari zum Beispiel. Lassen Sie uns ein Mix definieren, das sich für uns darum kümmert.

12. Mixins und Variablen

Wir können auch ein Mixin mit mehreren Parametern verwenden, kombiniert mit einigen Variablen, die wir definieren, um ein elegantes Styling verschiedener Teile der Seite zu gewinnen. Wenn wir ein Mixin erstellen, das Vordergrund- und Hintergrundfarbe definiert, können wir auf Einblicke für verschiedene Abschnitte aus einer endlichen Liste von Stilvariablen auswählen.

$ style11: (Vordergrund: $ farblicht,
Hintergrund: $ farb-sekundär);
$ style2: (Vordergrund: $ farb-primär,
Hintergrund: $ color-highlight1);
$ sty33: (Vordergrund: $ farb-primary,
Hintergrund: $ farb-highlight2);
@mixin Content-Stil ($ Vordergrund,
$ Hintergrund) {
  Farbe: $ Vordergrund;
  Hintergrundfarbe: $ Hintergrund;
} 

13. Verwenden Sie Ihr neues Mixin

 .Profile-Header {
  ein {
    @include Content-Style ($ style1 ...);
    // ...
  }
}
.Profile-Sektion {
    @include Content-style ($ style2 ...);
  // ...
}

14. Vererbung verstehen.

Ein weiteres sehr mächtiges Merkmal von SASS ist Erbschaft. Im Moment haben wir zwei verschiedene Arten für Links auf unserer Seite. Wenn wir gemeinsame Stile über beide, nicht mit dem Kopieren und Einfügen von CSS verwenden möchten, verwenden wir nicht eine Platzhalterklasse, die mit '%' bezeichnet ist, die von beiden erweitert werden kann, wodurch sie ihre Stile erben können?

% Link-Shared {
  Schriftgröße: 16px;
  Margin-Links: 10px;
  Margin-Right: 10px;
  Polsterung: 10px;
  Borderradius: 10px;
}

15. Klassen ausdehnen

Jetzt können wir die Link-Shared-Klasse erweitern, um das Linkstyling auf unserer gesamten Site zu definieren. Dies beginnt, ziemlich elegant auszusehen. Wir definieren, wie ein Link allgemein aussieht, einfach einmal, wiederverwenden Sie es in ganz, und geben Sie die Farben aus der Palette für jede Verbindung mit einem Mixin an.

 .Profile-Header {
  ein {
    @Extend% Link-Shared;
    @include Content-Style ($ style1 ...);
  }
}
ein {
  @Extend% Link-Shared;
  @include Content-style ($ style3 ...);
}

16. Ändern Sie das Thema

Schauen wir uns jetzt an, wie einfach SASS das Thema unseres Standorts ändert. Die aktuellen Farben sind möglicherweise nicht perfekt. Wir können nicht nur die Farbvariablen ändern, sondern auch einige SASS-Funktionen verwenden, um fähige Farben zu generieren, die mit einem Primary unserer Wahl entsprechen.

 // _Colours.Scss
$ farb-primär: # 2e1f27;
$ farbe-sekundär: hell ($ farb-primary,
25%);
$ farblicht: hellern ($ farbig-primary,
75%);
$ color-highlight1:
hellend (ergänzend (ergänzend ($ farbig-primär), 50%);
$ color-highlight2:
hellend (ergänzend (ergänzend ($ farb-sekundär), 50%);

17. Wählen Sie ein neues Farbsatz aus

Nun können wir das gesamte Farbschema für die Website einfach durch Angabe eines neuen Farbprimärwerts in der _Colours.Scss. Datei. Geben Sie es einen Versuch, indem Sie mit alternativen Farben experimentieren. Wir könnten auch sass Randomise it haben (aber denken Sie daran, dass dies sich auf den Punkt bezieht, an dem Ihre Site erstellt ist, nicht die Laufzeit). Sie können auch versuchen, die Logik anzupassen, die wir verwenden, um die anderen Farben im Thema aus dem Primary abzuleiten.

 $ rot: zufällig (255);
$ grün: zufällig (255);
$ Blau: zufällig (255);
$ farbe-primär: RGB ($ rot, $ grün, $ blau); 

18. Verwenden Sie Bibliotheken

Das SASS-Modulsystem macht es auch sehr einfach, Bibliotheken von Drittanbietern mit minimalem Aufwand zu verwenden und ohne große Laufzeitdateien an Ihre Endbenutzer zu verschicken. Lassen Sie uns die abgewinkelte Kantenbibliothek ausprobieren, mit der wir geneigte Kanten für Objekte auf unserer Seite erstellen können.

 Git Klon https://github.com/josephfusco/
Winkel-Kanten.Git SRC / SASS / WINKLED-RANGE

19. Die abgewinkelten Kanten mischen sich

Wir können abgewinkelte Kanten auf dieselbe Weise importieren, wie wir für unser Farbschema teilweise getan haben. Es ist dann über ein Mixin verwendet, das mit der Bibliothek verschickt. Versuchen wir es in unserer Profilabteilung.

 @Import "Winkel-Kanten / _Andled-Kanten.scss";
.Profile-Sektion {
  @include Winkel-Rand ("Außerhalb der Unterseite",
"Unten rechts", $ color-highlight1);
  @include Winkel-Rand ("Außerhalb der Oberseite",
"Großformat", $ color-highlight1);
  Marge: 120px 16px 120px 16px;
  // ...
}

20. Ausgabeformatierung.

Lassen Sie uns fertig sein, indem Sie den Ausgangs-Sass erzeugt. Wenn Sie Ihre CSS-Dateien als Änderungen vorgenommen haben, werden Sie feststellen, dass sie recht lesbar bleiben. Sie können jedoch auch SASS-Bauen kondensierter CSS haben, was weniger menschenlesbar ist, aber immer noch versandfertig ist. Sie können dies mit dem tun --Stil Befehlszeilenflag.

 SASS SRC / SASS /: PUBLIC / CSS / --Style
komprimiert 

21. mehr Sass

Wir haben jetzt einige Merkmale von SASS erforscht, und unsere Website sieht nicht zu schlecht aus. Hoffentlich fangen Sie an, zu sehen, wie SASS US hilft, mehr Wartungsfähigere Stilblätter zu entwickeln. Wir haben nicht jedes Merkmal der Sprache abgedeckt. Es gibt viele weitere nützliche Funktionen, die mit ihm geliefert werden, und erweiterte Funktionen wie Kontrollrichtlinien (z. B. @wenn , @zum und @während ), die häufig verwendet werden, um komplexe Bibliotheksfunktionen zu erstellen. Insgesamt erinnern Sie sich, dass SASS völlig eine stilistische Präferenz ist. Sie können alles tun, was wir mit reinem CSS gesehen haben, wenn Sie möchten, aber Sie sollten auf jeden Fall über die Vorverarbeitung denken, da Ihre Arbeit komplexer wird.

Dieser Artikel wurde ursprünglich in Ausgabe 282 von veröffentlicht Webdesigner .Kaufen Ausgabe 282. oder Abonnieren Sie hier .

Weiterlesen:

• 10 Erstaunliche neue CSS-Technologien
• 3 glänzende neue CSS-Eigenschaften, um heute zu versuchen
• Große Parallax-Scroll-Websites