Share
Fluxul de lucru al dezvoltatorului frontend a suferit mari schimbări în ultimii ani. Mai multă complexitate, cerințe mai mari și proiecte mai mari ne conduc către noi tehnologii, cum ar fi preprocesoarele. Personal, îmi place fluxul de lucru preprocesor și nu vreau să-mi pierd Sass pentru proiectele mele în zilele noastre - fără ea aș fi o mizerie.
O situație în special în cazul în care Sass ma ajutat afară este crearea unui singur frontend solid, care poate avea teme diferite - schimbarea culorilor, a imaginilor sau a fonturilor cu ușurință. Astăzi voi descrie fluxul meu de lucru, sper că veți lua ceva util de la el.
Iată structura unui exemplu de proiect. Puteți folosi indiferent de partile pe care le simțiți în mod logic. Cheia este să aveți un dosar separat pentru teme și un nou dosar .SCSS fișier pentru fiecare temă.
| - _scss / | - | - _base / | - | - | - _config.scss | - | - _layouts / | - | - | - _l-grid.scss | - | - _l-default.scss | - _modules / | - | - | - _m-acordeoane.scss | - | - | - _m-teasers.scss | - | -_themes / | - | - | - _light-theme / | - | - | - | .scss | - | - application.scss
În application.scss fișierul pe care îl importați toate partialele, ignorând dosarul _themes / in acest punct. Aceasta construiește baza pe care putem crea teme diferite.
@charset "UTF-8"; // 1.Baza @import '_base / _config.scss'; / / 2.Layouts @import '_layouts / _l-grid', '_layouts / _l-default'; // 3.Module @ import '_modules / _m-acordeoane', '_modules / _m-teasers';
Configurarea proiectului dvs. este foarte importantă. Aici variabilele vin la salvare, permițându-ne să setăm valorile implicite, apoi să suprascriem valorile la nivel de temă mai târziu. Aici puteți vedea că am setat unele variabile pentru culori, fonturi și setări de frontieră.
Pentru mai multe detalii privind denumirea variabilelor, aruncați o privire la Sfat rapid al lui Jim Nielsen: Nume variabilele SASS modulare.
@charset "UTF-8"; // Culori $ negru: # 000; $ white: #fff; $ roșu: # e2061c; $ gri-light: # c9c8c8; $ gri: # 838282; $ gri-întuneric: # 333333; $ albastru: # 253652; // Corp-Culori $ corp-color: $ blue! $ corp-color-întuneric: întunecat ($ corp-color, 15%)! implicit; $ corp-color-second: $ roșu! $ corp-color-second-dark: întuneric ($ corp-color-second, 15%)! implicit; // Font $ base-font-size: 1.8! Implicit; $ base-font-family: Helvetica, Arial, Sans-Serif! $ base-font-color: $ gri-întuneric! implicit; // Border $ base-border-radius: 2px! $ rotunjit-raza de graniță: 50%! implicit; $ base-border-color: $ gri!
Cheia acestei etape este folosirea !Mod implicit după declarațiile variabilelor. Acest lucru vă permite să le înlocuiți în cadrul temei .SCSS fișiere; !Mod implicit spune în mod eficient "Utilizați această valoare dacă nu este definită în altă parte".
Dezvoltatorii foarte des nu creează variabile pentru imagini, ci scriu url-uri direct în selectori. O abordare care îmi place este să eliminăm toate căile din cadrul partialelor și să le punem în fișierul de configurație ca variabile. Acest lucru vă va face viața mai ușoară, iar proiectul mai bine întreținut.
// Imagini $ sprite: '... /images/base/sprite.png'! $ colorbox-background: '... /images/base/colorbox-background.png'!
Aici puteți vedea câteva variabile de fond în acțiune. Acesta este un modular parțial pentru un acordeon, care utilizează variabila globală $ sprite dar și setarea și utilizarea unei variabile $ Acordeon-bgcolor care este specific modulului.
// 1.Config $ acordeon-bgcolor: $ gri! Implicit; // 2.Baza .m-acordeon padding: 20px; fundal: $ acordeon-bgcolor; .m-accordion__trigger fundal: url ($ sprite) no-repeat;
În fișierul tematic (cum ar fi _themes / _light-tema / light.scss din structura demo de mai sus) application.scss care conține toate modulele, layouts și așa mai departe. Aceasta este baza pentru tot; cu o temă vom plasa un al doilea strat peste el. Nimic mai mult. Odată ce ați importat application.scss adăugați aceleași variabile utilizate anterior, dar definiți valori specifice acestei teme.
Folosind această tehnică, dacă adăugăm noi module la baza proiectului, vom compila în mod automat (și fără probleme) în toate temele noastre.
@charset "UTF-8"; // 1.Overwrite chestii $ corp-color: $ gri; $ corp-color-întunecat: întunecat ($ corp-color, 10%); $ corp-color-second: $ albastru; $ corp-color-al doilea-întuneric: întunecat ($ corp-culoare-secundă, 10%); $ base-font-size: 1.6; $ base-font-family: Droid Sans, Georgia, Arial; $ base-border-radius: 0px; $ base-border-color: $ gri-lumină; // Imagini $ sprite: '... /images/light/sprite.png'; $ colorbox-background: '... /images/light/colorbox-background.png'; $ acordeon-bgcolor: $ gri-lumină; // 2. Importul temei de bază @import '... / ... / application';
Ultimul pas este să compilați Sass către CSS și să obțineți două fișiere diferite pentru utilizare. Trebuie să ne compilam application.scss si light.scss. Folosind linia de comandă ai folosi ceva de genul:
sass - vă uitați YOUR / PATH / application.scss: YOUR / CSSPATH / application.css YOUR / PATH / _themes / _light-theme / light.scss: YOUR / CSSPATH / light.css
Dacă utilizați o aplicație, cum ar fi CodeKit sau Prepros App, compilarea va fi un proces mai vizual.
Includeți light.css fișier în capul paginii dvs. și să aruncați o privire la site-ul tău revăzută.
După cum puteți vedea, este util și simplu să aveți mai multe fișiere tematice, toate bazate pe o bază solidă. Simțiți-vă liber să puneți întrebări sau să oferiți feedback și să vă împărtășiți experiențele dvs. în secțiunea de comentarii.
Accentsconagua