Carreaux de style avec Sass

La conception Web réactive est devenue la nouvelle norme, et de nombreux concepteurs, développeurs et organisations ont réalisé que des échantillons de scripts statiques ne sont plus un moyen efficace de montrer leur site Web aux clients. Comme Stephen Hay l'a dit:

"Nous avons conçu pas les pages, mais les systèmes de composants."

Au fur et à mesure que la fenêtre change et que la disposition est ajustée, ces composants sont réarrangés et redimensionnés dans différentes tailles de conteneurs. De nombreux concepteurs se tournent vers des «carreaux de style» pour aider les clients à comprendre et à approuver les instructions de conception sans avoir à construire des échantillons entièrement détaillés au lieu de passer des semaines à construire 3-4 exemples d'échantillons statiques de différentes tailles d'écran pour une seule conception de site Web (et le retirer) le risque que les clients rejettent tous les emplois). Le carreau de style est conçu pour «afficher les sélections d'interface aux clients sans investir dans plusieurs modèles Photoshop». Parfois, ils sont appelés collages d'éléments ou cartes d'interface utilisateur.

The Rise of Style Guides est très cohérent avec un autre dernier développement dans le développement frontal: Démarrez la conception du prototype de navigateur le plus tôt possible. Lorsque nous intégrons des guides de style pour aider les clients à comprendre la conception et à déplacer le processus du logiciel de conception vers le marquage, nous finissons par créer une version Web en direct des documents de guide de marque PDF que de nombreux clients utilisent.

Comme le titre de cet article le suggère, SASS a certaines fonctionnalités qui nous facilitent la création de guides de style dynamique. Jetons un coup d'œil à ces fonctionnalités maintenant.

palette de couleurs

Une façon de faciliter les guides de style est d'automatiser les informations reproductibles. Par exemple, pour montrer votre palette de couleurs à vos clients, vous pouvez créer plusieurs carrés, chacun montrant une couleur. Votre HTML peut ressembler à ceci:

<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>

Ce n'est peut-être pas une marque idéale (vous pouvez absolument utiliser ::before au lieu de span.swatch), mais cela fonctionne pour cette démo.

Une fois cela fait, vous avez besoin de CSS pour disposer ces échantillons de couleurs pour vos clients. Nous pouvons utiliser SASS pour le faciliter. La cartographie SASS est un excellent moyen de stocker ces valeurs de couleur:

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

En stockant ces valeurs dans la carte (plutôt que comme 5 variables ou plus), nous sommes maintenant capables de les itérer sur eux et de générer automatiquement CSS.

// 只需一点布局样式即可制作方形样本
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;
    }
  }
}

Titre

Vous pouvez également utiliser des mappages pour les styles de titre. L'exemple suivant est un peu plus compliqué que la cartographie des couleurs.

$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;
  }
}

Si vous êtes plus compliqué avec les styles de titre, c'est bien. Si vous prévoyez d'ajouter des propriétés telles que la couleur, l'espacement des lettres ou la conversion de texte, vous devez utiliser des mappages imbriqués comme indiqué dans l'exemple suivant:

$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;
    }
  }
}

À ce stade, vous pourriez demander: "Pourquoi ne pas écrire toutes les données cartographiées imbriquées directement dans CSS? de l'obtenir plus facile, c'est que si une technologie ne vous facilite pas la tâche, ne l'utilisez pas. Cependant, si ce mappage complexe fonctionne pour votre projet, utilisez-le!

bouton

Retour à l'utilisation plus simple de la cartographie SASS, le bouton est une autre bonne occasion d'automatiser les carreaux de style:

<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>

cet extrait de code créera le CSS du bouton en fonction de la même couleur que la palette ci-dessus. Si vous avez un ensemble de couleurs de bouton d'interface utilisateur différent, vous pouvez utiliser différents mappages pour $button-colors.

Ce qui suit est tout le code de cet article sur Codepen:

Codepen Link

Générateur de guide de style

La pointe ci-dessus nous aide en écrivant des CSS en double, mais nous oblige à écrire notre propre HTML pour correspondre à ce CSS. Il existe également d'excellents outils pour générer les marqueurs dont vous avez besoin.

Je n'expliquerai pas ces outils en détail, mais vous pouvez consulter leurs exemples et documents.

StyledOCCO est un module NPM qui prend Markdown écrit en blocs de commentaires CSS et génère HTML correspondant.

L'hologramme est un joyau Ruby qui utilise également Markdown dans les blocs de commentaires CSS pour créer un balisage de guide de style.

Conclusion

La tuile de style est un excellent moyen de montrer à votre client la vision de conception sans les convaincre de façon inattendue qu'il obtient un site Web de taille fixe et parfait. Ils aident les clients à comprendre la maîtrise de leur site Web tout en transmettant la nature de la conception visuelle. SASS nous permet de générer plus facilement ces carreaux de style à l'aide d'outils tels que la cartographie et la boucle.

Utilisez-vous Sass pour faciliter les carreaux de style ou le prototypage? Veuillez nous faire savoir dans les commentaires!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!