Share
De workflow van de frontend-ontwikkelaar heeft de afgelopen jaren grote veranderingen ondergaan. Meer complexiteit, hogere eisen en grotere projecten brengen ons in de richting van nieuwe technologieën zoals preprocessors. Persoonlijk houd ik van mijn preprocessor-workflow en zou ik Sass niet willen missen voor mijn projecten deze dagen - zonder dat zou ik een puinhoop zijn.
In het bijzonder één situatie waarin Sass me heeft geholpen, is het creëren van een solide frontend die verschillende thema's kan hebben - met gemak veranderende kleuren, afbeeldingen of lettertypen. Vandaag ga ik mijn workflow beschrijven, ik hoop dat je er iets nuttigs uithaalt.
Hier is de structuur van een voorbeeldproject. Je kunt alle partials gebruiken die je logisch zou moeten opnemen. De sleutel ligt in het hebben van een aparte map voor thema's en een nieuwe .SCSS bestand voor elk thema.
| - _scss / | - | - _base / | - | - | - _config.scss | - | - _layouts / | - | - | - _l-grid.scss | - | - | - _l-default.scss | - | - _modules / | - | - | - _m-accordions.scss | - | - | - _m-teasers.scss | - | -_themes / | - | - | - _light-theme / | - | - | - | - licht .scss | - | - application.scss
In de application.scss bestand importeer je al je partials en negeer je de map _thema's/ op dit punt. Dit vormt de basis waarop we verschillende thema's kunnen creëren.
@charset 'UTF-8'; // 1.Base @import '_base / _config.scss'; // 2.Layouts @import '_layouts / _l-grid', '_layouts / _l-default'; // 3.Modules @import '_modules / _m-accordions', '_modules / _m-teasers';
Het configureren van uw project is erg belangrijk. Hier komen variabelen te hulp, waardoor we standaardwaarden kunnen instellen en later waarden op themaniveau kunnen overschrijven. Hier kun je zien dat ik een aantal variabelen heb ingesteld voor kleuren, lettertypen en randinstellingen.
Zie voor meer informatie over variabelen over de naamgeving de Quick Tip van Jim Nielsen: geef uw SASS-variabelen een naamswijziging.
@charset "UTF-8"; // Kleuren $ zwart: # 000; $ wit: #fff; $ rood: # e2061c; $ grijs-licht: # c9c8c8; $ grijs: # 838282; $ grijs-donker: # 333333; $ blauw: # 253652; // Corp-Colors $ corp-color: $ blue! Default; $ corp-color-dark: donkerder ($ corp-color, 15%)! standaard; $ corp-color-second: $ red! standaard; $ corp-color-second-dark: donkerder ($ corp-color-second, 15%)! standaard; // Font $ base-font-size: 1.8! Default; $ base-font-family: standaardinstelling voor Helvetica, Arial, Sans-Serif! $ base-font-color: $ gray-dark! default; // Border $ base-border-radius: 2px! Standaard; $ rounded-border-radius: 50%! standaard; $ base-border-colour: $ gray! default;
De sleutel tot deze fase ligt in het gebruik van de !standaard markeer na de variabele declaraties. Als u dit doet, kunt u ze binnen het thema overschrijven .SCSS bestanden; de !standaard zegt effectief "Gebruik deze waarde als deze niet elders gedefinieerd is".
Heel vaak maken ontwikkelaars geen variabelen voor afbeeldingen, maar schrijven ze urls rechtstreeks in selectors. Een aanpak die ik leuk vind, is alle paden in partials te verwijderen en ze als variabelen in het configuratiebestand te plaatsen. Dit zal uw leven gemakkelijker maken en het project beter onderhouden.
// Afbeeldingen $ sprite: '... /images/base/sprite.png'! Default; $ colorbox-achtergrond: '... /images/base/colorbox-background.png'! standaard;
Hier ziet u enkele achtergrondvariabelen in actie. Dit is een modulaire partitie voor een accordeon, gebruikmakend van de globale variabele $ sprite maar ook een variabele instellen en gebruiken $ Accordeon-bgcolor die specifiek is voor de module.
// 1.Config $ accordeon-bgkleur: $ grijs! Standaard; // 2.Base .m-accordeon opvulling: 20px; achtergrond: $ accordeon-bgcolor; .m-accordion__trigger background: url ($ sprite) no-repeat;
In uw themabestand (zoals de _themes / _light-theme / light.scss uit de demostructuur hierboven) importeer de application.scss welke alle modules, lay-outs enzovoort bevat. Dit is de basis voor alles; met een thema plaatsen we er een tweede laag overheen. Niets meer. Als je eenmaal hebt geïmporteerd application.scss voeg dezelfde variabelen toe die eerder werden gebruikt, maar definieer waarden die specifiek zijn voor dit thema.
Met behulp van deze techniek zullen we, als we nieuwe modules toevoegen aan de basis van het project, deze automatisch (en onschadelijk) samenstellen binnen al onze thema's.
@charset 'UTF-8'; // 1.Overwrite stuff $ corp-color: $ grey; $ corp-color-darken: darken ($ corp-color, 10%); $ corp-color-second: $ blue; $ corp-color-second-dark: donkerder ($ corp-color-second, 10%); $ base-font-size: 1.6; $ base-font-family: Droid Sans, Georgia, Arial; $ base-border-radius: 0px; $ base-border-colour: $ gray-light; // Afbeeldingen $ sprite: '... /images/light/sprite.png'; $ colorbox-achtergrond: '... /images/light/colorbox-background.png'; $ accordion-bgcolor: $ gray-light; // 2. Importeer basisthema @import '... / ... / toepassing';
De laatste stap is om de Sass te compileren naar CSS en twee verschillende bestanden te krijgen voor gebruik. We moeten compileren application.scss en de light.scss. Met behulp van de commandoregel gebruikt u zoiets als:
sass --watch YOUR / PATH / application.scss: YOUR / CSSPATH / application.css YOUR / PATH / _themes / _light-theme / light.scss: YOUR / CSSPATH / light.css
Als u een app gebruikt, zoals CodeKit of Prepros App, wordt compileren een meer visueel proces.
Neem de light.css bestand in de kop van uw pagina en neem een kijkje op uw opgefriste website.
Zoals u kunt zien, is het handig en eenvoudig om meerdere themabestanden te hebben, allemaal gebaseerd op een solide basis. Aarzel niet om vragen te stellen of feedback te geven en deel uw ervaringen met ons in de opmerkingensectie.
Accentsconagua