Syntactisch geweldige stylesheets met behulp van Compass in Sass
In onze laatste post hebben we een keer over Compass genoemd. Volgens de officiële site wordt het beschreven als een open-source CSS Authoring Framework.
Kortom, Compass is een Sass-extensie en heeft, net als LESS Element of LESS, een heleboel kant-en-klare CSS3 Mixins, behalve dat het ook verschillende andere dingen heeft toegevoegd die het een krachtiger hulpmiddel maken voor Sass. Laten we het bekijken.
Compass installeren
Kompas, zoals Sass, moet in ons systeem worden geïnstalleerd. Maar als u een toepassing zoals Scout-app of Compass.app gebruikt, is dit niet nodig.
Zonder hen moet je het doen “handmatig” door Terminal / opdrachtprompt. Hiertoe typt u de volgende opdrachtregel;
Op Mac / Linux Terminal
sudo gem installeer kompas
Op de opdrachtprompt van Windows
gem installeer kompas
Als de installatie slaagt, zou u een notificatie moeten krijgen zoals hieronder getoond;
Voer vervolgens de volgende opdrachtregel uit in uw werkdirectory om toe te voegen Compass projectbestanden.
kompas init
Verder lezen: Compass Command Line Documentation
Compass-configuratie
Als u deze opdracht hebt uitgevoerd kompas init, je zou nu een bestand moeten hebben met de naam config.rb in je werkmap. Dit bestand wordt gebruikt om de projectuitvoer te configureren. We kunnen bijvoorbeeld onze voorkeursdirectorynamen wijzigen.
http_path = "/" css_dir = "css" sass_dir = "scss" images_dir = "img" javascripts_dir = "js"
Verwijder de commentaarregel die is gegenereerd door Compass; we gaan zitten waar als we de opmerkingen moeten laten afdrukken of vals als het niet moet.
line_comments = false
We kunnen ook de CSS-uitvoer bepalen. Er zijn vier opties die we kunnen selecteren : uitgebreid, :compact, : gecomprimeerdeen : genesteld. Voor nu hebben we het alleen maar nodig om te worden uitgebreid, omdat we ons nog in de ontwikkelingsfase bevinden.
output_style =: uitgebreid
Ik denk dat deze configuraties voldoende zijn voor de meeste projecten in het algemeen, maar je kunt altijd naar deze documentatie verwijzen, Compass-configuratiehandleiding als je meer voorkeuren nodig hebt.
Ten slotte moeten we dat ook doen kijk maar elk bestand in de map met deze opdrachtregel;
kompas kijken
Deze opdrachtregel, zoals in Sass, zal elke bestandsverandering bekijken en de bijbehorende CSS-bestanden maken of bijwerken. Maar vergeet niet, voer deze regel uit nadat je het configureren van het project hebt voltooid config.rb, anders negeert het de wijzigingen in het bestand.
CSS3 Mixins
Voordat je door CSS3 loopt, in onze primaire .SCSS bestand, moeten we het kompas importeren met de volgende regel @import "kompas";, dit zal alle extensies in Compass importeren. Maar als we alleen CSS3 nodig hebben, kunnen we het ook specifieker doen met deze regel @import "compass / css3".
Verder lezen: Compass CSS3.
Laten we nu iets gaan maken met Saas en Compass. In het HTML-document, ervan uitgaande dat u er ook een hebt gemaakt, plaatsen we de volgende eenvoudige markeringen:
Het idee is ook eenvoudig; we maken een geroteerde box met afgeronde hoeken, en hieronder staan onze Sass-geneste stijlen voor de starter;
body achtergrondkleur: # f3f3f3; sectie width: 500px; marge: 50px auto 0; div width: 250px; hoogte: 250 px; achtergrondkleur: #ccc; marge: 0 auto;
En om onze rechthoek de afgeronde hoeken te krijgen, kunnen we de Compass CSS3 Mixins als volgt opnemen;
body achtergrondkleur: # f3f3f3; sectie width: 500px; marge: 50px auto 0; div width: 250px; hoogte: 250 px; achtergrondkleur: #ccc; marge: 0 auto; @ inclusief grensradius;
Deze border-radius Mixins genereren alle voorvoegsels van de browser en standaard is de hoekradius dat 5px. Maar we kunnen ook op deze manier de straal van onze behoefte specificeren @ include border-radius (10px); .
sectie div width: 250px; hoogte: 250 px; achtergrondkleur: #ccc; marge: 0 auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; grensradius: 10px;
Vervolgens, als het plan zullen we ook de doos draaien. Het is heel gemakkelijk om het met Compass te doen, alles wat we moeten doen is gewoon de transformatiemethode noemen, zoals zo;
body achtergrondkleur: # f3f3f3; sectie width: 500px; marge: 50px auto 0; div width: 250px; hoogte: 250 px; achtergrondkleur: #ccc; marge: 0 auto; @ include border-radius (10px); @include rotate;
Deze Mixins genereren ook die vervelende leveranciersvoorvoegsels en de rotatie duurt standaard 45 graden. Zie de gegenereerde CSS hieronder.
sectie div width: 250px; hoogte: 250 px; achtergrondkleur: #ccc; marge: 0 auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; grensradius: 10px; -webkit-transform: roteren (45deg); -moz-transformatie: roteren (45 graden); -ms-transformatie: roteren (45 graden); -o-transform: roteer (45 graden); transformeren: roteren (45 graden);
Compass Helpers
Een van de krachtigste functies in Compass zijn de Helpers. Volgens de officiële site, De kompashelpers zijn functies die de functies van Sass aanvullen. Oké, laten we de volgende voorbeelden eens bekijken om een duidelijk beeld te krijgen.
@ Font-face-bestanden toevoegen
In dit voorbeeld gaan we aangepaste lettertypefamilies toevoegen @ Font-face regel. In gewone CSS3 ziet de code er ongeveer als volgt uit, bestaande uit vier verschillende lettertypen en het is ook moeilijk te onthouden voor sommige mensen.
@ font-face font-family: "MyFont"; src: url ('/ fonts / font.ttf') formaat ('truetype'), url ('/ fonts / font.otf') formaat ('opentype'), url ('/ fonts / font.woff') formaat ('woff'), url ('/ fonts / font.eot') formaat ('embedded-opentype'); Met Compass we kunnen hetzelfde gemakkelijker doen met font-bestanden () helpers;
@include font-face ("MyFont", font-files ("font.ttf", "font.otf", "font.woff", "font.eot")); De bovenstaande code genereert een resultaat dat exact hetzelfde is als het eerste codefragment, het detecteert ook automatisch het lettertype en voegt dit toe aan de formaat() syntaxis.
Als we de code echter van dichtbij bekijken, ziet u dat we het pad van het lettertype niet hebben toegevoegd (/ Fonts /). Hoe wist Compass waar de lettertypen zich bevinden? Nou, raak niet in de war, dit pad is eigenlijk afgeleid van config.rb met fonts_path eigendom;
fonts_dir = "fonts"
Dus laten we zeggen dat we het veranderen in fonts_dir = "myfonts", dan zal de gegenereerde code zijn url ( '/ myfonts / font.ttf'). Als we het pad niet specificeren, geeft Compass dit standaard door stylesheets / fonts.
Afbeelding toevoegen
Laten we nog een voorbeeld maken, deze keer zullen we een afbeelding toevoegen. Het toevoegen van afbeeldingen via CSS is normaal. We doen dit over het algemeen met behulp van de achtergrond afbeelding eigendom, zoals zo;
div background-image: url ('/ img / the-image.png'); In Compass, in plaats van het gebruik van de url () functie, we kunnen het vervangen afbeelding URL() Helpers en vergelijkbaar met toevoegen @ Font-face hierboven kunnen we het pad volledig negeren en Compass de rest laten verwerken.
Deze code genereert ook exact dezelfde CSS-verklaring als in het eerste fragment.
div background-image: image-url (the-image.png);
Bovendien heeft Compass Image Dimension Helpers, het detecteert voornamelijk de beeldbreedte en -hoogte, dus in het geval dat we ze allebei in onze CSS moeten specificeren, kunnen we als volgt nog twee regels toevoegen;
div background-image: image-url ("images.png"); width: image-width ("images.png"); hoogte: beeldhoogte ("images.png"); De uitvoer wordt zoiets als dit;
div background-image: url ('/ img / images.png? 1344774650'); breedte: 80px; hoogte: 80 px; Verder lezen: Compass Helper Functies
Laatste gedachte
Oké, we hebben vandaag vrij veel over Compass besproken en zoals je kunt zien is het echt een krachtige tool en laten we CSS op een elegantere manier schrijven.
En, zoals u al wist, Sass is niet de enige CSS Preprocessor; er is ook MINDER wat we al eerder uitvoerig hebben besproken. In de volgende post zullen we proberen om te vergelijken, wat een van deze twee het werk beter doet in preprocessing CSS.
- Download de bron
