Stilfliesen mit Sass

Responsive Webdesign ist zum neuen Normalwert geworden, und viele Designer, Entwickler und Organisationen haben erkannt, dass statische Beispielskripte keine effektive Möglichkeit mehr sind, ihre Website den Kunden zu zeigen. Wie Stephen Hay sagte:

"Wir haben nicht Seiten, sondern Komponentensysteme entworfen."

Wenn sich das Ansichtsfenster ändert und das Layout eingestellt wird, werden diese Komponenten neu angeordnet und in verschiedenen Behältergrößen geändert. Viele Designer wenden sich an „Style Tile“, um den Kunden zu helfen, Designanweisungen zu verstehen und zu genehmigen, ohne vollständig detaillierte Beispielentwürfe erstellen zu müssen, anstatt Wochen zu verbringen, die 3-4 statische Beispielentwürfe verschiedener Bildschirmgrößen für ein einzelnes Website-Design erstellen (und es herausnehmen). Das Risiko, dass Kunden alle Jobs ablehnen). Style Tile ist so konzipiert, dass sie "Interface -Auswahl an Kunden anzeigen, ohne in mehrere Photoshop -Modelle zu investieren". Manchmal werden sie als Elementcollagen oder UI -Karten bezeichnet.

Der Aufstieg der Style Guides steht sehr überein mit einer weiteren neuesten Entwicklung in der Front-End-Entwicklung: Starten Sie so früh wie möglich im Browser-Prototypdesign. Wenn wir Style Guides integrieren, um Kunden zu helfen, das Design zu verstehen und den Prozess von Design -Software zu Tagging zu verschieben, erstellen wir am Ende eine Live -Webversion der Dokumente des PDF -Markenführer, die viele Kunden verwenden.

Wie der Titel dieses Beitrags schon sagt, verfügt SASS einige Funktionen, die es uns erleichtern, dynamische Style -Führer zu erstellen. Schauen wir uns diese Funktionen jetzt an.

Farbpalette

Eine Möglichkeit, Stilführer zu erleichtern, besteht darin, wiederholbare Informationen zu automatisieren. Um Ihre Kunden beispielsweise Ihre Farbpalette anzuzeigen, können Sie mehrere Quadrate erstellen, die jeweils eine Farbe zeigen. Ihr HTML könnte so aussehen:

<ul class="color-palette">
  <li class="color-blue"><span class="swatch">Blue</span></li>
  <li class="color-red"><span class="swatch">Red</span></li>
  <li class="color-green"><span class="swatch">Green</span></li>
  <li class="color-gray"><span class="swatch">Gray</span></li>
  <li class="color-dark-gray"><span class="swatch">Dark Gray</span></li>
</ul>

Dies ist möglicherweise keine ideale Marke (Sie können ::before statt span.swatch absolut verwenden), aber es funktioniert für diese Demo.

Nachdem dies erledigt ist, benötigen Sie CSS, um diese Farbmuster für Ihre Kunden zu lagern. Wir können Sass verwenden, um es einfacher zu machen. Die Sass -Mapping ist eine hervorragende Möglichkeit, diese Farbwerte zu speichern:

$colors: (
  blue: #2980b9,
  red: #e74c3c,
  green: #27ae60,
  gray: #95a5a6,
  dark-gray: #2c3e50
);

Durch das Speichern dieser Werte in der Karte (anstelle von 5 oder mehr Variablen) können wir jetzt automatisch über sie iterieren und CSS generieren.

// 只需一点布局样式即可制作方形样本
ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

li {
  display: inline-block;
  width: 15%;
  margin: 1%;
  padding: .5em;
  box-shadow: 0 1px 4px -1px rgba(0,0,0,.5);
}

.swatch {
  display: block;
  height: 0;
  margin-bottom: .5em;
  padding: 100% 0 0;
}

// 现在，为每个 .swatch 分配正确的 background-color
@each $name, $value in $colors {
  .color-#{$name} {
    .swatch {
      background-color: $value;
    }
  }
}

Titel

Sie können auch Mappings für Titelstile verwenden. Das folgende Beispiel ist etwas komplizierter als Farbzuordnung.

$sans: Open Sans, Tahoma, sans-serif;
$serif: Droid Serif, Palatino, serif;

$headings: (
  h1: bold 2em/1.2 $sans,
  h2: light 1.5em/1.2 $sans,
  h3: bold 1.2em/1.2 $sans,
  h4: bold 1em/1.2 $sans,
  h5: bold 1em/1.2 $serif,
  h6: italic 1em/1.2 $serif
);

@each $element, $font-property in $headings {
  #{$element} {
    font: $font-property;
  }
}

Wenn Sie mit Titelstilen komplizierter werden, ist das in Ordnung. Wenn Sie vorhaben, Eigenschaften wie Farbe, Buchstabenabstand oder Textumwandlung hinzuzufügen, müssen Sie verschachtelte Zuordnungen verwenden, wie im folgenden Beispiel gezeigt:

$headings-complex: (
  h1: (
    font: bold 2em/1.2 $sans,
    color: map-get($colors, blue)
  ),
  h2: (
    font: 200 1.5em/1.2 $sans,
    letter-spacing: .1em,
    text-transform: uppercase,
    color: map-get($colors, dark-gray)
  ),
  h3: (
    font: bold 1.2em/1.2 $sans,
    color: map-get($colors, dark-gray)
  ),
  h4: (
    font: normal 1em/1.2 $sans,
    letter-spacing: .1em,
    text-transform: uppercase,
    color: map-get($colors, dark-gray)
  ),
  h5: (
    font: bold 1em/1.2 $serif,
    color: map-get($colors, blue)
  ),
  h6: (
    font: italic 1em/1.2 $serif,
    color: map-get($colors, dark-gray)
  )
);

@each $element, $style-map in $headings-complex {
  #{$element} {
    @each $property, $value in $style-map {
      #{$property}: $value;
    }
  }
}

Zu diesem Zeitpunkt fragen Sie vielleicht: "Warum nicht alle verschachtelten kartierten Daten in CSS schreiben? Es sieht aus wie CSS, und ich habe nicht wirklich viel Zeit, indem ich sie schleifen." Wenn eine Technologie es Ihnen nicht leichter macht, nutzen Sie sie nicht. Verwenden Sie es nicht. Wenn diese komplexe Zuordnung jedoch für Ihr Projekt funktioniert, verwenden Sie es!

Taste

Zurück zum einfacheren Gebrauch von Sass Mapping ist die Schaltfläche eine weitere gute Gelegenheit, um Stilfliesen zu automatisieren:

<ul class="color-palette">
  <li class="color-blue"><span class="swatch">Blue</span></li>
  <li class="color-red"><span class="swatch">Red</span></li>
  <li class="color-green"><span class="swatch">Green</span></li>
  <li class="color-gray"><span class="swatch">Gray</span></li>
  <li class="color-dark-gray"><span class="swatch">Dark Gray</span></li>
</ul>

Dieser Code -Snippet erstellt die CSS der Schaltfläche basierend auf derselben Farbe wie der oben genannten Palette. Wenn Sie einen anderen UI -Schaltflächen -Farbsatz haben, können Sie verschiedene Zuordnungen für $button-colors verwenden.

Folgendes ist der gesamte Code in diesem Artikel auf CodePen:

codePen Link

Style Guide Generator

Der obige Tipp hilft uns, indem wir einige doppelte CSS für uns schreiben, aber wir müssen unser eigenes HTML schreiben, um diese CSS zu entsprechen. Es gibt auch einige großartige Werkzeuge, um die Marker zu generieren, die Sie benötigen.

Ich werde diese Tools nicht ausführlich erklären, aber Sie können ihre Beispiele und Dokumentation überprüfen.

styledocco ist ein NPM -Modul, das in CSS -Kommentarblöcken geschrieben wird und passende HTML generiert.

Hologramm ist ein Ruby -Juwel, das auch Markdowns in CSS -Kommentarblöcken verwendet, um das Markup des Style Guide zu erstellen.

Schlussfolgerung

Stilfliesen ist eine großartige Möglichkeit, Ihrem Kunden die Design Vision zu zeigen, ohne unerwartet davon zu überzeugen, dass sie eine feste, pixel-perfekte Website mit fester Größe erhalten. Sie helfen Kunden, die Sprachkenntnisse ihrer Website zu verstehen und gleichzeitig die Natur des visuellen Designs zu vermitteln. Sass erleichtert es uns, diese Stilfliesen mithilfe von Tools wie Zuordnung und Schleifen zu generieren.

Verwenden Sie SASS, um Stilfliesen oder Prototypen zu erleichtern? Bitte lassen Sie es uns in den Kommentaren wissen!

Das obige ist der detaillierte Inhalt vonStilfliesen mit Sass. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!