Share
Ich mache kein Geheimnis daraus: Ich liebe Sass. In diesem Artikel werde ich meine Empfehlungen für die tägliche Arbeit mit Sass und für echte Projekte teilen.
Hier ist ein fantastisches Plugin, mit dem Sie viel Zeit sparen können. Öffnen Sie Package Control in Sublime Text und suchen Sie nach Hayaku und machen Sie eine schnelle Installation. Jetzt können Sie Ihr CSS schneller und mit Verknüpfungen schreiben. Hier sind einige Beispiele:
// Schreibe dies und drücke auf die Registerkarte mt10 // Ergebnis margin-top: 10px; // Oder diese df // Ergebnisanzeige: flex;
Insbesondere für Ihren Sass-Workflow gibt es einen Ordner, den wir bei der Suche in Sublime Text ignorieren sollten. Der betreffende Ordner ist .Sass-Cache, weil dies nur für den Kompiliervorgang notwendig ist. Außerdem dürfen Sie niemals irgendetwas in diesem Ordner bearbeiten. Machen Sie sich also das Leben leichter und verstecken Sie es!
Drücken Sie CMD-, Um die Benutzerkonfiguration Ihres Editors zu erhalten, und fügen Sie die folgenden Zeilen ein:
"folder_exclude_patterns": [".sass-cache"]
Eine solide Projektstruktur ist besonders wichtig, wenn Sie im Team arbeiten.
Ich verwende drei verschiedene Abschnitte (ein Ansatz von SMACSS von Jonathan Snook): _Base, _layouts und _module. Eine globale Konfiguration ist ideal für die Platzierung in der _Base Mappe. Für jeden Layouttyp erstellen Sie eine eindeutige Datei und legen sie im Ordner ab _layouts. Stellen Sie sich beispielsweise ein grundlegendes Layout, das Raster oder eine Datei für das Drucklayout vor.
Es ist möglich, eine Website in verschiedene Arten von Modulen aufzuteilen, z. B. Registerkarten, Schaltflächen, Akkordeons usw. Kein Modul sollte das Layout um sich herum "kennen". Diese gehören dann in die _module Mappe.
Normalerweise sieht meine Projektstruktur folgendermaßen aus:
scss / | - _base / | _config.scss | _presets.scss | | - _headings.scss | | -… | - _layouts / | | - _l-base.scss | | - _l-grid.scss | - _module / | | - _m-buttons.scss | | - _m-tabs.scss | - application.scss Stylesheets / | - application.css
Wenn Sie Sass 3.3 oder Node-Sass nicht verwenden, benötigen Sie wahrscheinlich die folgende Funktion zum Simulieren von Sass-Karten. Mit Sass-Maps können Sie Schlüsselsätze mit zugehörigen Werten definieren. In diesem Fall können Sie die Funktion verwenden, den Schlüssel einfügen und dann den entsprechenden Wert erhalten. Hier ist ein kurzes Beispiel:
// Funktion: Simuliere assoziative Arrays // Authour: Hugo Giraudel // Quelle: http://hugogiraudel.com/2013/08/12/sass-functions/#mapping @ function match ($ haystack, $ needle) @each $ item in $ haystack $ index: index ($ item, $ needle); @if $ index $ return: if ($ index == 1, 2, $ index); @return nth ($ item, $ return); @falsch zurückgeben; // Verwendung $ list: a b, c d, e f; $ value: match ($ list, e); // gibt f zurück
Hier sind einige Mixins, die Sie wahrscheinlich in jedem Projekt brauchen werden. Beginnen wir mit ein paar einfacheren Sachen wie dem Erstellen einer Kolonne mit Sass
Ein Raster ist in Ihrem Projekt absolut unverzichtbar. Mit diesem Helfer (ein Mixin habe ich genannt) col) Es ist einfacher, die Breite einer Spalte zu erstellen. Es erwartet zwei Werte: die Nummer der Spalte ($ col) Und die maximalen Spalten ($ max-cols) in Ihrem Raster, der Standardwert ist 12.
// Berechne die Breite einer Spalte // Der Standardwert der maximalen Spalten ist 12 @mixin col ($ col, $ max-cols: 12) width: (100% / $ max-cols) * $ col; // Verwendung .element @include col (3); // Ergebnis .element width: 25%;
Die Zeit ist lange vorbei, dass wir nur Pixelwerte benötigen. Wo immer es möglich ist, versuche ich es zu benutzen em oder rem. Dies sind beide relative Maßeinheiten, der Unterschied besteht darin em basiert auf dem Wert seiner übergeordneter Container und rem basiert auf der Schriftgröße der Wurzel (die html Element).
// Mixin @mixin Schriftgröße ($ sizeValue: 1.6) Schriftgröße: ($ sizeValue * 10) + px; Schriftgröße: $ sizeValue + rem; // Verwendung .element @include font-size (1.8); // Ergebnis .element font-size: 18px; Schriftgröße: 1.8rem;
Das manuelle Einbetten von Zeichensätzen über CSS3 ist nicht einfach, da es für die verschiedenen Browserarten so viele Formate gibt. Ein Mixin ist dafür die perfekte Lösung. Dieses Mixin heißt Schriftartund erwartet zwei Werte. Der erste ist der Name für die Schriftfamilie und der zweite ist der Pfad zu den verschiedenen Dateiformaten der Schrift. Weitere Informationen zu diesen verschiedenen Formaten finden Sie im Mozilla Developer Network.
Accentsconagua
// Mixin @mixin font-face ($ name, $ url) @ font-face font-family: # $ name; src: url ('# $ url .eot'); src: url ('# $ url .eot # iefix') format ("embedded-opentype"), url ('# $ url .ttf') format ('truetype'), url ('# $.) url .svg ## $ name ') format (' svg '), url (' # $ url .woff ') format (' woff '); @Inhalt; // Verwendung @include font-face ('icons', '… / fonts / icons / iconfont'); // Ergebnis @ font-face font-family: Symbole; src: url ("… /fonts/icons/iconfont.eot"); src: url ("… /fonts/icons/iconfont.eot#iefix") Format ("embedded-opentype"), URL ("… /fonts/icons/iconfont.ttf") Format ("Truetype"), Url ( "… /Fonts/icons/iconfont.svg#icons") format ("svg"), url ("… /fonts/icons/iconfont.woff") format ("woff"); Jayden Seric hat mit seinem Mixin für das Einfügen von Icons einen großartigen Job gemacht. Hier haben wir ein Mixin genannt Symbolmit zwei Parametern: $ position für die Pseudo-Elemente dann das Boolean $ -Symbol was eingestellt ist wahr oder falsch. Erstellen Sie eine aufgerufene Variable $ Icons, Definieren Sie den Namen des Symbols (Schlüssel) und den Wertdafür:
// Autor: Jayden Seric // Quelle: http://jaydenseric.com/blog/fun-with-sass-and-font-icons @mixin-Symbol ($ position: 'before', $ icon: false) &: # $ position @if $ icon content: match ($ icons, $ icon); @content; // Verwendung // Eine Variable mit allen Ihren Symbolen erstellen // Name, Content-Value $ -Symbole: ('Häkchen "a", "minus" b "," plus "c"); // Mischenelement einschließen @include icon ('before', 'checkmark'); // Ergebnis .element: before content: "a";Ich bin so dankbar für dieses Mixin von Snugug: Es ist eine großartige Möglichkeit, Ihre globalen Haltepunkte zu konfigurieren, und das Beste ist, dass Sie jedem Haltepunkt einen eigenen Namen geben. Dinge mit Namen zu unterscheiden ist so viel besser als mit Pixeln. Dies gibt Ihnen auch einen guten Überblick über alle verwendeten Breiten und einen zentralen Ort, um das Verhalten zu ändern.
// Verwenden Sie mixin by Snugug // URL: https://gist.github.com/Snugug/2493551 // Definieren Sie Ihre Haltepunkte und geben Sie jedem einen Namen $ Haltepunkte: ('small' 481px, 'medium' 600px ', large '769px); // Verwendung .element background: red; @inkludieren Sie auf ('mittel') Hintergrund: blau; // Ergebnis .element Hintergrund: Rot; @media screen und (min-width: 600px) .element background: blue; Der Umgang mit Variablen in einem skalierbaren Frontend ist oft eine philosophische Frage. In meinem Fall habe ich dafür einen Workflow, der gut zu mir passt. Zuerst erstellen wir eine Farbpalette mit allen verfügbaren Farben und geben ihnen normale identifizierende Namen.
$ gray-light: # f2f2f2; $ grau: #ccc; $ grau-dunkel: # 7a7a7a; $ red: # d83a3a; $ grün: # 40b846;
Nachdem wir eine gute Palette mit allen verfügbaren Farben haben, sollten wir die Firmen- oder Hauptfarben des Projekts hervorheben. Mit diesem Schritt können Sie ein brandneues Thema für das Projekt erstellen, ohne Zeit mit dem Anpassen der Farben in Ihren gesamten Dateien zu verschwenden.
$ corp-color: $ red! default; $ corp-color-dark: dunkler ($ corp-color, 10%)! default; $ corp-color-second: $ green! default; $ corp-color-second-dark: dunkler ($ corp-color-second, 10%)! default;
Richten Sie einige grundlegende Konfigurationen wie globale Schriftgröße, Schriftfamilien oder die grundlegende Schriftfarbe in einer Konfigurationsdatei ein - zum Beispiel in einer Datei mit dem Namen _config.scss, Welches ist in Ihrem Ordner _Basic.
// Font $ base-font-size: 1.7! Default; $ base-font-family: Helvetica, Arial, serifenlos! default; $ base-font-color: $ gray! default; // Box / Rahmen $ Basis-Rand-Radius: 3px! Default; $ border-radius-round: 50%! default; $ base-border-color: $ gray! default;
Es gibt viele Netzsysteme auf der Welt, aber das Netz von PureCSS ist in meinen Augen eines der besten. Ich habe die Idee dahinter aufgegriffen und mit Sass etwas Magie gemacht, mit der ich schnell Spaltenklassen erstellen und ein Raster für kleine, mittlere und große Ansichtsfenster erstellen kann.
Es ist sehr einfach, das Reaktionsverhalten eines Elements zu ändern. Sie definieren das Verhalten einmal für das Modul, aber wenn Sie zu einem bestimmten Zeitpunkt ein anderes Verhalten haben, erstellen Sie einen ähnlichen Modifikator .m-text-with-asset - groß
// Maximale Spalten und den Abstand zwischen den einzelnen Spalten definieren $ max-cols: 2; $ Rinnenbreite: 25px;
// Name: Default-Grid @für $ summe von 1 bis $ max-cols @für $ i von 1 bis $ sum .lu - # $ i - # $ sum @include col ($ i, $ summe); // Name: Small-Grid @für $ sum von 1 bis $ max-cols @for $ i von 1 bis $ sum .lu - small - # $ i - # $ sum @include Antwort auf ('small') @include col ($ i, $ sum); // Name: Medium-Grid @für $ summe von 1 bis $ max-cols @für $ i von 1 bis $ sum .lu - medium - # $ i - # $ sum @inkludieren antworten ('mittel') @inkludieren spalte ($ i, $ sum); // Name: Large-Grid @für $ sum von 1 bis $ max-cols @for $ i von 1 bis $ sum .lu - large - # $ i - # $ sum @ include Antwort auf ('groß') @ include Farbe ($ i, $ sum); // Verwendungszweck Lorem ipsum dolor sitzen amet, consetetur sadipscing elitr, sed diam nonum eirmod zeitlos in labore et dolore magna aliquyam erat, sed diam voluptua.
Bei Mobile erhalten Sie eine Spalte in voller Breite, nach 480px eine halbe Spalte und über 768px eine dritte Spalte.
Die meisten Websites (umfassende Aussage) haben einen zentrierten Container. Dies ist jedoch nicht immer der Fall, daher ist es hilfreich, einen Helfer zu erstellen:
// Name: Constrained Container .l-constrained margin-left: auto; Rand rechts: auto; Auffüllen links: $ Preventraining; Polsterung rechts: $ Preventraining; Max-Breite: $ Max-Wrapper-Breite;
Wenn Sie Flexbox nicht als bevorzugte Layout-Engine verwenden, werden Sie Floats verwenden. Floats müssen unbedingt gelöscht werden, da sonst das gesamte Layout zerstört werden kann.
.l-group: after content: "; clear: both; display: table;
Wo ich konsistente Abstände in einem Layoutentwurf sehe, verwende ich Hilfsklassen, um die Messwerte wahr zu halten.
// Name: Distance-Small // Beschreibung: Helfer zum Erstellen von Distance-Top .l-Distance-Small Margin-Top: 20px; // Name: Distance-Medium // Beschreibung: Helfer zum Erstellen von Distance-Top. L-Distance-Medium Margin-Top: 40px;
Bevorzugen Sie einen Online-Fontgenerator oder verwenden Sie eine Befehlszeilenschnittstelle zum Generieren von Schriftarten? Ich bevorzuge eine Online-Lösung. Das Werkzeug meiner Wahl ist fontastic.me. Es gibt eine großartige Übersicht über alle Ihre Schriftarten. Sie können auswählen, wie die Klassen- oder Zeichenzuordnung aussehen soll.
Beginnen wir nun mit dem Erstellen von Klassen für Ihre Icons. Ich werde Ihnen nicht die Grundstile der einzelnen Symbole zeigen. Sie können damit alleine umgehen, aber dies kann Ihnen beim grundlegenden Symbol-Setup helfen.
// Name: Array mit Name und Inhaltswert $ -Symbole: ('Häkchen "a", "minus" b "," plus "c"); $ Präfix:' icon-- '! Default; // Name: Loop // Beschreibung: Erstellen Sie für jedes Symbol eine eigene Klasse mit korrektem Inhalt. Konfiguration für Symbole in _config.scss // Verwenden Sie das Mixin für die Symbolerstellung, das sich oben im @each $ -Symbol in $ icons $ name befindet : nth ($ icon, 1);. # unquote ($ prefix) # $ name @ Include-Symbol ('before', $ name); // Ergebnis .icon - Häkchen: vor Inhalt : 'a'; .icon - minus: vor content: 'b'; .icon - plus: before content: 'c';Weißt du was ich meine? Als ich als CSS-Entwickler anfing, habe ich alles auf der Designerseite erstellt. Was aber, wenn Sie ein Modul auf einer anderen Site benötigen? Aus diesem Grund ist es wichtig, geschlossene Module ohne Layout zu erstellen.
Erstellen Sie eine Datei für Ihr Modul und legen Sie sie im Ordner ab _module. Am oberen Rand der Datei befindet sich ein Konfigurationsbereich, in dem Sie Farben oder andere Aspekte definieren, die sich auf das Design auswirken.
Unter der Konfiguration definieren Sie das Modul mit allen Stilen. Verwenden Sie Kommentare gut, um das Modul zu vereinfachen.
@charset 'UTF-8'; // 1.Config $ accordion-bgcolor: $ gray-light! Default; $ Akkordeon-Alternative-Bgcolor: $ grau-dunkel! default; $ Akkordeon-Schriftfarbe: $ corp-color! default; // 2.Base // Name: Standardakkordeon .m-accordion background: $ accordion-bgcolor; Farbe: $ Akkordeon-Schriftfarbe; // Name: Alternative Akkordeon .m-Akkordeon - Alternative Hintergrundfarbe: $ Akkordeon-Alternative-bgcolor;
Fühlen Sie sich frei, um das Repository mit dem Code, der in diesem Artikel enthalten ist, zu speichern. Ich hoffe, dass es Ihnen hilft, ein besser skalierbares Frontend in realen Projekten aufzubauen. Teilen Sie mir bitte Ihre Gedanken und Ideen in den Kommentaren mit.
