Share
Je ne le cacherai pas: j'aime Sass. Dans cet article, je vais partager mes recommandations pour travailler avec Sass au quotidien et sur de vrais projets..
Voici un plugin génial qui vous fera gagner beaucoup de temps. Ouvrez le contrôle des packages dans Sublime Text, recherchez Hayaku et faire une installation rapide. Maintenant, vous pouvez écrire votre CSS plus rapidement et avec des raccourcis. Voici quelques exemples:
// Écrivez ceci et appuyez sur l'onglet mt10 // Résultat margin-top: 10px; // Ou ce df // Affichage du résultat: flex;
En particulier pour votre flux de travail Sass, il existe un dossier que nous devons ignorer lors de la recherche dans Sublime Text. Le dossier en question est .sass-cache, car cela n’est nécessaire que pour le processus de compilation. De plus, vous ne devez jamais rien modifier dans ce dossier, simplifiez-vous la vie et cachez-le!
presse CMD-, pour obtenir la configuration userconfig de votre éditeur et insérer les lignes suivantes:
"folder_exclude_patterns": [".sass-cache"]
Avoir une structure de projet solide est très important, surtout si vous travaillez en équipe.
J'utilise trois sections différentes (une approche de SMACSS par Jonathan Snook): _base, _layouts et _modules. Une configuration globale est idéale pour être placée dans le _base dossier. Pour chaque type de présentation, créez un fichier unique et placez-le dans le dossier. _layouts. Pensez, par exemple, à une mise en page de base, à la grille ou éventuellement à un fichier pour la mise en page imprimée..
Il est possible de diviser un site Web en différents types de modules, tels que des onglets, des boutons, des accordéons, etc. Aucun module ne doit être «conscient» de la présentation qui l'entoure. Ceux-ci appartiennent alors à la _modules dossier.
Normalement, la structure de mon projet ressemble à ceci:
scss / | - _base / | | - _config.scss | | - _presets.scss | | - _headings.scss | | -… | - _layouts / | | - _l-base.scss | | - _l-grid.scss | - _modules / | | - _m-buttons.scss | | - _m-tabs.scss | - application.scss feuilles de style / | - application.css
Sauf si vous utilisez Sass 3.3 ou Node-Sass, vous aurez probablement besoin de la fonction suivante pour simuler des cartes Sass. Les cartes Sass vous permettent de définir des ensembles de clés avec des valeurs associées. Dans ce cas, vous pouvez utiliser la fonction, insérer la clé puis obtenir la valeur correspondante. Voici un exemple rapide:
// Fonction: Simuler des tableaux associatifs // Authour: Hugo Giraudel // Source: http://hugogiraudel.com/2013/08/12/sass-functions/#mapping @function match ($ haystack, $ needle) @each $ item dans $ haystack $ index: index ($ item, $ needle); @if $ index $ return: if ($ index == 1, 2, $ index); @retour nth ($ item, $ return); @return false; // Usage $ liste: a b, c d, e f; $ value: match ($ list, e); // retourne f
Voici quelques mixins dont vous aurez probablement besoin dans chaque projet. Commençons par des choses plus simples, comme la construction d'une colonne avec sass
Une grille est absolument indispensable dans votre projet. Avec cet assistant (un mixin que j'ai nommé col) Il est plus facile de créer la largeur d’une colonne. Il attend deux valeurs: le numéro de la colonne ($ col) Et les colonnes maximum ($ max-cols) dans votre grille, la valeur par défaut étant 12.
// Calculer la largeur d'une colonne // La valeur par défaut du nombre maximal de colonnes est 12 @mixin col ($ col, $ max-cols: 12) width: (100% / $ max-cols) * $ col; // Usage .element @include col (3); // Résultat .element width: 25%;
Le temps a passé depuis longtemps que nous n'avons besoin que de valeurs de pixels. Si possible ces jours-ci j'essaie d'utiliser em ou rem. Ce sont deux unités de mesure relatives, la différence entre elles étant que em est basé sur la valeur de son conteneur parent et rem est basé sur la taille de la police de la racine (le html élément).
// Mixin @mixin font-size ($ sizeValue: 1.6) font-size: ($ sizeValue * 10) + px; taille de la police: $ sizeValue + rem; // Usage .element @include font-size (1.8); // Résultat .element font-size: 18px; taille de la police: 1.8rem;
Incorporer manuellement des polices via CSS3 n’est pas une tâche facile, car il existe de nombreux formats pour différents types de navigateurs. Un mixin est la solution parfaite pour cela. Ce mixin s'appelle font-faceet il attend deux valeurs. Le premier est le nom de la famille de polices et le second est le chemin d'accès aux différents formats de fichiers de la police. En savoir plus sur ces différents formats sur le réseau de développeurs Mozilla.
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 '); @contenu; // Usage @include font-face ('icons', '… / fonts / icons / iconfont'); // Résultat @ font-face font-family: icons; 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 a fait un excellent travail avec son mixin en incluant des icônes. Ici nous avons un mixin appelé icôneavec deux paramètres: $ position pour les pseudo-éléments, alors le booléen icône $ qui est mis à vrai ou faux. Créez une variable appelée icônes $, définir le nom de l'icône (clé) et la valeurpour ça:
// Auteur: Jayden Seric // Source: http://jaydenseric.com/blog/fun-with-sass-and-font-icons @mixin icon ($ position: 'before', $ icon: false) &: # $ position @if $ icon contenu: match ($ icons, $ icon); @contenu; // Utilisation // Créer une variable avec toutes vos icônes // Nom, contenu-valeur $ icons: ('checkmark "a", "moins" b "," plus "c"); // Inclure mixin .element @include icon ('before', 'checkmark'); // Résultat .element: before content: "a";Je suis très reconnaissant pour ce mixin de Snugug: c’est un excellent moyen de configurer vos points de rupture globaux et le plus intéressant est que vous donniez son nom à chaque point de rupture. Différencier les choses avec des noms est tellement mieux qu'avec des pixels. Cela vous donne également un bon aperçu de toutes les largeurs utilisées et un emplacement central pour changer le comportement.
// Utiliser mixin by Snugug // URL: https://gist.github.com/Snugug/2493551 // Définissez vos points d'arrêt et attribuez à chacun un nom $ points d'arrêt: ('petit' 481px, 'moyen' 600px, 'grand '769px); // Usage .element background: red; @include respond-to ('medium') background: blue; // Résultat .element background: red; Écran multimédia et (largeur minimale: 600 pixels) .element background: blue; La gestion des variables dans un système frontal évolutif est souvent une question philosophique. Dans mon cas, j'ai un flux de travail qui me convient bien. Tout d'abord, nous créons une palette de couleurs avec toutes les couleurs disponibles et leur donnons des noms d'identification normaux..
$ grey-light: # f2f2f2; $ grey: #ccc; $ grey-dark: # 7a7a7a; $ rouge: # d83a3a; $ green: # 40b846;
Après avoir obtenu une bonne palette avec toutes les couleurs disponibles, nous devrions indiquer les couleurs principales ou corporatives du projet. Cette étape permet de créer un nouveau thème pour le projet sans perdre de temps à adapter les couleurs de tous vos fichiers..
$ corp-color: $ red! default; $ corp-color-dark: assombrir ($ corp-color, 10%)! default; $ corp-color-second: $ green! default; $ corp-color-second-dark: assombrir ($ corp-color-second, 10%)! default;
Configurez une configuration de base telle que la taille de police globale, les familles de polices ou la couleur de police de base dans un fichier de configuration, par exemple dans un fichier appelé _config.scss, qui est dans votre dossier _de base.
// Font $ base-font-size: 1.7! Default; $ base-font-family: Helvetica, Arial, sans-serif! default; $ base-font-color: $ grey! default; // Box / Border $ base-border-radius: 3px! Default; $ border-radius-arronded: 50%! default; $ base-border-color: $ grey! default;
Il existe de nombreux systèmes de grille dans le monde, mais la grille de PureCSS est, à mes yeux, l'une des meilleures. J’ai repris l’idée derrière cela, j’ai fait quelque chose de magique avec Sass qui m'a permis de créer rapidement des classes de colonnes et de construire une grille pour les petites, moyennes et grandes fenêtres..
Il est très facile de changer le comportement réactif d'un élément. Vous définissez le comportement une fois pour le module, mais si vous avez un autre comportement à un moment donné, vous créez un modificateur tel que .m-text-with-asset - large
// Définit le nombre maximum de colonnes et l'espace entre chaque colonne $ max-cols: 2; $ gutter-width: 25px;
// Nom: Default-Grid @for $ sum de 1 à $ max-cols @for $ i de 1 à $ sum .lu - # $ i - # $ sum @include col ($ i, $ somme); // Nom: Small-Grid @for $ sum de 1 à $ max-cols @for $ i de 1 à $ sum .lu - petit - # $ i - # $ sum @include respond-to ('small') @include col ($ i, $ sum); // Nom: Grille moyenne @for $ sum de 1 à $ max-cols @for $ i de 1 à $ sum .lu - moyen - # $ i - # $ sum @include respond-to ('medium') @include col ($ i, $ sum); // Nom: Grande grille @for $ sum de 1 à $ max-cols @for $ i de 1 à $ sum .lu - large - # $ i - # $ sum @include respond-to ('large') @include col ($ i, $ sum); // Utilisation Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod invidunt temporaire jusqu’à labore et dolore magna aliquyam erat, sed diam voluptua.
Sur mobile, vous obtiendrez une colonne pleine largeur, au-delà de 480px, une demi-colonne et plus de 768px, une troisième colonne..
La plupart des sites Web (déclaration rapide) ont un conteneur centré. Ce n’est pas toujours le cas, c’est pourquoi il est utile de créer un assistant:
// Nom: Conteneur contraint .l-constrained margin-left: auto; marge droite: auto; padding-left: $ empêche-espacement; padding-right: $ empêche-espacement; max-width: $ max-wrapper-width;
Si vous n'utilisez pas flexbox comme moteur de choix, vous utiliserez des flottants. Il est impératif de vider les flotteurs, car sinon tout le tracé pourrait être ruiné.
.l-group: after contenu: "; clear: les deux; display: table;
Lorsque je constate un espacement constant dans un schéma de configuration, j'utilise des classes auxiliaires pour conserver les mesures vraies..
// Nom: Distance-petit // Description: Aide pour créer une distance-top .l-distance-small margin-top: 20px; // Nom: Distance-Medium // Description: Aide pour créer la distance-top .l-distance-medium margin-top: 40px;
Préférez-vous un générateur de polices en ligne ou utilisez-vous une interface de ligne de commande pour générer des polices? Je préfère une solution en ligne, l'outil de mon choix étant fontastic.me. Il y a un bon aperçu de toutes vos polices, vous pouvez choisir comment la correspondance de classe ou de caractère doit être.
Commençons maintenant à créer des classes pour vos icônes. Je ne vous montrerai pas les styles de base de chaque icône. Vous pouvez gérer cela vous-même, mais cela peut vous aider avec la configuration de base des icônes..
// Nom: tableau avec le nom et la valeur de contenu $ icons: ('checkmark "a", "moins" b "," plus "c"); $ préfixe: "icon--"! Default; // nom: Loop // Description: Créez pour chaque icône une classe avec le contenu correct Configuration pour les icônes dans _config.scss // Utilisez le mixin pour la création d'icônes situé en haut de l'article @ chaque icône $ dans $ icons $ name : nth ($ icon, 1);. # unquote ($ prefix) # $ name @include icon ('before', $ name); // Résultat .icon - coche: avant contenu : 'a'; .icon - minus: before contenu: 'b'; .icon - plus: before contenu: 'c';Tu vois ce que je veux dire? Lorsque j'ai débuté en tant que développeur CSS, j'ai tout construit à partir de la page du concepteur, mais que se passe-t-il si vous avez besoin d'un module sur un autre site? Pour cette raison, il est important de construire des modules fermés sans la disposition autour.
Créez un fichier pour votre module et mettez-le dans le dossier _modules. En haut du fichier, vous avez une zone de configuration dans laquelle vous définissez les couleurs ou d’autres aspects qui affecteront le thème..
Sous la configuration, vous définissez le module avec tous les styles. Utilisez bien les commentaires, afin de simplifier le module.
@charset 'UTF-8'; // 1.Config $ accordion-bgcolor: $ grey-light! Default; $ accordion-alternative-bgcolor: $ gray-dark! default; $ accordion-fontcolor: $ corp-color! default; // 2.Base // Nom: Accordion par défaut .m-accordion background: $ accordion-bgcolor; couleur: $ accordéion-fontcolor; // Nom: Accordion alternatif .m-accordéon - alternative background-color: $ accordion-alternative-bgcolor;
N'hésitez pas à bifurquer le référentiel qui contient tout le code vu dans cet article. J'espère que cela vous aidera à construire un meilleur front-end évolutif dans des projets du monde réel. Merci de partager vos pensées et vos idées avec moi dans les commentaires..
