Share
Sass kan mogelijk CSS 2.0 worden genoemd; het heeft een aantal zeer handige functies waarmee je je code in minder tijd en met meer flexibiliteit kunt schrijven. In het artikel van vandaag zullen we de basis gebruiken!
Sass is gewoon een andere manier om met CSS te werken. Hiermee kunt u uw CSS-code heel eenvoudig houden en de leesbaarheid vergroten. Het heeft zoiets als dit:
En verandert het in:
U kunt Sass bekijken op http://sass-lang.com/
Compass maakt het werken met Sass nog eenvoudiger. De auteur, Chris Eppstein, heeft ook een aantal geconverteerde frameworks zoals Blueprint, YUI en 960.gs. Het kan ook gemakkelijk worden geïntegreerd met op Ruby gebaseerde projecten, maar is net zo eenvoudig toe te voegen aan andere projecten. Compass is open-source en is zeer goed gedocumenteerd. Bekijk de bron en documentatie.
Zowel Sass (dat deel uitmaakt van het Haml-project) als Compass worden geïnstalleerd via RubyGems. Als je geen idee hebt waar ik het over heb, ga dan naar "Stap 1 - Ruby on Rails installeren" van mijn vorige artikel Ruby on Rails for Designers en volg de stappen omlaag totdat je het gedeelte "Rails installeren" raakt.
Om beide edelstenen te installeren, kunnen we gewoon een enkele opdracht uitvoeren:
(sudo) gem install haml chriseppstein-compass
Zolang het zegt dat het beide edelstenen succesvol heeft geïnstalleerd, ben je goed om te gaan!
Als je met een Ruby-gebaseerd project werkt, bekijk dan de documentatie, want het zal uitleggen hoe je het kunt laten werken met je specifieke framework, maar ik neem aan dat we werken met een eenvoudig HTML of iets dergelijks project.
De opdracht compass heeft veel opties en als u compass --help uitvoert, ziet u mogelijk:
Ter informatie: de volgende regel met de titel 'Bezig met laden van edelsteen met de rand'. is omdat ik de nieuwste versie gebruik, dus je hoeft je geen zorgen te maken als de jouwe iets anders zegt.
Nu gaan we ons Compass-project starten. Als u wilt maken, voert u de volgende opdracht uit (inclusief de naloopperiode die het kompas aangeeft waar we ons project willen maken!)
kompas --sass-dir = sass .
En je zou moeten zien:
Bij het initialiseren zou Compass normaal gesproken standaard de Sass in een mapnaam src plaatsen, maar ik wilde dat veranderen dus ik voegde de optie toe. Als u naar de map kijkt, ziet u een bestand met de naam config.rb en twee andere mappen.
De config.rb is de configuratie waar Compass naar kijkt, maar meestal hoef je hier niet mee te rotzooien. Ook, zoals de uitvoer van de opdracht create zegt, hebben we drie manieren om onze CSS te updaten van onze Sass:
Accentsconagua
kompas - Als je deze optie gebruikt, zou je in de juiste map moeten staan, en dan zou Compass je Sass één keer compileren.kompas - u pad / naar / project - dit is ongeveer hetzelfde als de opdracht zoals hierboven, maar je hoeft niet in de projectmap te staan, en er liever in door te geven met het commando.kompas - horloge [pad / naar / project] - deze opdracht is best te gek dat hij op eventuele wijzigingen in uw Sass-bestanden let en deze automatisch opnieuw compileert wanneer een verandering wordt gedetecteerd.Nu je weet hoe je een project moet opzetten, zal ik enkele "regels" van het werken met Sass uitleggen
Normaal gesproken zou je bij het schrijven van CSS iets schrijven als:
#header width: 900px; background: # 111; #header a color: # 000; text-decoration: none;
Een van de problemen is dat je vaak dezelfde naam herhaalt. Laten we dit in Sass maken. Ik ga in het bestand screen.sass werken, dus verwijder alles en je Sass zou graag willen:
#header: width 900px: background # 111 a: color # 000: text-decoration none
Persoonlijk is dat veel gemakkelijker te lezen en te schrijven op deze manier, geen accolades of puntkomma's. De manier waarop Sass het nesten begrijpt, is door inkepingen.
De eerste selector is helemaal niet ingesprongen dus de uiteindelijke CSS begint daarmee. Alle eigenschappen (dus kleur, hoogte, breedte, enz.) Beginnen ook met een dubbele punt. Dus voor de eigenschappen voor #header zijn ze ingesprongen. Het maakt niet uit of je tabbladen of spaties gebruikt, maar je moet consistent blijven, anders krijg je een foutmelding (die ik over een minuut laat zien).
Dus nu u uw eigendommen heeft, hebben we onze volgende selector. Aangezien dit op dezelfde manier is ingesprongen als de eigenschappen, is de CSS-uitvoer dat #header een ...
Nu we zover zijn, laten we proberen om te compileren: (in je projectdirectory)
kompas
En voila!
Laten we zeggen dat je niet alles hetzelfde hebt ingesprongen, Compass zou fout maken:
Nu, als je CSS eenmaal kent, zal Sass niet echt een leercurve zijn, omdat het verschil bij het begin van de cursus de verschillende opmaakregels zijn. Vervolgens gaan we werken met enkele van de meer geavanceerde (maar koelere!) Delen van Sass.
Een geweldige functie van Sass is het vermogen om variabelen te gebruiken. Een voorbeeld:
!link_color = #fff #header: width 900px: background # 111 a: color =! link_color: text-decoration none
Als u dit compileert, krijgt u:
Je lacht misschien om deze titel, maar het is waar, je kunt wiskunde doen in Sass! Voor deze demonstratie gebruiken we de interactieve modus van Sass, dus voer:
sass -i
En een beetje rommelen zou je het volgende geven:
Of een meer visuele benadering:
# 111 - # 999 = # 000
# 111 + # 999 = #aaa
# 398191 + # 111 = # 4a92a2
# 398191 - # 111 = # 287080
Naast optellen en aftrekken, kunt u ook vermenigvuldigen en delen:
# 398191/2 = # 1c4048
# 398191 * 2 = # 72ffff
Als u de interactieve modus van Sass wilt afsluiten, drukt u op Control-C en typt u 'end' en drukt u op Enter.
Als u ooit hebt gehoord dat uw code DROOG is, betekent DROG dat u zichzelf niet herhaalt. Met mixins kun je precies dat doen. Bijvoorbeeld, met de toenemende populariteit van afgeronde hoeken, wil je misschien een mix maken om daar mee om te gaan, dus ergens (niet onder een selector) zou je het volgende toevoegen:
= afgerond: grensradius 4px: -moz-border-radius 4px: -webkit-border-radius 4px
En om te gebruiken zou je iets als doen:
#meader: width 900px: background # 111 + afgerond
En wanneer gecompileerd:
Laten we echter zeggen dat je misschien wilt dat de grensradius variabel is. Je kunt een mix verwachten dat sommige waarden worden doorgegeven. Als we onze mixin wijzigen, ziet het er als volgt uit:
= afgerond (! radius = 4px): grensradius =! radius: -moz-border-radius =! radius: -webkit-border-radius =! radius
En dan om te gebruiken zou je kunnen gebruiken wat we eerder hebben gedaan, en dan zou de waarde standaard 4px zijn, anders:
#header: width 900px: background # 111 + rounded (8px)
Sass heeft ook de mogelijkheid om andere Sass-bestanden te importeren, dus laten we zeggen dat je een bestand wilde importeren (in hetzelfde als dit sass-bestand), zou je toevoegen:
@import reset.sass
Deze functie is echt leuk om je de mogelijkheid te geven vreemde stijlen buiten je hoofdbestand te houden. U kunt bijvoorbeeld ook een sass-bestand van mixins bewaren dat u rond projecten hebt gekopieerd, waarna een eenvoudige import die code zou toevoegen - niet kopiëren en plakken.
Ik hoop dat je de basisprincipes van het gebruik van Sass en Compass begrijpt en deze mogelijk in je volgende project zult gebruiken! Nu, als je bent zoals ik was toen ik Sass vond en zei: "Ik heb dit niet nodig!", Probeer het eens. Ik ben er voor al mijn recente projecten op overgestapt en ik vind het heel leuk om ermee te werken.
Hier zijn enkele koppelingen die je kunnen helpen onderweg:
