27.07.2017

Deze serie SASS-tutorials is bedoeld voor beginners en ervaren ontwikkelaars. Dit is het eerste van vier delen van zelfstudies die u door deze preprocessor leiden, deze installeren en meer te weten komen over enkele van de functies.

Wat is SASS?

SASS (syntactisch geweldige stijlbladen)- een van de populairste. Het is een reeks functies voor CSS 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.

Met SASS kun je snel en gemakkelijk minder (soms aanzienlijk minder) CSS-code schrijven en dynamisch 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 is SASS nodig?

De meeste frontend-frameworks, waaronder Bootstrap, Materialize en Foundation, zijn gebouwd met deze geweldige preprocessor. Als u SASS kent, kunt u meer functies van deze frameworks gebruiken.

Hoe gebruik je SASS?

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

SASS downloaden en installeren

Je kunt SASS alleen installeren op een machine die al Ruby heeft:

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

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

Gem installeren sass

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

sudo gem install sass

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

SAS 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 ben SASS aan het leren en het is echt geweldig.

Body( text-align: center; ) h1( color: #333; ) p( color: #666; )

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

Sass --watch 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 er wijzigingen worden aangebracht in het .scss-bestand.

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

Vertaling van het artikel: De absolute beginnersgids voor Sass.
Andrew Chalkley.

Wat is SASS?

SASS is een afkorting voor Syntactisch geweldige stylesheets is een op CSS gebaseerde metataal waarvan de naam kan worden vertaald als "CSS met uitstekende syntaxis", ontworpen door Hampton Catlin.

Het is een hulpmiddel om het proces van het genereren van CSS-stijlen te vereenvoudigen, wat de taak van het ontwikkelen en vervolgens onderhouden van de code aanzienlijk vereenvoudigt.

Heb je bijvoorbeeld ooit, om een ​​bepaalde aarzelende klant tevreden te stellen, de volledige inhoud van een stijlbestand doorgenomen om een ​​bepaalde kleur HEX-waarde te vinden om deze door een andere te vervangen? Of ga naar de niet altijd beschikbare rekenapplicatie om de kolombreedte voor een sjabloon met meerdere kolommen te berekenen?

SASS heeft tools tot zijn beschikking die u van een dergelijke routine zullen redden. Deze kunnen worden toegeschreven variabelen, mixins, nesten En selector overerving.

In principe is SASS-code vergelijkbaar met CSS, maar het belangrijkste onderscheidende kenmerk dat meteen opvalt, is de afwezigheid van een puntkomma na elk eigenschap-waardepaar en accolades.

Laten we het volgende CSS-codefragment als voorbeeld nemen:

#skyscraper_ad
{
weergave:blok;
breedte: 120px
hoogte: 600px;
}

#leaderboard_ad
{
weergave:blok;
breedte: 728px;
hoogte: 90px;
}

Wat gelijk is aan deze SASS:

#skyscraper_ad
weergave:blok
breedte: 120px
hoogte: 600px

#leaderboard_ad
weergave:blok
breedte: 728px
hoogte: 90px

In SASS wordt, om het nesten van codefragmenten aan te geven, een interval (inspringing aan het begin van de volgende regel) gebruikt dat gelijk is aan twee spaties. ( *In het laatste fragment heb ik deze ruimtes voor de duidelijkheid gemarkeerd met een rode achtergrond.)

Nu we een idee hebben van hoe SASS-code wordt gemaakt, laten we eens kijken naar de problemen die dit zo maken. excellent.

Variabelen.

Om een ​​variabele in SASS te declareren, moet u de naam vooraf laten gaan door het dollarteken $ . En als de naam van uw variabele bijvoorbeeld rood is, kunnen we na de dubbele punt de volgende waarde specificeren die daarmee overeenkomt:

SASS biedt ingebouwde functies zoals donkerder en lichter die kunnen worden gebruikt om de waarden van dit soort variabelen te wijzigen.

In het volgende voorbeeld is de letterkleur in alinea's dus ook rood, maar donkerder dan de kleur die wordt gebruikt in h1-koppen:

$rood: #FF4848
$lettergrootte: 12px
h1
kleur: $rood

P
kleur: donkerder ($rood, 10%)

U kunt rekenkundige bewerkingen, zoals optellen en aftrekken, uitvoeren op variabelen, zolang de waarden die hiervoor gebruikt worden van hetzelfde datatype zijn. Als we bijvoorbeeld een donkerdere tint moeten toepassen, hoeven we alleen maar een kleine hexadecimale HEX-waarde af te trekken van de kleurwaarde die al in de code is gebruikt, opgeslagen in een variabele, die gelijk is aan, laten we zeggen #101 . Hetzelfde geldt voor het geval dat het nodig is om de waarde van de lettergrootte te wijzigen, bijvoorbeeld door deze met 10 pixels te vergroten, hiervoor voegen we gewoon de ontbrekende pixels toe:

p.optellen_en_aftrekken
kleur: $rood - #101
lettergrootte: $fontsize + 10px

Nesten.

Er zijn twee soorten nesten in SASS.

Selector nesten.

Dit is het eerste type nesting, dat vergelijkbaar is met wat wordt gebruikt om HTML-code te structureren:

$lettergrootte: 12px

spreker
.naam
lettertype:
gewicht: vet
grootte: $lettergrootte + 10px
.positie
lettertype:
grootte: $lettergrootte

Als u de resulterende CSS-code bekijkt, zijn eventuele opmerkingen overbodig. Door de .name-klasse te nesten binnen de .speaker-klasse ( *op dezelfde manier - met twee spaties aan het begin van de volgende regel) wordt de CSS-selector .speaker.name gemaakt. Hetzelfde geldt voor de volgende .position-klassenaam, na de eigenschapdeclaratie voor de eerste selector, die nestelt om de tweede .speaker.position-selector te vormen:

Spreker.naam(
lettergewicht: vet;
lettergrootte: 22px; )
.luidspreker.positie(
lettergrootte: 12px; )

Nesten eigenschappen.

Met het tweede type nesting kunt u eigenschappen structureren met een enkel voorvoegsel (* font-family , font-size , font-weight , of border-style , border-color , border-radius , etc.):

$lettergrootte: 12px

spreker
.naam
lettertype:
gewicht: vet
grootte: $lettergrootte + 10px
.positie
lettertype:
grootte: $lettergrootte

In het bovenstaande voorbeeld gebruiken we de declaratie van het bovenliggende, generieke eigenschapslettertype: , en vervolgens specificeren we op een nieuwe regel, na een inspringing van twee spaties, het tweede deel van de eigenschap, dat meestal na het koppelteken wordt gevonden.

Dat wil zeggen, als we de font: eigenschap specificeren, op de volgende regel, na twee spaties, de weight: eigenschap, dan zal deze als resultaat gelijk zijn aan de bekende font-weight eigenschap.

Spreker.naam(
lettergewicht: vet;
lettergrootte: 22px; )
.luidspreker.positie(
lettergrootte: 12px; )

De module biedt ondersteuning voor alle eigenschappen die koppeltekens bevatten.

Dit soort nesten is een geweldige manier om uw CSS-code te ordenen en te structureren en onnodige herhaling te voorkomen. ( *DROOG- "Herhaal jezelf niet" - "Herhaal jezelf niet." Situaties waarin CSS-opmaak van bepaalde elementen hun stijlen elders herhaalt en/of overschrijft, waardoor de code moeilijker te lezen en te onderhouden is).

mixen.

Een andere geweldige functie van SASS is: mixins.

Met Mixins kun je hele stukjes SASS-code hergebruiken en indien nodig zelfs argumenten aan hen doorgeven. En belangrijker nog, u kunt ook hun beginwaarden specificeren.

Om een ​​mixin te definiëren, gebruikt u het @mixin-sleutelwoord, dat speciaal is gereserveerd in SASS, gevolgd door de mixin-naam van uw keuze. Als er argumenten nodig zijn, zet ze dan tussen haakjes. De waarden die zijn ingesteld voor het standaardargument worden opgegeven wanneer de mixin is gedefinieerd, gescheiden door een dubbele punt. ( *Met andere woorden, mixins zijn CSS-functies.)

De procedure voor het gebruik van mixins is heel eenvoudig - specificeer na het @include trefwoord de naam van de gewenste mixin en vermeld de vereiste parameters tussen haakjes, indien aanwezig.

Kijk eens naar het volgende voorbeeld:

@mixin border-radius($bedrag: 5px) /* definieer de mixin */
-moz-grens-radius: $bedrag
-webkit-grens-radius: $bedrag
grensradius: $bedrag

h1 /* gebruik mixin */
@include border-radius(2px)

spreker
@include border-radius

Deze SASS wordt na compilatie geconverteerd naar de volgende CSS:

h1(
-moz-grens-radius: 2px;
-webkit-grens-radius: 2px;
grensradius: 2x )

spreker (
-moz-grens-radius: 5px;
-webkit-grens-radius: 5px;
grens-radius: 5px )

Voor de h1-kop hebben we expliciet de waarde voor de hoekradius van de rand ingesteld, maar voor het element met de klassenaam .speaker hebben we dat niet gedaan, dus de standaardwaarde van 5px is genomen.

Overerving van de selecteur.

Een andere excellent een kenmerk van de SASS-syntaxis is het vermogen van selectors om alle stijlen over te nemen die voor andere selectors zijn gedefinieerd. Om van deze functie te profiteren, moet u het trefwoord @extend gebruiken, gevolgd door de selector waarvan u de eigenschappen wilt overnemen:

h1
rand: 4px effen #ff9aa9

spreker
@verleng h1
grensbreedte: 2px

Wat wordt gecompileerd naar:

h1,.luidspreker(
rand: 4px solide #ff9aa9; )

spreker (
grensbreedte: 2px; )

(*Let op de declaratierand: 4px effen #ff9aa9; wordt niet herhaald binnen de regel met de .speaker selector, maar in plaats daarvan wordt een tweede selector toegevoegd aan de eerste regel. Met andere woorden, er is geen codeduplicatie.)

Probeer SASS in actie.

Online.

U kunt online kennis maken met SASS zonder eerst de module op uw lokale computer te installeren.

Maar voordat u begint te experimenteren, selecteert u onderaan de pagina de optie "Ingesprongen syntaxis".

Geïnstalleerd op pc.

SASS zelf is een applicatie ( gem ) van het Ruby platform. Om het te installeren, kun je daarom niet zonder eerst het platform zelf en de pakketbeheerder van deze RubyGems-programmeertaal te installeren. Nadat u het platform zelf en de manager met succes hebt geïnstalleerd, voert u de volgende opdracht uit in de console:

edelsteen installeren sass

De SASS-module kan worden gebruikt als een opdrachtregeltool om uw SASS-bestanden naar CSS-bestanden te converteren.

Dit kan bijvoorbeeld door het volgende commando te typen:

sass --bekijk sass_folder:stylesheets_folder

Waarbij sass_folder het pad is naar de map met de SASS-bestanden (dat wil zeggen, met de .sass-extensie), en stylesheets_folder het pad is naar de map waar de resulterende CSS-bestanden na compilatie worden opgeslagen. Het --watch commando vertelt de module dat het moet kijken ( watch ) voor eventuele wijzigingen in de opgegeven map en, indien van toepassing, na het opslaan ervan, de originele .sass-bestanden naar hun equivalente .css-bestanden te converteren.

Reverse CSS naar SASS-conversie.

U kunt SASS gaan gebruiken door de stijlen die in uw bestaande projecten worden gebruikt, naar dit formaat te converteren met behulp van het hulpprogramma "sass-convert".

Om dit te doen, voert u in de opdrachtregel het pad in naar de map waarvan u de inhoud wilt converteren ( *dat wil zeggen, ga gewoon naar de gewenste map waar de bronbestanden zich bevinden). Voer vervolgens het hierboven genoemde hulpprogramma uit en geef het de volgende parameters:

sass-convert --van css --naar sass -R.

Waarbij de vlag -R een recursieve manier aangeeft om de bewerking uit te voeren. En de volgende stip. betekent dat de resulterende .sass-bestanden worden opgeslagen in de huidige map. ( *In plaats van een punt kunt u indien nodig het pad specificeren naar de map waar u de resulterende bestanden wilt opslaan.)

Sass (syntactisch geweldige stylesheets)- tse script metamove, hoe te compileren in de originele CSS-stijlen. Als je CSS + HTML goed kent, zal SASS binnen een paar dagen worden opgelost.

Iedereen die vasthoudt aan CSS met een grootte van meer dan 500 rijen, kan terecht hoofdpijn hebben over hoe te vergeven. Helaas is hun structuur tijdens de ontwikkeling van de normen van trapsgewijze stijlen niet fundamenteel veranderd. Vimogi voor de lay-out, tegen wie ik zal liegen, - ze zijn ingewikkelder geworden. Als 50-70 rijen stijlen een eenvoudige site zouden kunnen ontwerpen, dan zal ik je vandaag verplichten om het op de kop te plaatsen. Dat en dat - alleen op mijn :).

2007 zag de eerste versie van SASS, opgebroken door Hampton Ketlin. Ik denk niet dat een eenvoudige set regels en een primitieve compiler zijn ontworpen als een van de belangrijkste tools van de front-end-master en de moderne webontwikkelaar.

SASS-bestandsextensies kunnen zijn .sass і . scss- ce lie in de tegenovergestelde syntaxis. De browser, vtim, begrijpt er geen van, dus voor wederzijds begrip is het noodzakelijk om een ​​compiler te gebruiken. De uitdaging is om SASS om te zetten in een verstandige klassieke CSS die door elke browser wordt herkend.

De rol van de compiler kan worden gespeeld door een server js of een programma dat op uw werkende machine is geïnstalleerd en wijzigingen in werkbestanden controleren.

Wat zijn de syntaxis in Sass

De film heeft twee belangrijke "dialecten": SASS en de nieuwere SCSS. Vdminnostі mizh ze klein, prote schending van de regels van de syntaxis is niet toegestaan ​​om het bestand te compileren. SASS-syntaxis heeft geen gekrulde bogen, het nesten van elementen in een nieuwe wordt geïmplementeerd met extra invoer en stijlregels zijn gebonden aan nieuwe rijen.

Ongeacht de syntaxis, SCSS wordt achterwaarts gemengd met CSS. Dus be-whatever CSS is ongetwijfeld de echte SCSS-code.

Door de aanwezigheid van schakels en stippen bestaat er niet zoiets als SASS-syntaxis met CSS.

Vigodi Sass

Ik vertel er in een notendop over en doe een paar verslagen. Wijzigingen in CSS zijn nooit veranderd en hacks voor cross-browser compatibiliteit werden gerespecteerd. Hieronder, op de peuken, kun je zien dat SASS twee problemen helderder oplost.

Wijzigingen (variabelen)

Met Sass kunt u verandering herkennen - en het is een van de belangrijkste voordelen. Wijzigingen beginnen, naar analogie met php, met het dollarteken ($), de waarden worden nog eens dubbel toegekend.

Wijzigingen in Sass zijn onder te verdelen in 4 typen:

1. nummer (int)
2. snaar
3. logisch type (so/nі, boolean)
4. colori (im'ya, namen)

Ik zal een eenvoudig voorbeeld geven, na een artikel om de actualiteit door te brengen, dan wordt je alles duidelijk en kun je alles zelf begrijpen.

SCSS-syntaxis

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

SASS-syntaxis

$blue: #3bbfce $margin: 16px $fontSize: 14px .content border: 1px solid $blue color: darken($blue, 20%) .border padding: $margin/2 margin: $margin/2 border-color: $ blauw

Resultaat in CSS

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

Welnu, als resultaat zullen we geweldige CSS nemen. Laten we verder gaan.

Nestregels (nesten)

Ik wil Sass alleen voor degenen die in het nieuwe nestelen. Het is belangrijk om het bewerken van stijlen en navigeren door het werkstijlbestand te vereenvoudigen.

Nav ( ul ( margin: 0; padding: 0; list-style: none; ) li ( display: inline-block; ) a ( display: block; padding: 6px 12px; text-decoration: none; ) )

Nav ul ( margin: 0; padding: 0; list-style: none; ) nav li ( display: inline-block; ) nav a ( display: block; padding: 6px 12px; text-decoration: none; )

Je krijgt niet langer de schuld van de inbreng van elementen en de correctheid van de achteruitgang van klassen. Visueel zal het invoegen van het midden van het vaderelement van de regel in Sass de hiërarchie opslaan en de CSS-regels verbeteren.

Toevoegingen (mixen)

De DRY (Do not Repeat Yourself) regel is geïmplementeerd in Sass met behulp van de mixin-techniek. Die codefragmenten, zoals in CSS, moest je dupliceren, hier kun je het in een reservewijziging opslaan en op de benodigde plaatsen invoegen. Compiler, zestrivshi een dergelijke wijziging, slaat de vervanging van de benodigde code op.

@mixin table-base ( th ( text-align: center; font-weight: bold; ) td, th ( padding: 2px ) ) #data ( @include table-base; )

#data th ( text-align: center; font-weight: bold; ) #data td, #data th ( padding: 2px; )

Argumenten

U kunt de code in de fallback wijzigen op basis van de argumenten die eraan zijn doorgegeven. Zo kan bijvoorbeeld de cross-browser compatibiliteit van insluiten met Hakam in één rij worden geplaatst.

@mixin border-radius($radius) ( -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; ) .box -1 ( @include border-radius(10px); ) .box-2 ( @include border-radius(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)

Als we eenmaal een regel hebben gemaakt, kunnen we hem in het midden van een andere verslaan. Het geërfde element neemt alle kracht van de huidige klasse weg, zoals we eraan kunnen toevoegen, of het nu andere zijn.

Error ( border: 1px #f00; background: #fdd; ) .error.intrusion ( font-size: 1.3em; font-weight: bold; ) .badError ( @extend .error; border-width: 3px; )

Error, .badError ( border: 1px #f00; background: #fdd; ) .error.intrusion, .badError.intrusion ( font-size: 1.3em; font-weight: bold; ) .badError ( border-width: 3px; )

Het is eenvoudig om de flexibiliteit van de lay-out te vergroten en de code niet verloren te laten gaan in de code. Elke keer, ik. Onthoud dat alle SASS-documentatie is ingeschakeld

Hallo! Wat gaat de tijd snel. Ik merkte niet eens hoe ik van schrijfstijlen overschakelde van gewone CSS naar de Sass-preprocessor. Maar ik begreep het niet eerder - wat voor soort Sass is, waar het voor is, dit is waarschijnlijk voor super geavanceerde professionals in lay-out. Ja, het gebruik van preprocessors is een stap naar een nieuw niveau in webontwikkeling, maar er is hier niets verschrikkelijks en ingewikkelds, en je zult het zelf zien door dit artikel tot het einde te lezen.

En dus, wat is er goed aan de preprocessor en specifiek Sass? Ik zal meteen zeggen dat er 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 sterk vereenvoudigd 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 behoeden voor de meeste routinetaken bij het schrijven van code, waardoor de snelheid en kwaliteit van het werk wordt verhoogd. Naast CSS preprocessors zijn er ook HTML preprocessors, zoals Pug (Jade).

Artikelstructuur

Documentatie

De ontwikkelaar van Sass is de Fransman Hugo Giraudel, die sinds een bepaalde tijd in Duitsland woont. Uiteraard is de documentatie in het Engels, maar ik heb er persoonlijk een goed begrip van (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 te wennen aan en meer en dieper Engels te leren. Maar de Rus is ook niet slechter.

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

Sass compileren naar CSS

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

Syntaxis - Sass, Scss

Ik merk meteen op dat er 2 syntaxis zijn voor het schrijven van code: Sass en Scss.

De syntaxis van Sass is iets anders dan Scss. Scss lijkt meer op gewone CSS-code en Sass laat accolades en puntkomma's tussen regels weg. Er is ook een verschil in hoe sommige functies zijn geschreven, en je moet voorzichtig zijn met welke syntaxis je kiest. Bestandsextensies voor Sass − *.sass en voor Scss - *.scss. De Sass-syntaxis is ouder en Scss kwam later om het voor beginners gemakkelijker te maken om te leren. Zelf ben ik deze preprocessor gaan bestuderen op Scss, zodat het makkelijker te begrijpen was. Nu ben ik overgestapt op Sass, voor mij is het handiger.

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

Onthouden! Als u een tabstop als inspringing gebruikt, moeten spaties worden uitgesloten, zodat deze overal hetzelfde is. En vice versa - als u spaties gebruikt, moeten tabbladen worden uitgesloten. Anders geeft de compiler een fout.

Sass

.maincontent .main-title font-size: 30px font-weight: 700 marge: 0 0 30px .description margin-bottom: 30px p kleur: #444444 font-size: 16px regelhoogte: 22px

Scs

.maincontent ( .main-title ( font-size: 30px; font-weight: 700; margin: 0 0 30px; ) .description ( margin-bottom: 30px; p ( color: #444444; font-size: 16px; line -hoogte: 22px; ) ) )

De meeste code-editors (bijvoorbeeld Sublime Text) hebben streepjesinspringing om te voorkomen dat we in de war raken. In de onderstaande voorbeelden zal ik de Sass-syntaxis gebruiken.

Het leven gemakkelijker maken met Sass

Regel nesten

Dat is wat ik vanaf het begin leuk vond aan Sass, het is gewoon het nesten van CSS-regels in elkaar. Dit scheelt veel tijd en de code is gestructureerd en goed leesbaar. Als we bijvoorbeeld de elementen van een specifieke bovenliggende container willen stylen, dan moeten we elke keer de bovenliggende klasse in Css specificeren, bijvoorbeeld als volgt:

Main .title ( font-size: 30px; color: #444; ) .main .subtitle ( font-size: 20px; ) .main .description ( font-size: 14px; margin-bottom: 30px; )

Dat wil zeggen, we specificeren overal de bovenliggende klasse .main, en dit is op zijn beurt niet erg handig. Met Sass kan het als volgt worden geschreven:

Scs

.main ( .title ( font-size: 30px; color: #444; ) .subtitle ( font-size: 20px; ) .description ( font-size: 14px; margin-bottom: 30px; ) )

Sass

.main .title font-size: 30px kleur: #444 .subtitle font-size: 20px .description font-size: 14px margin-bottom: 30px

Mee eens, het ziet er op deze manier veel netter uit en je kunt sneller code schrijven, omdat we de .main parent-klasse maar één keer schrijven. Als je me wilt volgen zonder Ruby en al die software te installeren, kun je de online compiler gebruiken om te demonstreren.

Bijgevoegde eigenschappen

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

Sass

.main .title margin: top: 10px rechts: 15px onder: 10px links: 15px

css

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

Bindend aan selector of aaneenschakeling - ondertekenen &

We kunnen het schrijven van onze code versnellen en nog compacter maken door aaneenschakeling (verbinding) toe te passen met 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:

Hoofd- &-titel lettergrootte: 30px kleur: #444 &-ondertitel lettergrootte: 20px &-beschrijving lettergrootte: 14px marge-bodem: 30px

Main-title ( font-size: 30px; color: #444; ) .main-subtitle ( font-size: 20px; ) .main-description ( font-size: 14px; margin-bottom: 30px; )

Met een symbool & we maken verbinding met de rootklasse, dus in dit geval is het niet nodig om de root.main constant te herhalen. Houd er tegelijkertijd rekening mee dat we geen onderliggende elementen hebben gemaakt.

/* Referentie */ 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 selectors aan het huidige element koppelen. Je kunt het natuurlijk naar de root brengen, maar om het nesten niet te schenden, kun je als volgt schrijven:

Hoofdcontainer & breedte: 700px

Container .main (breedte: 700px)

Door te bewegen & na de selector hebben we de koppelingsvolgorde gewijzigd, d.w.z. de .container-klasse is in dit geval de bovenliggende.

Bindend aan de bovenliggende selector, maar één niveau hoger

Hierboven heb ik bijvoorbeeld Sass-code gedemonstreerd:

Hoofd- &-titel lettergrootte: 30px kleur: #444 &-ondertitel lettergrootte: 20px &-beschrijving lettergrootte: 14px marge-bodem: 30px

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

Zo deed ik het vroeger:

Hoofd- &-titel lettergrootte: 30px kleur: #444 .main__icon // specificeer de hoofdmap van .main, anders, als je & gebruikt, zal het worden gekoppeld aan .hoofdtitelkleur: #444 breedte: 20px &-ondertitel lettertype -grootte: 20px & -beschrijving lettergrootte: 14px marge-bodem: 30px

En nu kun je dit doen:

Main $self: & // link naar bovenliggende &-titel lettergrootte: 30px kleur: #444 #($self)__icon // in plaats van & gebruik link naar bovenliggende kleur: #444 breedte: 20px &-ondertitel lettergrootte : 20px &-description font-size: 14px margin-bottom: 30px

Als je het merkt, hebben we een verwijzing naar de ouder - $self: & verklaard. Voor mij doet dit enigszins denken aan een verwijzing naar het object (dit) dat de gebeurtenis in javaScript veroorzaakte. Nu, op de juiste plaats, kunnen we het gewoon #($self) noemen. Het blijkt hoe eenvoudig alles is, maar ik pijnigde mijn hersens en dacht dat er in Sass geen oplossing voor dit probleem was.

Main-title ( font-size: 30px; color: #444; ) .main-title .main__icon ( color: #444; width: 20px; ) .main-subtitle ( font-size: 20px; ) .main-description ( lettergrootte: 14px; margin-bottom: 30px; )

Lege sjablonen

Het komt vaak voor dat meerdere elementen dezelfde stijlbasis hebben, maar slechts door enkele regels van elkaar verschillen. Laten we bijvoorbeeld knoppen nemen. Als we de knoppen even groot nemen, dan kunnen ze alleen van kleur verschillen: rood, groen, grijs, etc. Als je pure CSS gebruikt, moet je alle knopkleuren in de basisstijlen specificeren, gescheiden door komma's, of een basisklasse maken. Maar in Sass is het veel gemakkelijker:

%button background-color: #666 border: 1px solid #666 padding: 0 20px font-size: 15px line-height: 40px height: 40px .button-green @extend %button background-color: groen border-kleur: groen . button-red @extend %button achtergrondkleur: rood randkleur: rood

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

In dit geval fungeert de selector %knop als een sjabloon (dit wordt aangegeven door het teken -%). Dit is handig omdat de sjabloonkiezer zelf nergens deelneemt en zijn stijlen worden overgenomen door andere selectors via de richtlijn − @uitbreiden. 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 zoals: het maken van variabelen, rekenkundige bewerkingen (optellen, aftrekken, delen, vermenigvuldigen, etc.), 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 soms 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 tekens: — " En " _ » zijn onderling uitwisselbaar. Als bijvoorbeeld $color-red wordt aangeroepen, kan $color_red ook worden aangeroepen. De variabele is als volgt gedefinieerd: $naam: waarde, bijvoorbeeld: $kleur: #f6f6f6 .

Een variabele die buiten alle nestingniveaus wordt gedeclareerd, is globaal beschikbaar, d.w.z. overal inzetbaar. Als u een variabele op een selector-nestingsniveau hebt gedefinieerd, is deze alleen op dat niveau beschikbaar. Om het globaal in het hele document te laten werken, moet u het trefwoord opgeven !globaal.

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

Over het algemeen zijn variabelen iets geweldigs, het is de moeite waard om een ​​waarde te declareren en in te voeren, en dan kun je het zo vaak en overal gebruiken als je wilt. We kunnen bijvoorbeeld kleuren definiëren door ze specifieke namen, lettergroottes, lettertypefamilies, enzovoort te geven. en in het algemeen alle waarden.

richtlijnen

@uitbreiden

We hebben deze richtlijn hierboven aangeroerd toen we de sjabloonleeg bestudeerden. Laten we onze kennis versterken. Via @uitbreiden we kunnen de regels van elke selector kopiëren. Bij het opmaken kan het bijvoorbeeld gebeuren dat het element " MAAR" en element " B' kan qua uiterlijk vergelijkbaar zijn. In dit geval kunt u de regels voor element "A" schrijven en voor "B" gewoon de stijlen van element "A" kopiëren, waarbij u de gewenste eigenschappen enigszins herdefinieert.

Block_a achtergrondkleur: #cccccc rand: 5px vast #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" overschrijven we alleen padding: 15px . Zo werkt @extend. Ik gebruik deze richtlijn vrij vaak.

@importeren

Met deze richtlijn kunt u verschillende stijlbestanden combineren tot één. 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().

Het is zelfs handiger om stijlen in verschillende bestanden te schrijven en elk heeft zijn eigen doel. Het volledige paginaframe kan bijvoorbeeld in regio's worden verdeeld: header.sass, sidebar.sass, footer.sass. Je kunt alles in het main.sass-bestand verzamelen, gewoon met @import. Regiobestanden kunnen ook worden gespecificeerd 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 "sidebar.sass" @import "footer.sass"

Fragmenten importeren

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

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

U kunt ook de import van verschillende 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 - "van de wortel". Met andere woorden, we verplaatsen de selector naar de root en annuleren de keten van bovenliggende selectors. Hier kun je natuurlijk de vraag stellen - "Waarom hebben we 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 je ten volle met Sass leert werken, zul je dit begrijpen.

Hoofd- &-titel lettergrootte: 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 instructie voert stijlen uit als de expressie die erin is ingesloten een andere waarde retourneert dan vals En nul.

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

Header ( achtergrondkleur: groen; )

Degenen die bekend zijn met in ieder geval de basis van een programmeertaal (bijvoorbeeld javaScript of Php) zullen niet moeilijk te begrijpen zijn. Hier is de essentie 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 Voor cyclus kan worden ingesteld. In Sass doet deze richtlijn hetzelfde: het creëert een lus. Voor elke iteratie (herhaling) wordt een tellervariabele gebruikt die de uitvoergegevens wijzigt.

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

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

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

Om de uiteindelijke waarde te specificeren, heb ik het trefwoord " naar". In dit scenario eindigt de cyclus op een nummer - 5 . Merk op hoe compact de Sass-code eruitziet.

@elke richtlijn

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

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

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

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

Mixins (functies)

Mixins (mixins) zijn een soort feature, zoals in een programmeertaal, die is ontworpen om repetitieve code kwijt te raken. Mixins kunnen volledige stijlfragmenten bevatten die zijn toegestaan ​​in Sass. Laten we een voorbeeld bekijken om het duidelijker te maken.

@mixin align-center position: absolute top: 50% left: 50% transform: translate (-50%, -50%) .container @include align-center

Een mixin wordt gemaakt met behulp van de @mixin-richtlijn, gevolgd door de naam van de mixin, gescheiden door een spatie, evenals optioneel doorgegeven parameters. Houd er rekening mee dat het koppelteken (-) en het onderstrepingsteken (_) in de mixin-naam onderling uitwisselbaar zijn. Een mixin kan niet alleen regels bevatten, maar ook selectors. Hierboven gaf ik een voorbeeld van een elementaire mixin zonder parameters.

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

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

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

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

Zoals je kunt zien, stellen we na de naam van de mixin tussen haakjes de argumenten in, in dit geval zijn dit de randbreedte en -kleur. Dit is de eenvoudigste mixin die ik heb gegeven voor de duidelijkheid. In de praktijk kun je complexere mixins vinden met verschillende voorwaarden en variabelen. Maar laten we het nu niet ingewikkelder maken, we moeten altijd beginnen met iets kleins en eenvoudigs, en dan omhoog gaan als we verder gaan.

Dit besluit mijn korte bespreking van de Sass-preprocessor. Waarom klein? Ja, want dit is niet alles wat ik je heb verteld. Over het algemeen kun je met het bovenstaande veilig Sass gaan gebruiken in plaats van Css nu. U kunt meer over Sass te weten komen door te verwijzen naar de documentatie die ik hierboven heb verstrekt.

Nou, bedankt allemaal voor jullie aandacht! Zoals altijd stellen we vragen in de opmerkingen en abonneren we ons op het telegramkanaal of op de e-mailnieuwsbrief (het formulier in de zijbalk aan de rechterkant) om niets interessants te missen.

Tot ziens in mijn andere berichten...

Hallo vrienden!

Dit is een gedetailleerde gids voor de preprocessor Sass voor beginners. Hier zullen we kennis maken met de Sass-preprocessor, zijn voordelen, syntaxis, en de mogelijkheden bekijken om deze met voorbeelden te gebruiken.

koel

Zet het vast

U kunt alle voorbeelden en het maatwerkproject van deze les downloaden van onze website.

Sass is een van de meest ontwikkelde en stabiele CSS-preprocessors, evenals een van de meest populaire preprocessors onder professionals.

Voordelen van Sass

• Compatibiliteit met verschillende versies van CSS, waardoor u alle CSS-bibliotheken in uw project kunt gebruiken;
• Een groot aantal verschillende functies voor elke gelegenheid van het leven. Weinig CSS-preprocessors kunnen bogen op zo'n rijke functionaliteit;
• Sass is een van de oudste CSS-preprocessors en heeft in de loop van zijn bestaan ​​veel ervaring opgedaan;
• Een geweldige kans om Sass-frameworks te gebruiken die het leven van een ontwikkelaar gemakkelijker maken. Een van deze frameworks is Bourbon, dat we in sommige edities van de Jedi-lay-out gebruiken bij het schrijven van Sass;
• Syntaxis. U kunt een van de twee syntaxis kiezen die het beste bij u passen: vereenvoudigd (SASS) en uitgebreid CSS-achtig (SCSS).

Toen ik voor het eerst kennismaakte met CSS-preprocessors, begreep ik, net als veel andere beginnende webontwikkelaars, het hele idee van het gebruik van CSS-preprocessors niet helemaal. Waarom een ​​extra laag maken, wat tools gebruiken, CSS ingewikkelder maken, dacht ik. Maar na verloop van tijd begon ik te begrijpen dat het dagelijks schrijven van CSS een marteling werd, een grijze routine, veel acties moesten worden herhaald, selectors, eigenschappen en zelfs hele blokken CSS-code werden gekopieerd om het gewenste resultaat te bereiken. Vandaag zal ik u aan de hand van voorbeelden laten zien hoe u uw werk kunt vereenvoudigen met behulp van de Sass-preprocessor, uw ontwikkeling kunt diversifiëren en zelfs een beetje plezier kunt hebben bij het schrijven van min of meer complexe functies.

Omgeving instellen

Als omgeving voor het werken met Sass in deze tutorial, net als in onze andere tutorials, zullen we de Sass-versie van de Gulp-taakmanager gebruiken ( slik-sass). Om de originele Ruby-versie te gebruiken of Sass te compileren met speciale software, kun je de instructies lezen op. website. Deze les is vooral praktisch, dus we zullen niet stilstaan ​​bij de mogelijke opties om verbinding te maken met het project, we zullen Sass op de meest populaire manier verbinden met Gulp.

Zorg ervoor dat je de nieuwste versie van Node.js en Gulp hebt geïnstalleerd. Als Node.js niet is geïnstalleerd, download en installeer het dan. Na het installeren van Node.js, installeer gulp met het commando "npm ik -g slok"(Windows) of "sudo npm i -g slok"(Linux, OSX). Lezen: .

npm i --save-dev gulp gulp-sass

Var gulp = vereisen ("gulp"), // Inclusief Gulp sass = vereisen ("gulp-sass"); // Inclusief Sass-pakket gulp.task("sass", function() ( // Maak "sass"-taak retour gulp.src(["sass/**/*.sass", "sass/**/*.scss "]) // Haal source.pipe(sass((outputStyle: "expanded")).on("error", sass.logError)) // Converteer Sass naar CSS met gulp-sass .pipe(gulp.dest(" css")) // Upload het resultaat naar de css-map )); gulp.task("watch", function() ( gulp.watch(["sass/**/*.sass", "sass/**/*.scss"], ["sass"]); // Bekijk achter sass-bestanden in de sass-map)); gulp.task("standaard", ["kijken"]);

Let op regel 6 - hier gebruiken we een van de uitvoerstijlen in het resulterende bestand: genest- standaard genest; uitgebreid- ingezet; compact- compact, wanneer de selector en zijn eigenschappen tussen accolades op één regel worden weergegeven; gecomprimeerd- gecomprimeerd. Bovendien, als gevolg van verwerking .on("fout", sass.logError) als er een fout optreedt, hoeven we de opdracht Gulpfile run niet opnieuw te laden en zullen we zien op welke regel van het Sass-bestand we de fout hebben. In de voorbeelden zal ik de uitvoerstijl gebruiken uitgebreid voor alle duidelijkheid.

U zou de volgende projectstructuur op uw bestandssysteem moeten hebben:

• mijn project/
  • css/
    • common.css
  • sas/
    • common.sass
  • node_modules/
  • gulpfile.js
  • pakket.json

We starten de uitvoering van Gulpfile met het commando slok in de projectmap terminal.

Hier halen we alle Sass-bestanden uit de directory sas/ van uw project en upload het voltooide CSS-resultaat naar een map css/. Daarnaast stellen we hier een observatie vast: horloge voor wijzigingen in Sass-bestanden en automatische compilatie naar CSS, als dergelijke wijzigingen plaatsvinden. Het resulterende css-bestand wordt opgenomen in de lay-out.

Als je in dit voorbeeld iets niet begrijpt over het opzetten van Gulp-pakketten, lees dan de Gulp-handleiding.

Nadat onze omgeving is ingesteld en Sass met succes is geconverteerd naar CSS bij het opslaan van *.sass-bestanden in de map sas/, kunt u veilig blijven leren en de voorbeelden volgen die we vandaag in de praktijk zullen analyseren.

Sass-syntaxis

Er zijn 2 manieren om Sass te schrijven, 2 syntaxis: SASS en SCSS. De oudste spelling van Sass is inspringingssyntaxis. Dit is de spelling die we in onze les zullen gebruiken. De bestandsextensie voor een dergelijke syntaxis is *.sass. De tweede optie is de syntaxis, CSS-syntaxis uitbreiden, Sassy CSS. SCSS is geschreven als gewone CSS, maar uitgebreid met extra Sass-functies. Bestandsextensie met SCSS-syntaxis - *.scss.

Erg belangrijk! De inspringsyntaxis vereist dat geneste eigenschappen zeer zorgvuldig worden ingesprongen, en als u fouten krijgt bij het uitvoeren van Gulp of impliciete fouten zonder een tekenreeks in de console op te geven, is het zeer waarschijnlijk dat de fout in de verkeerde inspringing zit. Nog een belangrijk detail: als je tabs als inspringing gebruikt, geeft de compiler een foutmelding bij het converteren van Sass, die naast tabs ook spaties als inspringing gebruikt. Of je gebruikt alleen tabs of alleen spaties.

SASS- en SCSS-syntaxis:

SASS - Inspringsyntaxis	SCSS - extensie syntaxis
$font-stack: Helvetica, schreefloos $primary-color: #333 body font: 100% $font-stack color: $primary-color	$font-stack: Helvetica, schreefloos; $primaire kleur: #333; body ( font: 100% $font-stack; kleur: $primary-color; )

Naast de basisspelregels (accolades, puntkomma's aan het einde van regels), verschillen SASS en SCSS ook in het schrijven van sommige functies. Wees dus voorzichtig bij het gebruik van voorbeelden van internet, controleer welke syntaxis wordt gebruikt. Als een vrij groot voorbeeld van internet in SCSS-stijl is en uw project is geschreven in SASS, kunt u het in uw hoofdbestand importeren zonder de syntaxis en bestandsextensie te wijzigen met behulp van de richtlijn @importeren, bijvoorbeeld als u het bestand hebt gedownload carrousel.scss, dan kunt u deze aansluiten op uw hoofd.sass snaar @import "carrousel". U kunt ook het tegenovergestelde doen wanneer u *.sass-bestanden in het main.scss-bestand moet importeren. In ons Github-voorbeeld importeren we alles _x.x.sass bestanden in één common.sass, waarbij x.x het titelnummer is van het voorbeeld uit dit artikel.

We zullen de inspringsyntaxis gebruiken.

1. Breid CSS uit met Sass

1.1 Nestregels

Sass geeft ontwikkelaars een geweldige kans om CSS-regels in anderen te nesten, waardoor de tijd voor het schrijven/kopiëren van lange selectors wordt verkort en de code meer gestructureerd wordt, met een duidelijke hiërarchie.

1.2 Bindend aan bovenliggende selector

Als u een selector wilt uitbreiden zonder een nieuwe regel te maken, kunt u extra selectors binden aan een vooraf gemaakte selector met behulp van het teken & . Uiterlijk lijkt dit op het maken van een onderliggende selector in de hiërarchie, maar met behulp van & , we breiden de bovenliggende selector uit, geen onderliggende.

Let op de regel lichaam.firefox &, waarmee we een nieuwe keten van elk element naar het huidige kunnen krijgen, indien aan het einde ingesteld & .

Bovendien kan bovenliggende binding worden gebruikt om samengestelde selectors te maken:

1.3 Bijgevoegde eigenschappen

Voor het gemak kunt u het achtervoegsel van de naamruimte van de eigenschap opsplitsen in bijlagen. Bijvoorbeeld, marge bovenkant, marge-onderkant, marge-links, marge-rechts hebben een gemeenschappelijke stam marge en kan als volgt in nesten worden onderverdeeld:

1.4 Patroonkiezers

Soms doet zich een situatie voor wanneer verschillende elementen op de pagina dezelfde CSS-basis gebruiken, dezelfde set eigenschappen die alleen voor hen specifiek zijn. Deze basis-CSS-regels kunnen worden opgemaakt als een wildcard-selector voor gebruik op meerdere plaatsen in Sass. Sjabloonkiezers worden afgeleid met behulp van de richtlijn @uitbreiden.

2.SassScript

Met SassScript kunt u de mogelijkheden van Sass aanzienlijk uitbreiden door het gebruik van gebruikersvariabelen, rekenkundige en andere functies. SassScript kan worden gebruikt om automatisch nieuwe selectors en eigenschappen te genereren.

2.1 Variabelen in Sass

Het is echt gaaf om variabelen te kunnen definiëren die overal in je Sass-bestand kunnen worden gebruikt. Kleuren, standaardwaarden, eenheden, dit alles kan in een variabele worden opgenomen en in de toekomst worden gebruikt. De variabele is als volgt gedefinieerd: $naam: waarde.

2.2 Bewerkingen met cijfers en strings + interpolatie

Met Sass kunt u standaard rekenkundige bewerkingen op getallen gebruiken, zoals optellen (+), aftrekken (-), delen (/) en modulo (%). Vergelijkingsoperatoren (<, >, <=, >=, ==, !=) worden ook ondersteund voor getallen.

Daarnaast heeft Sass de mogelijkheid om strings samen te voegen (samen te voegen).

Zoals we uit het voorbeeld zien $som: 10 + 20 / 2, prioriteit wordt waargenomen bij het uitvoeren van rekenkundige bewerkingen - eerste divisie, dan optellen. Haakjes kunnen worden gebruikt om de volgorde van bewerkingen te bepalen, zoals in de wiskunde. Merk op dat bij het toevoegen 12px + 8px, we zullen krijgen 20px.

Let ook op regel 2 en 9, hier gebruiken we interpolatie om dynamische waarden overal in het Sass-bestand te plaatsen, inclusief waar we een eigenschapsnaam, een selectornaam of een regel hebben.

Interpolatie krijgt een nieuwe waarde door anderen te gebruiken.

Het meest gebruikelijke gebruik van interpolatie in Sass is om een ​​nieuwe waarde voor een variabele te krijgen door te "integreren" in de waarde van een andere variabele, via de constructie #{} , bijvoorbeeld:

Je kunt niet zomaar een variabele in een string nemen en plakken zonder interpolatie, zoals je in PHP bijvoorbeeld tussen dubbele aanhalingstekens kunt doen. Zorg ervoor dat u interpolatie naar variabelen gebruikt.

2.3 Bewerkingen met kleuren

Kleuren in Sass kunnen worden opgeteld, afgetrokken, gedeeld en vermenigvuldigd. Alle rekenkundige bewerkingen worden voor elke kleur afzonderlijk uitgevoerd: rood, groen en blauw.

Houd er rekening mee dat bij het toevoegen van RGB-kleuren de laatste opaciteitsparameter van 0,75 niet mag verschillen van de andere in de uitdrukking, anders treedt er een optelfout op. In plaats daarvan kunt u het rgba-alfakanaal aanpassen met ondoorzichtig maken En transparant maken of regel de dekking van de HEX-kleur via de rgba-functie.

3. Richtlijnen en regels

3.1 @import

U kunt importeren in uw Sass-bestand sass, scss En css bestanden met behulp van de richtlijn @importeren, terwijl alle mixins en variabelen zullen werken in het hoofdbestand waarin de import plaatsvindt.

@import werkt als normale CSS @import als:

• is aanwezig in het bestandspad http://;
• het bestand heet via url();
• of er zijn mediaparameters in de import.

Om een ​​ander bestand volledig in het Sass-hoofdbestand te kunnen importeren, moet de bestandsextensie zijn: *.sass, *.scss of *.css.

Laten we eens kijken naar enkele voorbeelden.

De volgende bestanden worden geïmporteerd: zal niet:

De volgende bestanden: zullen geïmporteerd:

Aandacht! In nieuwe versies slik-sass om CSS-bestanden in Sass te importeren, moet u de .css-extensie opgeven

Het is mogelijk om meerdere bestanden te importeren, gescheiden door komma's: @import "header", "media".

Bestanden die beginnen met een onderstrepingsteken heten fragmenten en vereisen geen onderstreping en uitbreiding bij het importeren. Bijvoorbeeld bestand _header.sass kan als volgt worden geïmporteerd: @import "kop".

Merk op dat de import plaatsvindt op het punt waar u de richtlijn opgeeft @importeren. Dienovereenkomstig is het mogelijk om geneste importen uit te voeren op de plaats waar dit nodig is:

#main @import "voorbeeld"

3.2 @at-root

Richtlijn @at-root verhoogt de regels die erin staan ​​​​naar de wortel, waardoor de keten van de ouder wordt geannuleerd. Alles is hier eenvoudig:

We hebben niet alle richtlijnen bekeken die in Sass staan, maar alleen de meest gebruikte in de praktijk. Als je meer wilt weten over Sass-richtlijnen, bekijk dan de documentatie.

4. Uitdrukkingen

Sass ondersteunt het gebruik van expressies en functies voor verschillende voorwaarden, het implementeren van lussen, enzovoort.

4.1 De @if() richtlijn

Richtlijn @als() stelt u in staat om SassScript onder bepaalde voorwaarden uit te voeren en heeft de volgende syntaxis:

4.2 De @for-richtlijn

@voor rendert een blok met stijlen een bepaald aantal keren. U kunt tijdens runtime een tellervariabele instellen.

U kunt specificeren: er doorheen in plaats van naar als je van 1 tot en met 11 wilt gaan, en niet alleen tot 10, zoals in het voorbeeld.

4.3 De @each-richtlijn

Als u een lijst met waarden wilt herhalen, niet alleen getallen, kunt u de richtlijn gebruiken @elk:

4.4 De @while-richtlijn

@terwijl bladert door stijlblokken terwijl de uitdrukking is waar.

5. Mixins

Mixins- blokken Sass-code (of mixins-sjablonen) die argumenten kunnen bevatten (optioneel) en waarmee u de mogelijkheden van schrijfstijlen aanzienlijk kunt uitbreiden en de tijd die wordt besteed aan het toepassen van hetzelfde type regels en zelfs hele CSS-blokken kunt verminderen. Het is een soort functie die een argument kan aannemen, een enorme hoeveelheid werk kan doen en een resultaat kan produceren, afhankelijk van de invoerparameter.

De mixin wordt aangegeven door richtlijn @mixin, nadat de aangifte moet worden opgegeven naam mixen. Aangeroepen door de mixin-richtlijn @erbij betrekken, die de naam van de mixin aanneemt en de eventuele argumenten die moeten worden doorgegeven.

Vrienden, we hebben de belangrijkste functies van Sass bekeken, die voldoende zijn voor vruchtbaar werk met CSS-sitestijlen. Sommige richtlijnen en functies zijn niet opgenomen in deze handleiding, maar als u geïnteresseerd bent om meer te weten te komen over alle functies van Sass, is dit handig.

Ik zal meteen de vraag beantwoorden - hoe te werken met Sass-stijlen op een voltooide site, moet je echt de voltooide CSS bewerken en uploaden via FTP? Nee, dat kun je niet doen. U zou een lokale kopie van uw Sass-stijlen of zelfs een hele site moeten hebben en na voltooiing van het werk via FTP kant-en-klare stijlen implementeren (uploaden). Hiervoor kunt u gebruik maken van het Gulp pakket vinyl-ftp. Of stel een Sass-omgeving in op uw server om bestanden te compileren die zijn geüpload via FTP/sFTP.