Share
Le flux de travail du développeur frontend a subi de grands changements ces dernières années. Plus de complexité, des exigences plus élevées et des projets plus importants nous amènent vers de nouvelles technologies telles que les pré-processeurs. Personnellement, j'aime mon flux de travail de préprocesseur et je ne voudrais pas rater Sass pour mes projets ces temps-ci - sans cela, je serais un gâchis.
Sass m'a notamment aidé à créer une seule et même interface solide pouvant avoir différents thèmes - changer facilement de couleur, d'image ou de police. Aujourd'hui, je vais décrire mon flux de travail, j'espère que vous en retirerez quelque chose d'utile.
Voici la structure d'un exemple de projet. Vous pouvez utiliser tous les partiels qui, à votre avis, devraient être inclus. L’important est d’avoir un dossier séparé pour les thèmes et un nouveau .scss fichier pour chaque thème.
| - _scss / | - | - _base / | - | - | - _config.scss | - | - _layouts / | - | - | - _l-grid.scss | - | - | - _l-default.scss | - | - _modules / | - | - | - _m-accordions.scss | - | - | - _m-teasers.scss | - | -_themes / | - | - | - _light-theme / | - | - | - | - light .scss | - | - application.scss
dans le application.scss fichier vous importez tous vos partiels, en ignorant le dossier _themes / À ce point. Cela construit la base sur laquelle nous pouvons créer différents thèmes.
@charset 'UTF-8'; // 1.Base @import '_base / _config.scss'; // 2.Layouts @import '_layouts / _l-grid', '_layouts / _l-default'; // 3.Modules @import '_modules / _m-accordéons', '_modules / _m-teasers';
La configuration de votre projet est très importante. Ici, les variables viennent à la rescousse, nous permettant de définir les valeurs par défaut, puis d’écraser les valeurs au niveau du thème ultérieurement. Ici vous pouvez voir que j'ai défini des variables pour les couleurs, les polices et les paramètres de bordure.
Pour plus de détails sur la dénomination des variables, consultez le conseil rapide de Jim Nielsen: Nommez vos variables SASS de manière modulaire..
@charset "UTF-8"; // Couleurs $ black: # 000; $ white: #fff; $ red: # e2061c; $ grey-light: # c9c8c8; $ grey: # 838282; $ grey-dark: # 333333; $ blue: # 253652; // Corp-Couleurs $ corp-color: $ blue! Default; $ corp-color-dark: assombrir ($ corp-color, 15%)! default; $ corp-color-second: $ red! default; $ corp-color-second-dark: assombrir ($ corp-color-second, 15%)! default; // Police $ base-font-size: 1.8! Default; $ base-font-family: Helvetica, Arial, Sans-Serif! default; $ base-font-color: $ grey-dark! default; // Bordure $ base-border-radius: 2px! Default; $ arrondi-frontière-rayon: 50%! default; $ base-border-color: $ grey! default;
La clé de cette étape consiste à utiliser le !défaut drapeau après les déclarations de variables. Cela vous permet de les écraser dans le thème. .scss des dossiers; la !défaut dit efficacement “Utiliser cette valeur si elle n'est pas définie ailleurs”.
Très souvent, les développeurs ne créent pas de variables pour les images, mais écrivent des URL directement dans les sélecteurs. Une approche que j’aime est de supprimer tous les chemins des partiels et de les placer dans le fichier de configuration sous forme de variables. Cela vous facilitera la vie et rendra le projet plus facile à maintenir..
// Images $ sprite: '… /images/base/sprite.png'! Default; $ colorbox-background: '… /images/base/colorbox-background.png'! default;
Ici, vous pouvez voir certaines variables d'arrière-plan en action. Ceci est un partiel modulaire pour un accordéon, utilisant la variable globale $ sprite mais aussi la mise et l'utilisation d'une variable $ accordéon-bgcolor qui est spécifique au module.
// 1.Config $ accordion-bgcolor: $ grey! Default; // 2.Base .m-accordion padding: 20px; fond: $ accordéion-bgcolor; .m-accordion__trigger background: url ($ sprite) no-repeat;
Dans votre fichier de thème (tel que le _themes / _light-theme / light.scss de la structure de démonstration ci-dessus) importez le application.scss qui contient tous les modules, mises en page et ainsi de suite. C'est la base de tout. avec un thème, nous allons placer une seconde couche dessus. Rien de plus. Une fois que vous avez importé application.scss ajoute les mêmes variables que celles utilisées précédemment, mais définit des valeurs spécifiques à ce thème.
En utilisant cette technique, si nous ajoutons de nouveaux modules à la base du projet, nous les compilerons automatiquement (et sans danger) dans tous nos thèmes..
@charset 'UTF-8'; // 1.Overwrite stuff $ corp-color: $ grey; $ corp-color-darken: assombrit ($ corp-color, 10%); $ corp-color-second: $ blue; $ corp-color-second-dark: assombrit ($ corp-color-second, 10%); $ base-font-size: 1.6; $ base-font-family: Droid Sans, Géorgie, Arial; $ base-border-radius: 0px; $ base-border-color: $ grey-light; // Images $ sprite: '… /images/light/sprite.png'; $ colorbox-background: '… /images/light/colorbox-background.png'; $ accordéon-bgcolor: $ grey-light; // 2. Importer le thème de base @import '… /… / application';
La dernière étape consiste à compiler le fichier Sass en CSS et à obtenir deux fichiers différents à utiliser. Il faut compiler application.scss et le light.scss. En utilisant la ligne de commande, vous utiliseriez quelque chose comme:
sass --watch YOUR / PATH / application.scss: YOUR / CSSPATH / application.css YOUR / PATH / _themes / _light-theme / light.scss: YOUR / CSSPATH / light.css
Si vous utilisez une application, telle que CodeKit ou une application Prepros, la compilation sera un processus plus visuel..
Inclure le light.css déposer dans l'en-tête de votre page et jeter un coup d'œil sur votre site Web rafraîchi.
Comme vous pouvez le constater, il est utile et simple d’avoir plusieurs fichiers de thèmes, tous basés sur une base solide. N'hésitez pas à poser des questions ou à donner votre avis et à partager vos expériences avec nous dans la section commentaires.
Accentsconagua