Je hebt misschien gehoord van CSS-voorbewerking en je kunt je afvragen waar het allemaal om gaat. Misschien heb je er weleens van gehoord Sass of MINDER .
Kortom, preprocessing van uw CSS stelt u in staat om meer beknopte stylesheets te schrijven die mooi zijn geformatteerd en die minder repetitieve technieken vereisen die u vaak tegenkomt bij het schrijven van CSS-code. Het resultaat is een dynamischer styling en voldoende tijdwinst bij het ontwikkelen van websites of applicaties.
Als u al CSS schrijft, kunt u eenvoudig leren om uw CSS voor te bereiden. Zodra u de omvang van Sass begrijpt, vraagt u zich af waarom u niet eerder bent overgestapt.
Sass lijkt op CSS, maar heeft zijn duidelijke verschillen zodra je erin duikt. Er zijn twee manieren om Sass te schrijven en het is uiteindelijk aan jou welke stijl je verkiest. Ik gebruik de inspringende en haaks geplaatste stijl (.scss) in mijn projecten omdat ik heel graag visualiseer waar een blok eindigt en begint wanneer er veel code wordt genest. Eenmaal verwerkt, compileert de Sass-code automatisch naar traditionele CSS met behulp van een voorbewerkingsengine.
Er zijn veel apps beschikbaar waarmee u uw Sass vooraf kunt laten compileren zodat deze naadloos en eenvoudig is. Om te installeren, kunt u de opdrachtregel gebruiken zolang u Ruby op uw computer hebt geïnstalleerd. Als je je niet op je gemak voelt met de opdrachtregel, zijn er andere opties (meer hierover hieronder) en als dit je niet goed zit, ga je naar Sass-lang.com om te leren hoe je dit kunt doen in een eenvoudige stapsgewijze indeling. Uiteindelijk gebruikt de Sass-installatie, op welke manier dan ook, de commandoregel of de app, uw wijzigingen en compileert automatisch naar de traditionele CSS voor u.
Ik raad ten zeerste aan om apps te gebruiken zoals Codekit , LiveReload of Mengsel die u helpen bij het opzetten van een Sass-project op een Mac vanaf nul of als u een Windows-gebruiker bent, raad ik u aan PrePros . Codekit, mijn keuze voor preprocessor, helpt me door mijn Sass voor te bewerken en ook om je code te valideren en te verkleinen, zodat je website snel en effectief werkt. (Het vermogen om te creëren Kompas of Bourbon gebaseerde projecten binnen Codekit is ook een geweldige functie, maar valt buiten het bestek van dit artikel.) Nadat je meer vertrouwd bent geraakt met Sass, moet je zeker weten hoe je Compass en Bourbon kunt gebruiken in je Sass-projecten.
Sass staat voor Syntactically Awesome Stylesheets en is gemaakt door Hampton Catlin . Sass introduceert nieuwe concepten zoals variabelen, mixins en nestelen in de CSS-code die u al kent en waar u van houdt. Deze concepten maken je CSS uiteindelijk geweldig, gemakkelijker te schrijven en dynamischer. Al deze functies gecombineerd, versnellen de werkstroom van een ontwerper of ontwikkelaar.
Wat mensen vaak verwart is de alternatieve manier om Sass te schrijven. U zult andere tutorials of uitleg van Sass zien met de .SCSS of de .Sass extensie voor hun Sass-bestanden. Dit is duidelijk omdat er twee manieren zijn om de code te schrijven die dezelfde uitvoer produceert. De meest voorkomende die ik heb gezien en de methode die ik momenteel gebruik, is de versie met de haken die bekend staat als .SCSS. Een andere methode is de .Sass-extensie die meer afhankelijk is van inspringing dan van punctuele elementen en afhankelijk is van de witruimte. Met deze syntaxis is er geen behoefte aan puntkomma's of haakjes zoals je ziet in CSS en de .SCSS-syntaxis.
Bekijk het onderstaande voorbeeld.
#container {width:960px;margin:0 auto;}#container p {color: black;}/* Same as CSS but has variables and nesting. */$black: #000000;#container {width:960px;margin:0 auto;p {color :$black;}}/* Same as SCSS without semicolons, brackets, and more dependent on indentation. */$black: #000000#containerwidth:960pxmargin: 0 autopcolor:$blackOké, dus nu vraag je je waarschijnlijk af hoe je Sass-instellingen voor je eigen projecten kunt krijgen. Het proces is vrij eenvoudig, vooral als je Codekit of een vergelijkbare applicatie gebruikt om je op weg te helpen.
Een typische bestandsstructuur van een Sass-project lijkt op de onderstaande schets. Dit ziet er misschien beangstigend uit, maar ik beloof dat je workflow zal verbeteren als je eenmaal je hoofd omdraait hoe dingen samenwerken. Uiteindelijk wordt al je Sass gecompileerd tot een CSS-bestand dat het bestand is dat je in je werkdocumenten opneemt, of het nu HTML, PHP, enz. Is.
stylesheets/||-- modules/ # Common modules| |-- _all.scss # Global level styles| |-- _utility.scss # Basic utility styles| |-- _colors.scss # Global Colors| ...||-- partials/ # Partials - use these to target specific styles and @import on _base.scss| |-- _base.scss # imports for all mixins + global project variables| |-- _buttons.scss # buttons| |-- _figures.scss # figures| |-- _grids.scss # grids| |-- _typography.scss # typography| |-- _reset.scss # reset| ...||-- vendor/ # CSS or Sass from other projects| |-- _colorpicker.scss| |-- _jquery.ui.core.scss| ...||-- main.scss # primary Sass file - where your main Sass code will likely be.Hoe u uw structuur opmaakt, hangt uiteindelijk van u af. Begin met een basisstructuur en stem af op uw eigen behoeften en workflow.
Sass breidt de CSS @import- regel uit om Sass- en SCSS-bestanden te kunnen importeren. Alle geïmporteerde bestanden worden samengevoegd in een enkel uitgevoerd CSS-bestand. Bovendien worden alle variabelen of mixins die in geïmporteerde bestanden zijn gedefinieerd overgedragen naar het hoofdbestand, wat betekent dat u elk bestand virtueel kunt mixen en matchen en er zeker van kunt zijn dat al uw stijlen op een wereldwijd niveau blijven.
@import neemt een bestandsnaam om te importeren. Als laatste redmiddel worden Sass- of SCSS-bestanden geïmporteerd via de bestandsnaam van uw keuze. Als er geen extensie is, probeert Sass een bestand met die naam en de extensie .scss of .Sass te vinden en het te importeren.
Als u een typische Sass-projectinstallatie hebt, zult u enkele @import-regels binnen een basisbestand opmerken. Hiermee kunt u eenvoudig meerdere bestanden hebben die effectief worden gesynchroniseerd zodra ze zijn gecompileerd, bijvoorbeeld:
@import "main.scss";of:
@import "main";@PartialsAls u een SCSS- of Sass-bestand hebt dat u wilt importeren maar niet wilt compileren naar CSS, kunt u een onderstrepingsteken toevoegen aan het begin van de bestandsnaam, die ook wel Partial wordt genoemd. Terwijl de code compileert, negeert Sass partities bij de verwerking tot CSS. U hebt bijvoorbeeld mogelijk _buttons.scss, geen _buttons.css-bestand en kunt vervolgens @import "-knoppen";
Best practice is om een partials-directory te maken en al uw gedeeltelijke Sass-bestanden erin te plaatsen. Als u dit doet, hebt u geen dubbele bestandsnamen die Sass niet toestaat, bijvoorbeeld de gedeeltelijke _buttons.scss en de bestandsknoppen. Scss kunnen niet in dezelfde map voorkomen. Het gebruik van partials is een geweldige manier om op mondiaal niveau georganiseerd te blijven. Zolang u het bestand @importeert, is de Sass die u schrijft bruikbaar gedurende het hele project. Typisch binnen gedeelten maak ik mixins of variabelen om te gebruiken gedurende mijn project. Ik noem ze op basis van hun inhoud en de elementen die ze in model brengen.
Variabelen in CSS zijn een doorbraak in moderne webontwikkeling. Met Sass kunt u variabelen maken voor zaken als lettertypen, kleuren, formaten, marge, opvulling, enz. De lijst is eindeloos. Als je JavaScript of PHP schrijft, is het concept redelijk vergelijkbaar wat betreft het definiëren van variabelen en conventies.
Dus waarom variabelen gebruiken? Met eenvoudige variabelen kunt u een element meerdere keren gebruiken, vergelijkbaar met een klasse in HTML of een variabele in JavaScript. Stel bijvoorbeeld dat u meerdere div's definieert met een specifieke achtergrondkleur. U kunt de variabele gebruiken die gemakkelijker te onthouden is in plaats van de traditionele hex-code of RGB-berekening. Het maken van een variabele met een gemakkelijk te onthouden naam zorgt voor minder kopiëren en plakken en een productievere workflow. Hetzelfde concept is van toepassing wanneer een variabele kan worden geïmplementeerd en met Sass vrijwel overal is, bijvoorbeeld .scss:
#container {/* Here we define our variables */$basetextsize: 12px;$container-space: 10px;$red: #C0392B;/* Variables are applied */font-size: $basetextsize;padding: $container-space;color : $red;}zal resulteren in dit .css-bestand:
#container {font-size: 12px;padding: 10px;color: #C0392B;}Het leuke aan variabelen is dat ze extreem lijken op die gebruikt in scripttalen. Variabelen binnen Sass kunnen worden gebruikt binnen zowel bewerkingen als functies. De standaard wiskundige bewerkingen (+, -, *, / en%) worden ondersteund voor getallen. Voor kleuren zijn er functies ingebouwd in Sass die gericht zijn op lichtheid, tint, verzadiging en meer.
Met deze functionaliteit wordt uw code dynamischer dan ooit. Als u bijvoorbeeld de algehele koppelingskleur van uw site wilt wijzigen, kunt u eenvoudig de variabele wijzigen, opnieuw compileren en uw site wordt dynamisch overal bijgewerkt. Bekijk een ander voorbeeld hieronder voor een herbruikbare navigatielijst, deze .scss:
nav{$nav-width: 900px;$nav-links: 5;$nav-color: #ce4dd6;width: $nav-width;li{float: left;width: $nav-width/$nav-links - 10px;background-color:lighten($nav-color, 20%);&:hover{background-color:lighten ($nav-color, 10%);} }} zal resulteren in deze .css:
nav {width: 900px;}nav li {float:left;width: 170px;background-color: #E5A0E9;}nav li:hover {background-color: #D976E0;}Nesten is een enorme reden waarom ik van Sass hou. U schrijft uiteindelijk minder regels code en al uw code is gemakkelijk te lezen vanwege de geneste opmaak. (Hetzelfde concept van nesten is ook te vinden in MINDER.)
Er zijn twee soorten nesten:
Selector nesten in Sass is vergelijkbaar met hoe u HTML zou nesten:
Main Content
Sidebar Content
De Sass-versie van nesting:
#container {.main {width:600px;h1 {color: $red;}}.sidebar {width: 300px;h3 {margin: 0;}}}zou resulteren in de volgende CSS:
#container .main {width: 960px;}#container .main h1 {color: #C0392B;}#container .sidebar {width: 300px;}#container .sidebar h3 {margin: 0;}Het tweede type nesting is property-nesting. U kunt eigenschappen met hetzelfde voorvoegsel aan betere doelelementen hechten, wat resulteert in minder regels code, bijvoorbeeld dit:
#container {.main {font:weight: bold;size: 12px;.intro {font:size: 20px;}}}zou resulteren in deze CSS:
#container .main {font-weight:bold;font-size: 12px;}#container .main .intro {font-size:20px;}Van alle Sass-functies moeten Mixins de krachtigste zijn. Mixins lijken op een variabele, maar op steroïden. U kunt een volledige stijl van een element definiëren en deze stijlen gedurende uw project opnieuw gebruiken.
Mixins worden gedefinieerd met behulp van de @mixin- richtlijn, die een blok met stijlen neemt die u eerder hebt gemaakt en deze toepast op de selector van uw keuze met behulp van de @include- instructie. Hieronder staat een gemeenschappelijk CSS-patroon dat wordt gebruikt voor het maken van een horizontaal navigatiemenu. In plaats van dezelfde code te schrijven voor elke navigatie-instantie, gebruikt u gewoon een mixin en voegt u deze later waar nodig toe. Dit concept kan worden gebruikt voor alles wat u keer op keer gebruikt, zoals knoppen, typografie, verlopen, enz ...
/* Here we define the styles */@mixin navigate {list-style-type:none;padding:0;margin:0;overflow:hidden;> li {display:block;float:left;&:last-child{margin-right:0px;}}}En hier nemen we de mixin op met één regel code:
ul.navbar {@include navigate;}wat resulteert in deze gecompileerde CSS:
ul.navbar {list-style-type: none;padding:0;margin:0;overflow: hidden;}ul.navbar li {display: block;float: left;}ul.navbar li:last-child {margin-right: 0px;}Je kunt zelfs zo ver gaan als aanpasbare mixins maken die argumenten gebruiken om dynamisch te updaten. Bovendien kunt u mixins opnemen in andere mixins of functies maken met mixins en meer. De kracht achter deze is absoluut enorm.
Er zijn enkele populaire vooraf gedefinieerde mixin-collecties waarin ik eerder heb genoemd Compass en Bourbon. Met een eenvoudige @import in uw project kunt u toegang hebben tot reeds gegenereerde mixins die algemeen worden gebruikt op internet. Er zijn zoveel opties dat het moeilijk is om alles wat beschikbaar is te dekken, maar het is beslist leuk om te experimenteren en je handen vies te maken door aangepaste animaties of overgangen te ontwikkelen met een paar regels code in plaats van een scherm vol. Mixins maken cross-browserontwikkeling een koud kunstje als je geen zin hebt om door de browser gedefinieerde prefixen steeds opnieuw in je CSS te typen.
Hier maken we bijvoorbeeld een mix in met argumenten waarmee deze kan worden aangepast.
@mixin my-border($color, $width) {border: {color: $color;width: $width;style: $dashed;}}p { @include my-border (blue, lin); }welke ons deze CSS geeft wanneer het gecompileerd is:
p {border-color: blue;border-width: lin;border-style: dashed;}Hoewel Sass een leercurve kent, geloof ik echt dat als je de methoden en de syntaxis eenmaal begrijpt, je nooit meer terug wilt naar het schrijven van standaard-CSS.
Sass is buitengewoon krachtig en ik heb hier alleen de basis besproken. Met traditionele CSS zijn we allemaal het kopiëren en plakken tegengekomen of het vinden en vervangen van taken die zo veel tijd verspillen in de ontwikkelingsfase van uw project. Geef Sass een kans en ontdek hoe u een effectieve workflow kunt opbouwen in uw toekomstige projecten.
Gebruikt u Sass of geeft u de voorkeur aan een andere preprocessor voor CSS? Heb je een favoriete mixin? Laat het ons weten in de comments.
Uitgelichte afbeelding / miniatuur, maakt gebruik van een afbeelding van nul tot held via Shutterstock.