27.07.2017

Deze serie SASS-tutorials is bedoeld voor beginners en ervaren ontwikkelaars. Dit is de eerste van een vierdelige tutorial die u door de preprocessor leidt, deze installeert en enkele functies ervan leert kennen.

Wat is SASS?

SASS (syntactisch geweldige stijlbladen)- een van de populairste. Het is een set CSS-functies waarmee u sneller en efficiënter kunt coderen. SASS ondersteunt integratie met Firefox Firebug. Met SassScript kunt u variabelen, geneste stijlen en overgenomen selectors maken.

SASS maakt het snel en gemakkelijk om minder (soms aanzienlijk minder) CSS-code te schrijven en deze dynamisch te beheren als een programmeertaal (het is trouwens geen programmeertaal). Het is een geweldig hulpmiddel voor het schrijven van functionelere en schonere CSS die de workflow van elke ontwerper en ontwikkelaar kan versnellen.

Waarom heb je SASS nodig?

De meeste front-end frameworks, waaronder Bootstrap, Materialise en Foundation, zijn gebouwd met deze uitstekende preprocessor. Als u SASS kent, kunt u meer functies van deze raamwerken gebruiken.

Hoe gebruik je SASS?

Er zijn veel applicaties die het gemakkelijk en snel maken om SASS te gebruiken: CodeKit, Compass, Koala, enz. Je leert er meer over in andere delen van de tutorial. In dit hoofdstuk zullen we geen andere applicaties of tools gebruiken dan die nodig zijn om SASS op een computer uit te voeren. U hoeft zich geen zorgen te maken over het besturingssysteem, want alles is voor alle gebruikers duidelijk.

Download en installeer SASS

U kunt SASS alleen installeren op een machine waarop Ruby al is geïnstalleerd:

• Ruby is vooraf geïnstalleerd op de Mac, dus je kunt Sass Macintosh meteen installeren;
• Als je Windows gebruikt, moet je eerst Ruby downloaden;
• Ruby op Linux kan worden gedownload via de apt-pakketbeheerder, rbenv of rvm.

Nadat Ruby is geïnstalleerd, kunt u SASS op uw computer installeren. Laten we een Ruby-opdrachtregel openen en SASS op uw systeem installeren:

Gem installeer sass

Als de bovenstaande opdracht niet werkt, moet u mogelijk de opdracht sudo gebruiken:

Sudo gem installeer sass

Als u de SASS-versie wilt controleren, gebruikt u de volgende opdracht:

SASS is geïnstalleerd. Laten we een projectmap maken en deze sass-basic noemen. Maak een eenvoudig html-bestand met de volgende code:

Mijn eerste SASS-project

Hallo vriend, ik leer SASS en het is echt geweldig.

Body( tekst uitlijnen: centreren; ) h1( kleur: #333; ) p( kleur: #666; )

Nu moet u dit bestand compileren met behulp van de opdrachtregel/terminal. Laten we een opdrachtprompt openen in dezelfde map (mogelijk moet u de Ruby-opdrachtprompt gebruiken als de gewone opdrachtprompt niet werkt). Typ het volgende en druk op Enter:

Sass --bekijk style.scss:style.css

U zult merken dat er nieuwe bestanden zijn gegenereerd: style.css en style.css.map. Het is vermeldenswaard dat u het kaartbestand niet hoeft aan te raken, net als het .css-bestand. Als u wijzigingen wilt aanbrengen, kunt u dit doen via style.scss. U hoeft dit proces niet elke keer te herhalen als u van stijl verandert. SASS-compilatie werkt automatisch wanneer u wijzigingen aanbrengt in het .scss-bestand.

In het volgende hoofdstuk zullen we kijken naar SASS-variabelen en waarom ze de nuttigste functie zijn in SASS (en elke andere CSS-preprocessor).

Dag Allemaal! Hoe snel vliegt de tijd. Ik merkte niet eens hoe ik overstapte van schrijfstijlen van gewone CSS naar de Sass-preprocessor. Maar ik begreep het eerder niet - wat voor soort Sass is, waar is het voor nodig, het is waarschijnlijk voor supergeavanceerde professionals in lay-out. Ja, het gebruik van preprocessors is een stap naar een nieuw niveau in webontwikkeling, maar er is hier niets engs of ingewikkelds, en je zult het zelf zien door dit artikel tot het einde te lezen.

Wat is er specifiek goed aan de preprocessor en Sass? Ik zal meteen zeggen dat er nog andere zijn, zoals Less, Stylus, enz. Ze werken allemaal volgens hetzelfde principe, maar elk heeft zijn eigen kenmerken. Sass is enorm populair geworden onder professionals, waardoor het leren veel gemakkelijker wordt. Het is alleen zo dat hoe populairder de technologie, hoe groter de gemeenschap en hoe uitgebreider de documentatie.

Preprocessors zijn ontworpen om de ontwikkelaar te ontlasten van de meeste routinetaken bij het schrijven van code, waardoor de snelheid en kwaliteit van het werk worden verhoogd. Naast CSS-preprocessors zijn er ook HTML-preprocessors, bijvoorbeeld Pug (Jade).

Artikelstructuur

Documentatie

De ontwikkelaar van Sass is de Fransman Hugo Giraudel, die al enige tijd in Duitsland woont. Uiteraard is de documentatie in het Engels, maar persoonlijk kan ik het goed beheersen (het is belangrijk om technisch Engels te kennen). Maar er is ook een vertaling in het Russisch. Ik zou nog steeds de Engelse versie aanbevelen, dit is om eraan te wennen en steeds dieper Engels te studeren. Maar de Russische is ook niet slechter.

• Engelse documentatie: http://www.sass-lang.com
• Russische documentatie: https://sass-scss.ru

Sass naar CSS compileren

Voor de software om Sass naar CSS te compileren, gebruik ik de Sass Task Manager-plug-in. Over het algemeen is Sass een toepassing (Gem) van de Ruby-taal. Daarom, als je het zonder Gulp wilt doen, moet je voor het compileren naar CSS het programmeertaalplatform Ruby installeren. Ik zal je nu niet laten zien hoe dit wordt gedaan, je kunt erover lezen op de officiële website.

Syntaxis - Sass, Scss

Laat me meteen opmerken dat er twee syntaxis zijn voor het schrijven van code: Sass en Scss.

De syntaxis van Sass verschilt enigszins van Scss. Scss lijkt meer op gewone CSS-code, en Sass elimineert de accolades en puntkomma's tussen regels. Er zijn ook verschillen in de manier waarop sommige functies zijn geschreven en je moet voorzichtig zijn met welke syntaxis je kiest. Bestandsextensies voor Sass − *.sass, en voor Scss- *.scss. De syntaxis van Sass is ouder en Scss kwam later om het voor beginners gemakkelijker te maken om te leren. Zelf ben ik deze preprocessor in Scss gaan bestuderen, zo was het makkelijker om het te begrijpen. Nu ik ben overgestapt op Sass, is het handiger voor mij.

Als we het over Sass hebben, dan is de codestructuur ervan gebouwd op basis van inkepingen (er zitten tenslotte geen accolades in) en je moet hier voorzichtig zijn, aangezien zowel een tabulator (TAB - 4 spaties) als gewone spaties ( meestal is het een dubbele spatie). Ik gebruik altijd een tabulator.

Herinneren! Als u een tab als inspringing gebruikt, moeten spaties worden uitgesloten, zodat alles hetzelfde is. En omgekeerd: als u spaties gebruikt, moet de tabulator worden uitgesloten. Anders zal de compiler een fout genereren.

Sas

.maincontent .hoofdtitel lettertypegrootte: 30px lettertypegewicht: 700 marge: 0 0 30px .description marge-onder: 30px p kleur: #444444 lettertypegrootte: 16px lijnhoogte: 22px

Scs

.maincontent ( .main-title ( lettergrootte: 30px; lettergrootte: 700; marge: 0 0 30px; ) .description ( marge-onder: 30px; p ( kleur: #444444; lettergrootte: 16px; lijn -hoogte: 22px; ) )

De meeste code-editors (bijvoorbeeld Sublime Text) hebben inkepingsmarkeringen in de vorm van strepen, waardoor we niet in de war raken. In de onderstaande voorbeelden gebruik ik de Sass-syntaxis.

Vereenvoudig uw leven met Sass

Het nestelen van regels

Dit is wat ik vanaf het begin leuk vond aan Sass, het was precies het nesten van CSS-regels in elkaar. Dit bespaart veel tijd en de code is gestructureerd en gemakkelijk te lezen. Als we bijvoorbeeld stijlen willen schrijven voor elementen van een specifieke bovenliggende container, dan moeten we in CSS elke keer de bovenliggende klasse specificeren, bijvoorbeeld als volgt:

Hoofdtitel ( lettergrootte: 30px; kleur: #444; ) .main .subtitle ( lettergrootte: 20px; ) .main .description ( lettergrootte: 14px; marge-onder: 30px; )

Dat wil zeggen dat we overal de bovenliggende class.main specificeren, en dit is op zijn beurt niet helemaal handig. Met Sass kun je het als volgt schrijven:

Scs

.main ( .title ( lettergrootte: 30px; kleur: #444; ) .subtitle ( lettergrootte: 20px; ) .description ( lettergrootte: 14px; marge-onder: 30px; ) )

Sas

.main .title lettertypegrootte: 30px kleur: #444 .subtitle lettertypegrootte: 20px .description lettertypegrootte: 14px marge-onder: 30px

Mee eens, het ziet er veel netter uit en je kunt sneller code schrijven, omdat we de bovenliggende class.main maar één keer schrijven. Als je mij wilt volgen zonder Ruby en soortgelijke software te installeren, kun je de online compiler gebruiken voor een demonstratie.

Geneste eigenschappen

Naast nestregels in Sass is er de mogelijkheid om eigenschappen te nesten. Zo schrijft u bijvoorbeeld margewaarden:

Sas

.main .title marge: boven: 10px rechts: 15px onder: 10px links: 15px

Css

.main .title ( marge-boven: 10px; marge-rechts: 15px; marge-onder: 10px; marge-links: 15px; )

Selectorbinding of aaneenschakeling - & teken

We kunnen het schrijven van onze code versnellen en deze nog compacter maken door concatenatie (verbinding) te gebruiken met behulp van het symbool - & . Hoe het werkt? We hebben bijvoorbeeld klassen zoals: .main-title, .main-subtitle, .main-description. In Sass kunnen deze klassen als volgt worden geschreven:

Lettergrootte hoofd- en titel: 30px kleur: #444 &-lettergrootte ondertitel: 20px &-beschrijving lettergrootte: 14px marge-onder: 30px

Hoofdtitel ( lettergrootte: 30px; kleur: #444; ) .hoofd-ondertitel ( lettergrootte: 20px; ) .hoofdbeschrijving ( lettergrootte: 14px; marge-onder: 30px; )

Een symbool gebruiken & we maken verbinding met de rootklasse, dat wil zeggen dat het in dit geval niet nodig is om root.main voortdurend te herhalen. Houd er tegelijkertijd rekening mee dat we geen onderliggende elementen hebben gemaakt.

/* Link */ a ( kleur: rood; ) a:hover ( kleur: blauw; ) /* Pseudo-elementen */ .main::before ( inhoud: ""; weergave: blok; lettergrootte: 20px; ) .main ::after ( inhoud: ""; weergave: blok; lettergrootte: 30px; )

Soms moet u een reeks selectors opgeven tot aan het huidige element. Je kunt het natuurlijk naar de root verplaatsen, maar om het nesten niet te verbreken, kun je het als volgt schrijven:

Hoofdcontainer en breedte: 700px

Container.main (breedte: 700px)

Door te bewegen & na de selector hebben we de dockingvolgorde gewijzigd, d.w.z. de class.container is in dit geval de ouder.

Bindend aan de bovenliggende selector, maar dan een niveau hoger

Hierboven heb ik als voorbeeld de Sass-code gedemonstreerd:

Lettergrootte hoofd- en titel: 30px kleur: #444 &-lettergrootte ondertitel: 20px &-beschrijving lettergrootte: 14px marge-onder: 30px

Stel je nu voor dat er in het .main-title-blok nog een element is dat expliciet moet worden vormgegeven met behulp van de hele keten van ouders. Lange tijd heb ik eenvoudigweg de rootnaam opgegeven (in dit geval - .main), maar dit is niet erg handig. Ik begon rond te snuffelen in de Sass-documentatie en vond een oplossing. In feite is alles eenvoudig: we moeten een link naar de ouder declareren en deze waar nodig gebruiken.

Zo deed ik het vroeger:

Lettergrootte hoofd- en titel: 30px kleur: #444 .main__icon // specificeer de root.main, anders, als u & gebruikt, zal deze linken naar de kleur .hoofdtitel: #444 breedte: 20px &-ondertitel lettergrootte : 20px & -beschrijving lettergrootte: 14px marge-onder: 30px

En nu kun je dit doen:

Hoofd $self: & // link naar de bovenliggende &-titel lettertypegrootte: 30px kleur: #444 #($self)__icon // in plaats van & gebruik een link naar de bovenliggende kleur: #444 breedte: 20px &-subtitle lettergrootte: 20px &-beschrijving lettergrootte: 14px marge-onder: 30px

Als je het gemerkt hebt, hebben we een verwijzing naar de ouder opgegeven - $self: & . Dit doet me een beetje denken aan een verwijzing naar het object (dit) dat de gebeurtenis in JavaScript heeft geactiveerd. Nu, op de juiste plaats, kunnen we het eenvoudigweg #($self) noemen. Het blijkt hoe eenvoudig het allemaal is, maar ik krabde op mijn hoofd en dacht dat er in Sass geen oplossing voor dit probleem was.

Hoofdtitel ( lettergrootte: 30px; kleur: #444; ) .main-title .main__icon ( kleur: #444; breedte: 20px; ) .main-subtitle ( lettergrootte: 20px; ) .main-description ( lettergrootte: 14px; marge-onder: 30px; )

Sjablonen

Het komt vaak voor dat meerdere elementen dezelfde stijlbasis hebben, maar slechts op enkele regels van elkaar verschillen. Laten we als voorbeeld knoppen nemen. Als we knoppen van dezelfde grootte nemen, kunnen ze alleen qua kleur van elkaar verschillen: rood, groen, grijs, enz. Als u pure CSS gebruikt, moet u alle knopkleuren in de basisstijlen opgeven, gescheiden door komma's, of een basisklasse maken. Maar in Sass is het veel eenvoudiger:

%knop achtergrondkleur: #666 rand: 1px effen #666 opvulling: 0 20px lettergrootte: 15px lijnhoogte: 40px hoogte: 40px .knop-groen @extend %knop achtergrondkleur: groen randkleur: groen . button-red @extend %button achtergrondkleur: rood randkleur: rood

Knop-groen, .knop-rood ( achtergrondkleur: #666; rand: 1px effen #666; opvulling: 0 20px; lettergrootte: 15px; lijnhoogte: 40px; hoogte: 40px; ) .knop-groen ( achtergrondkleur: groen; randkleur: groen; ) .button-rood ( achtergrondkleur: rood; randkleur: rood; )

Het sjabloon is in dit geval de %knopselector (dit wordt aangegeven door het -%) teken. Dit is handig omdat de sjabloonkiezer zelf nergens bij betrokken is, en de stijlen ervan door andere kiezers worden overgenomen via de richtlijn - @verlengen. Deze sjabloon kan zo vaak worden gebruikt als u wilt, waardoor de hoeveelheid code wordt verminderd.

SassScript

In Sass zijn er, net als in programmeertalen, functies als: variabelen maken, rekenkundige bewerkingen (optellen, aftrekken, delen, vermenigvuldigen, enz.), iteraties (loops), functies (mixins) en nog veel meer. Dat wil zeggen, Sass is een soort programmeertaal, die opnieuw is ontworpen om het schrijven van code te vereenvoudigen en het werk aanzienlijk te versnellen.

Variabelen

Een variabele in Sass begint met een teken $ en de naam is in het Latijn geschreven, bijvoorbeeld: $color . Opgemerkt moet worden dat de borden: “ — " En " _ » zijn uitwisselbaar. Als u bijvoorbeeld $color-red hebt aangeroepen, kunt u $color_red aanroepen. De variabele wordt als volgt gedefinieerd: $naam: waarde, bijvoorbeeld: $color: #f6f6f6 .

Een variabele die buiten elk nestniveau wordt gedeclareerd, is wereldwijd beschikbaar, d.w.z. kan overal gebruikt worden. Als u een variabele op een willekeurig nestniveau van de selector definieert, is deze alleen op dit niveau beschikbaar. Om het globaal in het hele document te laten werken, moet u een trefwoord opgeven !globaal.

Titel $font-size: 10px !global font-size: $font-size .subtitle font-size: $font-size

Over het algemeen zijn variabelen iets geweldigs; je hoeft ze alleen maar te declareren en een waarde in te voeren, en dan kun je ze zoveel gebruiken als je wilt, waar dan ook. We kunnen bijvoorbeeld kleuren definiëren door ze specifieke namen, lettergrootte, lettertypefamilie, enz. te geven. en alle betekenissen in het algemeen.

Richtlijnen

@verlengen

We hebben deze richtlijn hierboven besproken toen we het blanco sjabloon bestudeerden. Laten we onze kennis opnieuw consolideren. Door het gebruiken van @verlengen we kunnen de regels van elke selector kopiëren. Tijdens het opmaken kan het bijvoorbeeld zijn dat het element “ A" en het onderdeel " B"Het kan qua uiterlijk hetzelfde zijn. In dit geval kunt u regels schrijven voor element “A”, en voor “B” kunt u eenvoudig de stijlen van element “A” kopiëren, waarbij u de noodzakelijke eigenschappen enigszins opnieuw definieert.

Block_a achtergrondkleur: #cccccc rand: 5px effen #999999 opvulling: 20px lettergrootte: 30px hoogte: 150px breedte: 150px .block_b @extend .block_a opvulling: 15px

Block_a, .block_b (achtergrondkleur: #cccccc; rand: 5px effen #999999; opvulling: 20px; lettergrootte: 30px; hoogte: 150px; breedte: 150px; ) .block_b (opvulling: 15px; )

In dit voorbeeld hebben we 2 identieke vierkanten gemaakt. Voor vierkant “B” hebben we alleen de opvulling opnieuw gedefinieerd: 15px. Dit is hoe @extend werkt. Ik gebruik deze richtlijn vrij vaak.

@importeren

Met deze richtlijn kunt u verschillende stijlbestanden in één combineren. Dit is erg handig, vooral als het project groot is. Niet te verwarren met de richtlijn die in CSS bestaat - @importeren. In CSS is het vereiste attribuut − url().

In feite is het handiger om stijlen in verschillende bestanden te schrijven, en elk heeft zijn eigen doel. Het volledige paginaframework kan bijvoorbeeld worden onderverdeeld in regio's: header.sass, sidebar.sass, footer.sass. Je kunt alles in het hoofdbestand main.sass verzamelen met @import. Regiobestanden kunnen ook worden opgegeven met een onderstrepingsteken aan het begin van de bestandsnaam, bijvoorbeeld: _header.sass, _sidebar.sass, _footer.sass. Dergelijke bestanden worden fragmenten genoemd. Bij het importeren van fragmenten is het niet nodig om de bestandsextensie op te geven.

Eenvoudig importeren

@import "header.sass" @import "zijbalk.sass" @import "voettekst.sass"

Fragmenten importeren

@import "koptekst" @import "zijbalk" @import "voettekst"

Fragmentbestanden kunnen de volgende extensies hebben: *.sas, *.scss of *.css. Het hoofdbestand kan bijvoorbeeld de extensie *.sas en de siteheader, bijvoorbeeld met de extensie *.scss. Dat wil zeggen, het maakt niet uit welke extensie uw hoofdbestand heeft. Opgemerkt moet worden dat bij het importeren alle variabelen en mixins (we zullen er hieronder over praten) worden overgebracht naar het hoofdbestand waarin de import plaatsvindt.

U kunt ook de import van meerdere bestanden specificeren, gescheiden door komma's: @import “header”, “sidebar”, “footer”.

Houd er rekening mee dat de import plaatsvindt op de plaats waar u de richtlijn hebt opgegeven @importeren. Dit gebeurt meestal aan het begin van het document.

@at-root

Richtlijn @at-root spreekt voor zich en als het in het Russisch wordt vertaald, zal het zo klinken: "vanaf de wortel". Met andere woorden: we verplaatsen de selector naar de hoofdmap, waardoor de keten van bovenliggende selectors ongedaan wordt gemaakt. Hier kun je natuurlijk de vraag stellen: "Waarom is deze richtlijn nodig als je de selector handmatig naar de root kunt verplaatsen?" Het antwoord is simpel: het gemak van het schrijven van code zonder de structuur te doorbreken. Wanneer u optimaal met Sass leert werken, zult u dit begrijpen.

Lettergrootte hoofd- en titel: 30px kleur: #444 @at-root .main__icon kleur: #444 breedte: 20px

Hoofdtitel ( lettergrootte: 30px; kleur: #444; ) .main__icon ( kleur: #444; breedte: 20px; )

Controlerichtlijnen en -uitdrukkingen

@if-richtlijn

Deze richtlijn voert stijlen uit als de expressie die erin is ingesloten een waarde retourneert, behalve vals En nul.

$color: groen .header @if $color == groene achtergrondkleur: groen @else if $color == blauwe achtergrondkleur: blauw @else achtergrondkleur: #f6f6f6

Koptekst (achtergrondkleur: groen; )

Degenen die op zijn minst bekend zijn met de basisprincipes van een programmeertaal (bijvoorbeeld javaScript of Php) zullen het niet moeilijk vinden om het te begrijpen. De essentie hier is hetzelfde, het belangrijkste is om de syntaxis van het schrijven van code te kennen.

@voor richtlijn

In een programmeertaal (opnieuw in Javascript of Php) met behulp van Voor Je kunt een cyclus instellen. In Sass doet deze richtlijn hetzelfde: het creëert een lus. Voor elke iteratie (herhaling) wordt een tellervariabele gebruikt die de uitvoergegevens verandert.

De richtlijn heeft twee schrijfvormen: 1. @for $var from<начало>door<конец>en 2. @for $var van<начало>naar<конец>. Als je wilt dat het laatste cijfer in de lus wordt opgenomen, gebruik dan " door". Laten we eens kijken naar een voorbeeld:

@for $i van 1 tot 6 .elem-item-#($i) achtergrondafbeelding: url("images/image-#($i).jpg")

Elem-item-1 ( achtergrondafbeelding: url("images/image-1.jpg"); ) .elem-item-2 ( achtergrondafbeelding: url("images/image-2.jpg"); ) . elem-item-3 ( achtergrondafbeelding: url("images/image-3.jpg"); ) .elem-item-4 ( achtergrondafbeelding: url("images/image-4.jpg"); ) . elem-item-5 (achtergrondafbeelding: url("images/image-5.jpg"); )

Om de uiteindelijke waarde op te geven, heb ik het trefwoord " naar". In deze situatie eindigt de cyclus op het nummer - 5 . Merk op hoe compact de Sass-code eruit ziet.

@elke richtlijn

Richtlijn @elk net als @for geeft het waarden in een lus weer en is handig omdat je naast getallen ook specifieke waarden kunt herhalen. Laten we de bovenstaande lus nemen en deze in enkele waarden veranderen.

@each $bgItem in dier, meer, zee, landschap, natuur .elem-item-#($bgItem) achtergrondafbeelding: url("images/image-#($bgItem).jpg")

Elem-item-animal ( achtergrondafbeelding: url("images/image-animal.jpg"); ) .elem-item-lake ( achtergrondafbeelding: url("images/image-lake.jpg"); ) . elem-item-sea ( achtergrondafbeelding: url("images/image-sea.jpg"); ) .elem-item-landscape ( achtergrondafbeelding: url("images/image-landscape.jpg"); ) . elem-item-natuur (achtergrondafbeelding: url("images/image-nature.jpg"); )

In dit geval wordt er geen tellervariabele gemaakt en hangt het aantal iteraties af van het aantal gemaakte waarden na het trefwoord " in". De waarden worden uitgevoerd via een variabele (in dit voorbeeld $bgItem), waarvan de naam willekeurig kan zijn.

Mixen (functies)

Mixins (mixins) zijn een soort functie, zoals in een programmeertaal, die is ontworpen om repetitieve code te verwijderen. Mixins kunnen hele stijlfragmenten bevatten, wat is toegestaan ​​in Sass. Laten we een voorbeeld bekijken voor meer duidelijkheid.

@mixin uitlijningscentrumpositie: absolute top: 50% links: 50% transformatie: vertalen(-50%, -50%) .container @include uitlijningscentrum

Er wordt een mixin gemaakt met de @mixin-richtlijn, gevolgd door een spatie gescheiden door de naam van de mix, evenals optioneel doorgegeven parameters. Ik wil meteen opmerken dat het koppelteken (-) en het onderstrepingsteken (_) in de mixnaam uitwisselbaar zijn. Een mixin kan niet alleen regels bevatten, maar ook selectors. Hierboven gaf ik een voorbeeld van een elementaire mix zonder parameters.

De mixin wordt aangeroepen met de @include richtlijn en vervolgens, gescheiden door een spatie, geven we de naam van de gemaakte mixin aan. In het bovenstaande voorbeeld centreert dit het blok langs de X-as en de Y-as met behulp van absolute positionering. Als u dit vaak moet gebruiken, zult u het ermee eens zijn dat het gemakkelijker is om gewoon een mixin aan te roepen dan om steeds opnieuw centreerstijlen te schrijven.

Laten we nu eens kijken naar een combinatie met parameters (argumenten).

@mixin border($width, $color) rand: breedte: $width stijl: effen kleur: $color .square @include border(2px, #ccc)

Vierkant (randbreedte: 2px; randstijl: effen; randkleur: #ccc; )

Zoals u kunt zien, specificeren we na de naam van de mix tussen haakjes de argumenten, in dit geval de randbreedte en kleur. Dit is de eenvoudigste mix die ik voor de duidelijkheid heb gegeven. In de praktijk kun je complexere mixins vinden met verschillende voorwaarden en variabelen. Maar laten we nu niet alles ingewikkelder maken; we moeten altijd beginnen met iets kleins en eenvoudigs, en dan verder gaan naarmate we verder komen.

Dit concludeert mijn korte recensie van de Sass-preprocessor. Waarom klein? Ja, want dit is niet alles wat ik je vertelde. Over het algemeen kunt u met behulp van het bovenstaande nu veilig Sass gaan gebruiken in plaats van CSS. U kunt meer over Sass te weten komen door de documentatie te raadplegen die ik hierboven heb verstrekt.

Nou, bedankt allemaal voor jullie aandacht! Stel zoals altijd vragen in de reacties en abonneer u op het telegramkanaal of op de e-mailnieuwsbrief (formulier in de zijbalk aan de rechterkant) om niets interessants te missen.

Tot ziens in mijn andere berichten...

Sass (syntactisch geweldige stijlbladen)- dit is een script-metamova, die is gecompileerd in de originele CSS-stijl. Als u goed bekend bent met CSS + HTML, dan begrijpt u SASS binnen een paar dagen.

Iedereen die te maken heeft met CSS die groter is dan 500 rijen, zal zich zorgen maken over de manier waarop dit kan worden opgelost. Helaas is de structuur ervan in de uren van ontwikkeling van standaarden voor trapsgewijze stijlen niet radicaal veranderd. Vimogi vóór de lay-out, tegen wie ik zal onzin, - ze hebben zich snel gevestigd. Als 50-70 rijen stijlen een eenvoudige site zouden kunnen ontwerpen, dan is het tegenwoordig verplicht om zoiets als dit in de header weer te geven. Dat en dat - alleen op mijn :).

In 2007 verscheen de eerste versie van SASS, ontwikkeld door Hampton Catlin. Ik denk niet dat een simpele set regels en een simpele compiler bedoeld waren als een van de belangrijkste tools van front-end masters en lay-outontwerpers van het moderne internet.

Extensies van SASS-bestanden kunnen zijn .sas і . scs- Dit komt door de geselecteerde syntaxis. De browser begrijpt er echter geen van, dus voor wederzijds begrip moet je de compiler gebruiken. Het doel is om SASS om te zetten in eenvoudige, klassieke CSS die door elke browser wordt herkend.

De compilerrol kan js op de server downloaden of een programma dat op uw werkcomputer is geïnstalleerd en wijzigingen in werkbestanden monitoren.

Wat zijn de syntaxis in Sass?

De taal heeft twee hoofddialecten: SASS en het nieuwe SCSS. De verschillen tussen beide zijn klein; als de syntaxisregels worden overtreden, kan het bestand niet worden gecompileerd. De SASS-syntaxis heeft geen gekrulde bogen, het nesten van elementen in nieuwe wordt geïmplementeerd met behulp van extra invoer en de stijlregels zijn versterkt met nieuwe rijen.

Ongeacht de syntaxis is SCSS vergelijkbaar met CSS. Dan zal elke CSS zeker een effectieve SCSS-code zijn.

Door het ontbreken van strikken en hoofdletters heeft de SASS-syntaxis met CSS geen waarde.

Vigodi Sass

Ik zal je in een paar woorden het begin vertellen en daarna een kort verslag geven. Er zijn nooit wijzigingen geweest in CSS en hacks voor compatibiliteit tussen browsers zijn belangrijk. Hieronder op de peuken zie je dat SASS in gevaar is en dat de twee problemen dichterbij liggen.

Veranderingen (variabelen)

Met Sass kunt u wijzigingen toewijzen - en dit is een van de belangrijkste voordelen. De naam begint, naar analogie met php, met het dollarteken ($), de waarden worden toegewezen na het extra dubbele teken.

Berichten in Sass kunnen worden onderverdeeld in 4 typen:

1. nummer (int)
2. snaar
3. Booleaans type (zo/noch, booleaans)
4. kleuren (namen, voornamen)

Ik zal je een eenvoudig voorbeeld geven, nadat elk onderwerp relevant wordt, zodat alles voor je duidelijk wordt en je alles zelf kunt begrijpen.

SCSS-syntaxis

$blauw: #3bbfce; /* kleur */ $marge: 16px; /* toegang */ $fontSize: 14px; /* tekstgrootte */ .content ( border: 1px effen $blue; /* blauwe rand */ kleur: donkerder($blue, 20%); /* maak de kleur donkerder met 20% */ ) .border ( opvulling: $ marge / 2; marge: $margin / 2; randkleur: $blauw; )

SASS-syntaxis

$blauw: #3bbfce $margin: 16px $fontSize: 14px .content rand: 1px effen $blauwe kleur: donkerder($blauw, 20%) .border opvulling: $marge / 2 marge: $margin / 2 randkleur: $ blauw

Resultaat in CSS

Inhoud (rand: 1px effen #3bbfce; kleur: #217882; ) .border (opvulling: 8px; marge: 8px; randkleur: #3bbfce; )

Zoals u kunt zien, zullen we als resultaat de originele CSS verwijderen. Laten we weggaan.

Regels voor nesten

Ik zou Sass alleen waarderen voor degenen die zich in de nieuwe nestelen. Dit maakt het veel gemakkelijker om stijlen te bewerken en door het werkstijlenbestand te navigeren.

Nav ( ul ( marge: 0; opvulling: 0; lijststijl: geen; ) li ( weergave: inline-blok; ) a ( weergave: blok; opvulling: 6px 12px; tekstdecoratie: geen; ) )

Nav ul ( marge: 0; opvulling: 0; lijststijl: geen; ) nav li (weergave: inline-blok; ) nav a (weergave: blok; opvulling: 6px 12px; tekstdecoratie: geen; )

U hoeft zich geen zorgen meer te maken over de bijdrage van elementen en de juistheid van het verval van klassen. Visueel ingevoegd in Sass, blijft het midden van het regelelement van de vader behouden binnen dezelfde hiërarchie van CSS-regels.

Toevoeging (mix)

De DRY-regel (Do not Repeat Yourself) wordt in Sass geïmplementeerd met behulp van de mixin-techniek. De stukjes code die je waarschijnlijk in CSS moest dupliceren, kun je hier op een aparte plek opslaan en op de gewenste plekken invoegen. De compiler, die een dergelijke wijziging heeft aangebracht, zal het vervangen van de benodigde code ermee besparen.

@mixin tabelbasis ( th ( tekstuitlijning: midden; lettertypegewicht: vet; ) td, th ( opvulling: 2px ) ) #data ( @include tabelbasis; )

#data th ( tekst uitlijnen: centreren; lettertype-gewicht: vet; ) #data td, #data th ( opvulling: 2px; )

Argumenten

Bovendien kunt u de code wijzigen op de plaats van de argumenten die eraan worden doorgegeven. Cross-browser compatibiliteit met Hakami kan bijvoorbeeld op één rij worden geplaatst.

@mixin grensradius($radius) ( -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; ) .box -1 ( @include randradius(10px); ) .box-2 ( @include randradius(5px); )

Box-1 ( -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; ) .box-2 ( -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; )

Erfenis (verlengen)

Nadat we eenmaal een regel hebben gecreëerd, kunnen we deze midden in iets anders vikoriseren. Het overervingselement neemt alle bevoegdheden van de afstammelingsklasse weg, die we aan andere kunnen toevoegen.

Fout (rand: 1px #f00; achtergrond: #fdd; ) .error.intrusie ( lettertypegrootte: 1.3em; lettertypegewicht: vet; ) .badError (@extend .error; randbreedte: 3px; )

Error, .badError (rand: 1px #f00; achtergrond: #fdd; ) .error.intrusie, .badError.intrusie ( lettergrootte: 1.3em; lettertypegewicht: vet; ) .badError (randbreedte: 3px; )

Dit zijn eenvoudige mogelijkheden om de vloeibaarheid van de lay-out te vergroten en te voorkomen dat de code verloren gaat in de code. Elke keer, voor mij. Het is goed om te onthouden dat alle SASS-documentatie is ingeschakeld

Er zijn al veel artikelen over SASS (SCSS), Less over Habrahabr, maar naar mijn mening zijn er niet genoeg artikelen die een beetje echte praktijk bevatten. Ik zal proberen deze leemte op te vullen. Ongeveer een jaar geleden 'raakte' een van de SASS-artikelen me, en sindsdien ben ik zo dol op deze technologie dat het handmatig typen van gewone CSS-code mij tijdverspilling lijkt. Dit artikel is bedoeld voor lay-outontwerpers (of webprogrammeurs) die nog niet van SCSS hebben gehoord, of het nog niet in de praktijk hebben geprobeerd. Meer ervaren kameraden hebben er, geloof ik, niets in te vangen.

Wat is SCSS

SCSS is een "dialect" van de SASS-taal. Wat is SASS? SASS is een taal die lijkt op HAML (een zeer beknopte sjabloonengine), maar ontworpen om het maken van CSS-code te vereenvoudigen. Simpel gezegd is SASS een taal waarvan de code door een speciaal ruby-programma wordt vertaald naar reguliere CSS-code. De syntaxis van deze taal is zeer flexibel en houdt rekening met veel van de kleine dingen die zo wenselijk zijn in CSS. Bovendien bevat het zelfs logica (@if, Each), wiskunde (je kunt getallen, tekenreeksen en kleuren toevoegen). Misschien lijken sommige SCSS-functies u overbodig, maar naar mijn mening zullen ze niet overbodig zijn, ze zullen "in reserve" blijven.

Het verschil tussen SCSS en SASS is dat SCSS meer lijkt op reguliere CSS-code. Voorbeeld SASS-code:

$blue: #3bbfce $margin: 16px .content-navigation randkleur: $blue kleur: donkerder ($blue, 9%) .border opvulling: $margin / 2 marge: $margin / 2 randkleur: $blue
En hetzelfde op SCSS:

$blauw: #3bbfce; $marge: 16px; .content-navigation (randkleur: $blauw; kleur: donkerder($blauw, 9%); ) .border ( opvulling: $margin / 2; marge: $margin / 2; randkleur: $blauw; )
Ik heb voor SCSS gekozen omdat het makkelijker te begrijpen is voor collega's die er nog niet mee bekend zijn. Het zou ook de moeite waard zijn om op te merken dat reguliere CSS-code goed in de SCSS-syntaxis past.

Installatie en gebruik

Eerst moet je Ruby installeren. Dan moet je sass-gem installeren (gem install sass in de console). Als alles soepel is verlopen, is het sass-consoleprogramma nu voor u beschikbaar. Je kunt hier alle nuances van het gebruik ervan lezen - sass --help. Ik zal het alleen hebben over twee basiskenmerken:

--horloge

Als u sass uitvoert met de --watch-schakelaar, zal het programma de door u opgegeven bestanden controleren. Als ze veranderen, worden alle noodzakelijke CSS-bestanden automatisch opnieuw opgebouwd (niet allemaal, maar alleen de bestanden die bij de gewijzigde bestanden horen).

Laten we aannemen dat u de volgende projectstructuur heeft:

Css ---- scss ------ stijl.scss ---- stijl.css
Het is noodzakelijk dat sass alle wijzigingen in css/scss/* bijhoudt en het resultaat opslaat in css/*.css . In dit geval voer je sass als volgt uit: sass --watch css/scss:css/. . Die. sass --kijk naar [wat]:[waar] .

--update

Als je CSS-bestanden één keer moet bijwerken, gebruik dan --update in plaats van --watch. Er zal geen toezicht zijn, noch controles op de noodzaak van updates.

Het is vermeldenswaard dat SASS, in tegenstelling tot Less, niet weet hoe de code rechtstreeks in de browser moet worden gecompileerd. Naar mijn mening is deze aanpak (compilatie op een server of pc-lay-outontwerper) de enige juiste.

Oefening

Zo komen we bij het allerbelangrijkste. Laten we beginnen met @import.

@importeren

Aanvankelijk, voordat ik SCSS gebruikte, bevond alle CSS-code van de engine, waarmee ik tijdens mijn dienst moest werken, zich in één enorm style.css-bestand. Mijn IDE (Netbeans (trouwens, hier is een plug-in voor syntaxisaccentuering)) werkte ermee met aanzienlijke vertragingen. Niemand wilde het in veel kleinere bestanden opsplitsen en deze, indien nodig, samenvoegen tot 1. SCSS handelt dit probleem automatisch af.

Het is de moeite waard om 1 nuance op te merken. Als je sass niet een specifiek bronbestand, maar een map invoert, worden er geen css-bestanden gegenereerd voor bestanden die beginnen met _ . Die. de aanwezigheid van een style.scss-bestand zal resulteren in de creatie van een style.css , maar de aanwezigheid van een _some.scss-bestand niet.

Dus om de inhoud van het bestand _template.scss of template.scss op te nemen, schrijven we

@import "sjabloon"; // Sjablonen
Uiteindelijk had ik in plaats van 1 groot style.css-bestand ruim honderd kleine scss-bestanden. Op het eerste gezicht lijkt het misschien dat dit bedrag te groot is en tot vreselijke kwelling zal leiden. Ik vind het bestand dat ik nodig heb echter onmiddellijk op basis van de handige directorystructuur. Bovendien ben ik van mening dat dit “schema” dankzij caching beter presteert.

@nesten

Een van de meest wenselijke functies voor CSS is het nesten van selectors. Voorbeeld:

#some ( rand: 1px effen rood; .some ( achtergrond: wit; ) ) /* => */ #some ( rand: 1px effen rood; ) #some .some ( achtergrond: wit; )
Een ander voorbeeld:

Input ( rand: 1px effen grijs; achtergrond: wit; & ( kleur: zwart; ) &.some_class (weergave: geen; ) ) /* => */ input ( rand: 1px effen grijs; achtergrond: wit; ) input ( kleur: zwart; ) input.some_class (weergave: geen; )
Het &-teken is gelijk aan de bovenliggende selector. Laten we zeggen het label we hebben de klasse ie_7 als we Internet Explorer 7 als browser hebben. Met de volgende code kunt u alle “hacks” en speciale opmerkingen verwijderen:

$IE_7: "body.ie_7"; //... .some ( weergave: inline-block; #($IE_7) & ( zoom: 1; weergave: inline; ) ) /* => */ .some ( weergave: inline-block; ) body.ie_7 .some (zoom: 1; weergave: inline; )

$variabelen

Variabelen zijn een handig ding. Ze worden als volgt gedefinieerd:

$wat:rood;
Variabelen zijn geen constanten, ze kunnen worden gewijzigd naarmate de code vordert :) Een van mijn eerste gedachten resulteerde in het bestand _const.scss, dat alle basiskleuren, lettergroottes, enz. bevat.

$link: #15157d; $link_bottom: $link; $input_font_size: 13px; $content_bg: #F1F1F1; $invoerkleur: #4E4D4D; $input_color_placeholder: #959595; $text_color: zwart; ...
Er wordt aangenomen dat de kleur van links op de site $link is.

A ( kleur: $link; ) span.link ( kleur: $link; tekstversiering: onderstrepen; )
Als later blijkt dat de kleur van de links is veranderd, volstaat het om 1 variabele te wijzigen (in het geval van CSS zou je de bestanden automatisch moeten vervangen, misschien zelfs selectief). Stel dat plotseling blijkt dat in sommige contactenmodules de kleur van de links anders is. Er zijn minstens twee oplossingen.

$contacts_link: oranje; // modulecode met $contacts_link in plaats van $link
Seconde

$__link: $link; $link: oranje; // modulecode $link: $__link;
Onze variabelen zijn niet getypt, dus ze kunnen evengoed strings, cijfers en kleuren bevatten.

@wiskunde

Laten we de wiskunde in twee categorieën verdelen: kleuren en cijfers. Laten we beginnen met de cijfers. Eenvoudig voorbeeld:

Blok ($block_width: 500px; opvulling: 5px; rand: 1px effen zwart; breedte: $block_width - (5px * 2) - (1px * 2); )
Indien gewenst kunt u ook de opvulling met de rand instellen met behulp van variabelen. Het hangt allemaal af van de complexiteit van de lay-out.

Een ander voorbeeld:

Blok ($count: 10; $margin_left: 5px; $all_width: 1000px; breedte: $all_width; .sub_element ( breedte: ($all_width / $count) - $margin_left; marge: 0 0 0 $margin_left; ) )
Ik zou willen opmerken dat dit soort manipulatie heel vaak wordt gebruikt. Zonder hen ben ik als zonder benen.

En nu de kleuren. Kleuren kunnen worden toegevoegd en vermenigvuldigd:

Sommige ($color: #010203; kleur: $color; border-color: $color - #010101; &:hover ( kleur: #010203 * 2; ) ) /* => */ .some ( kleur: #010203; randkleur: #000102; ).some:hover ( kleur: #020406; )
Handig als je te lui bent om kleuren te kiezen. Ook beschikbaar zijn functies zoals ondoorzichtig maken en transparant maken (meer

Dat is nodig om code te compileren op SASS- en LESS-preprocessors. Laten we eens kijken hoe we met de SASS-preprocessor kunnen werken.

Voorverwerking

CSS schrijven is op zichzelf leuk, maar als een stylesheet enorm wordt, wordt het moeilijk te onderhouden. En in dit geval zal de preprocessor ons helpen. Met SASS kun je functies gebruiken die niet beschikbaar zijn in CSS zelf, bijvoorbeeld variabelen, nesten, mixins, overerving en andere leuke dingen die het gemak van het schrijven van CSS teruggeven.

Zodra u SASS gaat gebruiken, verwerkt de preprocessor uw SASS-bestand en slaat het op als een eenvoudig CSS-bestand dat u op elke site kunt gebruiken.

Variabelen

Beschouw variabelen als een manier om informatie op te slaan die u tijdens het schrijven van elke projectstijl wilt gebruiken. U kunt kleuren, lettertypestapels of andere CSS-waarden die u in variabelen wilt gebruiken, opslaan. Om een ​​variabele in Sass te maken, moet je het $-symbool gebruiken. Laten we eens kijken naar een voorbeeld:

$font-stack: Helvetica, schreefloos; $primaire kleur: #333; body ( lettertype: 100% $font-stack; kleur: $primaire kleur; )

Wanneer Sass wordt verwerkt, neemt het de waarden die we hebben ingesteld in $font-stack en $primary-color en voegt deze in het reguliere CSS-bestand in op de plaatsen waar we de variabelen als waarden hebben opgegeven. Dit maakt variabelen tot een krachtige functie, bijvoorbeeld bij het werken met merkkleuren die op een hele site worden gebruikt.

Lichaam (lettertype: 100% Helvetica, schreefloos; kleur: #333; )

Nestingen

Bij het schrijven van HTML heb je waarschijnlijk gemerkt dat het een duidelijke geneste en visuele hiërarchie heeft. Bij CSS is dit niet het geval.

Met Sass kunt u CSS-selectors op dezelfde manier nesten als in de visuele HTML-hiërarchie. Maar onthoud dat overmatig nesten uw document minder leesbaar en begrijpelijk maakt, wat als een slechte praktijk wordt beschouwd.

Om te begrijpen wat we bedoelen, is hier een typisch voorbeeld van navigatiestijlen op een website:

Nav ( ul ( marge: 0; opvulling: 0; lijststijl: geen; ) li ( weergave: inline-blok; ) a ( weergave: blok; opvulling: 6px 12px; tekstdecoratie: geen; ) )

Is het je opgevallen dat de ul-, li- en a-selectors genest zijn in de nav-selector? Dit is een geweldige manier om uw CSS-bestand beter leesbaar te maken. Wanneer u het CSS-bestand genereert, zal de uitvoer er ongeveer zo uitzien:

Nav ul ( marge: 0; opvulling: 0; lijststijl: geen; ) nav li (weergave: inline-blok; ) nav a (weergave: blok; opvulling: 6px 12px; tekstdecoratie: geen; )

Fragmentatie

U kunt Sass-bestandsfragmenten maken die kleine CSS-fragmenten bevatten die in andere Sass-bestanden kunnen worden gebruikt. Dit is een geweldige manier om uw CSS modulair te maken en ook gemakkelijker te onderhouden. Een fragment is een eenvoudig Sass-bestand waarvan de naam begint met een onderstrepingsteken, bijvoorbeeld _partial.scss. Het onderstrepingsteken in een Sass-bestandsnaam vertelt de compiler dat het slechts een fragment is en niet in CSS mag worden gecompileerd. Sass-fragmenten worden opgenomen met behulp van de @import-richtlijn.

Importeren

CSS heeft een importfunctie waarmee u uw CSS-bestand in kleinere bestanden kunt opsplitsen, zodat u ze gemakkelijker kunt onderhouden. Maar deze methode heeft een belangrijk nadeel: elke keer dat u @import in CSS gebruikt, wordt er een ander HTTP-verzoek aangemaakt in CSS. Sass neemt het idee over om bestanden te importeren via de @import-richtlijn, maar in plaats van een afzonderlijk HTTP-verzoek te maken, importeert Sass het bestand dat in de richtlijn is gespecificeerd in het bestand waar het wordt aangeroepen, d.w.z. De uitvoer is één CSS-bestand samengesteld uit verschillende fragmenten.

U hebt bijvoorbeeld verschillende Sass-bestandsfragmenten: _reset.scss en base.scss. En we willen _reset.scss importeren in base.scss.

// _reset.scss html, body, ul, ol (marge: 0; opvulling: 0; ) // base.scss @import "reset"; body ( lettertype: 100% Helvetica, schreefloos; achtergrondkleur: #efefef; )

Merk op dat we @import 'reset' gebruiken; in het base.scss-bestand. Wanneer u een bestand importeert, hoeft u de .scss-extensie niet op te geven. Sass is een slimme taal en zal zichzelf wel uitvinden. Wanneer de CSS is gegenereerd, krijgt u:

Html, body, ul, ol ( marge: 0; opvulling: 0; ) body ( lettertype: 100% Helvetica, sans-serif; achtergrondkleur: #efefef; )

Mixen (mixen)

Sommige dingen in CSS zijn behoorlijk vervelend om te schrijven, vooral in CSS3, waar je bovendien vaak een groot aantal leveranciersvoorvoegsels moet gebruiken. Met Mixins kunt u groepen CSS-declaraties maken die u meerdere keren op uw site zult gebruiken. Het is goed om mixins te gebruiken voor leveranciersvoorvoegsels. Voorbeeld voor randradius:

@mixin grensradius($radius) ( -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; ) .box (@include randradius(10px); )

Om een ​​mixin te maken, gebruik je de @mixin richtlijn + de naam van de mixin. We noemden onze mixin grensradius. Ook gebruiken we in de mixin de variabele $radius tussen haakjes, waardoor we kunnen doorgeven wat we willen in de variabele. Nadat u een mix heeft gemaakt, kunt u deze als CSS-parameter gebruiken door de aanroep te starten met @include en de naam van de mix. Wanneer uw CSS compileert, krijgt u dit:

Box ( -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; )

Erfenis

Dit is een van de handigste functies van Sass. Met behulp van de @extend-richtlijn kunt u sets CSS-eigenschappen van de ene selector naar de andere overnemen. Hierdoor kunt u uw Sass-bestand "schoon" houden. In ons voorbeeld laten we u zien hoe u fout-, waarschuwings- en succesmeldingen kunt vormgeven.

Bericht (rand: 1px effen #ccc; opvulling: 10px; kleur: #333; ) .success (@extend .message; randkleur: groen; ) .error (@extend .message; randkleur: rood; ) . waarschuwing (@extend .message; randkleur: geel; )

Met de bovenstaande code kunt u de CSS-eigenschappen van .message overnemen en deze toepassen op .success, .error en .warning. Tijdens het compileren van het CSS-bestand werkt magie, waardoor u kunt voorkomen dat u onnodige klassen in HTML-elementen schrijft. Het resultaat ziet er als volgt uit:

Bericht, .success, .error, .warning (rand: 1px effen #cccccc; opvulling: 10px; kleur: #333; ) .success ( randkleur: groen; ) .error ( randkleur: rood; ) .warning (randkleur: geel; )

Wiskundige operatoren

Het gebruik van wiskunde in CSS is erg handig. Sass heeft verschillende standaard wiskundige operatoren zoals +, -, *, / en%. In ons voorbeeld voeren we een aantal eenvoudige berekeningen uit om de breedte van de zijkant en het lidwoord te berekenen.

Container ( breedte: 100%; ) artikel ( zwevend: links; breedte: 600px / 960px * 100%; ) opzij ( zwevend: rechts; breedte: 300px / 960px * 100%; )

We hebben een eenvoudig responsief modulair raster gemaakt met een breedte van 960 pixels. Met behulp van wiskundige operatoren hebben we de resulterende gegevens met pixelwaarden overgenomen en deze zonder veel moeite omgezet in percentages. De gecompileerde CSS ziet er als volgt uit:

Container ( breedte: 100%; ) artikel ( float: links; breedte: 62,5%; ) opzij ( float: rechts; breedte: 31,25%; )

Praktisch voorbeeld:

In ons HTML-bestand hebben we alleen heel eenvoudige code nodig en een link naar het CSS-bestand in de CSS-map van ons project.

Dat is alle HTML die we nodig hebben! Laten we nu verder gaan met Sass. Ga naar je favoriete teksteditor en maak een nieuw bestand, sla het op in de sass-map en noem het style.scss. Om het makkelijker te maken, zullen we alles in SCSS schrijven, wat Sass ook aankan, en SCSS is niet erg streng voor beginners. Aan het begin van ons bestand schrijven we een basisreset voor HTML, een import voor Compass en schrijven we kleurvariabelen voor de knop.

@import "kompas"; // Eenvoudige reset body, div, a ( marge: 0; opvulling: 0; rand: 0; ) a (tekstdecoratie: geen;) a:focus (omtrek: 0;) // Kleurvariabelen $button-color: #2e6bc6; $knop-start: #37a0dc; $knop-stop: #2068a6; $grens: #163861; $tekstschaduw: #06304b; //Hoverkleuren $button-hover-color: #2e7dc6; $button-hover-start: #3f9ff0; $knop-hover-stop: #2874a9; $focus-schaduw: #0b3c5f; // Basislichaamsstijlen (lettertypefamilie: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;)

Bovenaan het bestand roepen we Compass aan om het in het bestand op te nemen en later de abstracte klassen te gebruiken. Daarnaast hebben we een eenvoudige reset geschreven en hebben we al één eigenschap gebruikt: variabelen. Dit geeft ons de mogelijkheid om waarden op te slaan die we constant in onze CSS zullen gebruiken, inclusief kleuren, lettertypewaarden en nog veel meer! Hier gebruik ik ze om de kleuren op te slaan die in de knop worden gebruikt en om de invoer te vereenvoudigen, maar ook om deze opnieuw te gebruiken in het stijlblad.

Stijlen aan een knop toewijzen

.button ( breedte: 158px; hoogte: 30px; marge: 120px auto; lettergrootte: 16px; lettergrootte: vet; tekst uitlijnen: midden; weergave: blok; kleur: #fff; opvulling: 7px 0 0; rand : 1px effen $rand; tekstschaduw: 0 -1px 0 $tekstschaduw; positie: relatief; )

Laten we deze knop stylen! We beginnen met het toepassen van basisstijlen op de knopklassetag. Ik heb hier enkele basisstijlen voor knoppen ingesteld en merk op hoe ik variabelen gebruik.

Laten we nu naar het leuke gedeelte gaan! Herinnert u zich de Kompas-import aan het begin van het stylesheet? We zullen het hier gebruiken omdat Compass een grote bibliotheek met ingebouwde klassen heeft die CSS3-voorvoegsels bevatten voor browsers die nog steeds ondersteuning voor voorvoegsels nodig hebben.

Knop ( breedte: 158px; hoogte: 30px; marge: 120px auto; lettergrootte: 16px; lettergrootte: vet; tekst uitlijnen: midden; weergave: blok; kleur: #fff; opvulling: 7px 0 0; rand: 1px effen $border; tekstschaduw: 0 -1px 0 $text-shadow; positie: relatief; //Kompasklassen @include achtergrond($button-color linear-gradient(top, $button-start 20%, $button- stop)); @include border-radius(3px); @include box-shadow(inset 0 1px 0 rgba(#fff, 0.8)); @include transition(alles 0.3s gemak); )

Nadat de initiële stijl is gedefinieerd, kunnen we verschillende abstracte klassen opnemen voor achtergrondkleuren, lineaire verlopen, randradii en overgangen. Het beste is dat alles wordt gecompileerd met alleen de noodzakelijke voorvoegsels, waardoor we tijd kunnen besparen bij het schrijven ervan! De klasse compileert voorlopig in het style.css-bestand als volgt:

Knop ( breedte: 158px; hoogte: 30px; marge: 120px auto; lettergrootte: 16px; lettergrootte: vet; tekst uitlijnen: midden; weergave: blok; kleur: #fff; opvulling: 7px 0 0; rand: 1px effen #163861; tekstschaduw: 0 -1px 0 #06304b; positie: relatief; achtergrond: #2e6bc6 -webkit-gradiënt(lineair, 50% 0%, 50% 100%, kleurstop(20%, #37a0dc ), kleur-stop(100%, #2068a6)); achtergrond: #2e6bc6 -webkit-lineair-gradiënt(boven, #37a0dc 20%, #2068a6); achtergrond: #2e6bc6 -moz-lineair-gradiënt(boven, # 37a0dc 20%, #2068a6); achtergrond: #2e6bc6 -o-lineair verloop(boven, #37a0dc 20%, #2068a6); achtergrond: #2e6bc6 lineair verloop(boven, #37a0dc 20%, #2068a6); - webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: inzet 0 1px 0 rgba(255, 255, 255, 0.8); -moz-box-shadow: inzet 0 1px 0 rgba(255, 255, 255, 0.8); box-shadow: inzet 0 1px 0 rgba(255, 255, 255) , 0,8); -webkit-transitie: allemaal 0,3s gemak; -moz-transitie: alles 0,3s gemak; -o-transitie: alles 0,3s gemak; overgang: allemaal 0,3s gemak; )

Schrijfstijlen met geneste elementen

Een andere geweldige functie van een preprocessor als Sass is de mogelijkheid om elementen te nesten en klassen te koppelen aan een ouderelement waaraan je stijlen toewijst. Dit wordt vervolgens gecompileerd in de vereiste CSS om te werken.

Knop ( &:hover ( @include background($button-hover-color linear-gradient(top, $button-hover-start 20%, $button-hover-stop)); @include box-shadow(inset 0 1px 1px rgba(#fff, 0.95)); ) &:active ( @include background(linear-gradient(bottom, $button-start 20%, $button-stop)); tekst-shadow: 0 1px 0px $text-shadow; @include box-shadow(inset 0 2px 8px $focus-shadow); ) )

Na de hoofdknopstijlen kun je pseudo-klasse-kiezers nesten voor de :hover- en :active-statussen van het element, met behulp van een ampersand die Sass vertelt dat dit een geneste klasse is die aan het bovenliggende element is gekoppeld. De hover-status kan wat drama toevoegen aan het verloop en de innerlijke schaduw met behulp van abstracte Compass-klassen, terwijl de actieve status het verloop omkeert en de schaduw van het vak verandert, zodat het lijkt alsof er op een knop is gedrukt.

Knop: hover ( achtergrond: #2e7dc6 -webkit-gradient(lineair, 50% 0%, 50% 100%, kleur-stop(20%, #3f9ff0), kleur-stop(100%, #2874a9)); achtergrond: #2e7dc6 -webkit-lineair-gradiënt(boven, #3f9ff0 20%, #2874a9); achtergrond: #2e7dc6 -moz-lineair-gradiënt(boven, #3f9ff0 20%, #2874a9); achtergrond: #2e7dc6 -o-lineair -gradient(top, #3f9ff0 20%, #2874a9); achtergrond: #2e7dc6 lineair verloop(top, #3f9ff0 20%, #2874a9); -webkit-box-shadow: inzet 0 1px 1px rgba(255, 255, 255, 0,95); -moz-box-shadow: inzet 0 1px 1px rgba(255, 255, 255, 0,95); box-shadow: inzet 0 1px 1px rgba(255, 255, 255, 0,95); .button: actief ( achtergrond: -webkit-gradient(lineair, 50% 100%, 50% 0%, kleur-stop(20%, #37a0dc), kleur-stop(100%, #2068a6)); achtergrond: -webkit-lineair - gradiënt(onder, #37a0dc 20%, #2068a6); achtergrond: -moz-lineair-gradiënt(onder, #37a0dc 20%, #2068a6); achtergrond: -o-lineair-gradiënt(onder, #37a0dc 20%, # 2068a6); achtergrond: lineair verloop (onder, #37a0dc 20%, #2068a6); tekstschaduw: 0 1px 0px #06304b; -webkit-box-schaduw: inzet 0 2px 8px #0b3c5f; -moz-box-schaduw: inzet 0 2px 8px #0b3c5f; vakschaduw: inzet 0 2px 8px #0b3c5f; )

Het bovenstaande laat zien wat er gebeurt nadat de staten :active en :hover zijn gecompileerd in Sass; ze zijn geschreven als pseudo-klasseselectors voor het bovenliggende element in bruikbare CSS, evenals de CSS die we nodig hebben, compleet met alternatieven, om onze driestatusknop te voltooien.

style.scss-bestand en een gecompileerd stijlblad

Dat is alles wat er is in ons hele style.scss-bestand, omdat het georganiseerd is, eenvoudig geschreven en abstracte klassen en variabelen bevat die een deel van het werk voor ons doen en vervolgens worden gecompileerd in het uiteindelijke stylesheet-bestand, style.css.