sass
Kompas CSS3-mixins
Zoeken…
Invoering
Handleiding Aan de slag met Sass exentsion Compass. Kompas is erg handig bij het omgaan met CSS3, omdat het mixins biedt om 1 regel te schrijven om elke browser te ondersteunen die CSS3-functies gebruikt. Het is ook geweldig om sprite-afbeeldingen op te nemen.
Omgeving instellen
Open uw opdrachtregel
Installatie met Ruby
gem update --system
gem install compass
Maak een project
compass create <myproject>
Hiermee wordt een kompasproject geïnitialiseerd. Er wordt een map met de naam toegevoegd. De map ziet eruit als de volgende structuur:
| Bestandsmap | Beschrijving |
|---|---|
| sass / | Zet je sass / scss-bestanden in deze map |
| stylesheets / | In deze map wordt uw gecompileerde CSS opgeslagen |
| config.rb | Kompas configureren - bijv. Mappad, sass-compilatie |
Gebruik kompas
compass watch
Dit compileert uw sass-bestanden elke keer dat u ze wijzigt. Het pad van de map sass kan worden gewijzigd binnen de config.rb
CSS3 gebruiken met kompas
Op deze pagina vindt u een volledige referentie welke CSS3-componenten worden ondersteund
Om CSS3 in uw project te gebruiken, biedt Compass mixins om CSS3-functies in elke browser te ondersteunen. Bovenop uw Sass / Scss-bestand moet u opgeven dat u het kompas wilt gebruiken
@import "compass/css3";
Border-radius
Neem de randradius met kompas op in uw sass-bestand:
div {
@include border-radius(4px);
}
CSS-uitvoer
div {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
Zoals u kunt zien, kunt u de normale CSS-naam gebruiken. Plaats er gewoon @include ervoor en gebruik () om uw waarde in te stellen.
Flexbox-voorbeeld
.row {
@include display-flex;
@include flex-direction(row);
}
CSS-uitvoer
.row {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
Conclusie
Dit zijn slechts twee voorbeelden. Compass biedt veel meer CSS3-mixins. Het is erg handig om Compass te gebruiken en u hoeft zich geen zorgen te maken dat u bent vergeten een CSS3-component te definiëren voor een specifieke browser. Als de browser de CSS3-functie ondersteunt, zal het kompas deze voor u definiëren.