sass => Kompass CSS3 Mixins

Introduktion

Komma igång guide med Sass exentsion Compass. Kompass är mycket användbart när man hanterar CSS3 eftersom det ger mixins att skriva en rad för att stödja varje webbläsare som använder CSS3-funktioner. Det är också bra att ta med sprite-bilder.

Ställ in miljö

Öppna din kommandorad

Installation med Ruby

gem update --system

gem install compass

Skapa ett projekt

compass create <myproject>

Detta kommer att initiera ett kompassprojekt. Den lägger till en mapp som heter. Mappen ser ut som har följande struktur:

Filmapp	beskrivning
sass /	Sätt dina sass / scss-filer i den här mappen
mallar /	I den här mappen lagras dina sammanställda css
config.rb	Konfigurera kompass - t.ex. mappväg, sass-sammanställning

Använd kompass

compass watch

Detta kommer att kompilera dina Sass-filer varje gång du ändrar dem. Sass-mappvägen kan ändras inuti config.rb

Använda CSS3 med kompass

Du kan hitta en fullständig referens till vilka CSS3-komponenter som stöds på den här sidan

För att kunna använda CSS3 i ditt projekt tillhandahåller Compass mixins för att stödja CSS3-funktioner i varje webbläsare. Ovanpå din Sass / Scss-fil måste du ange att du vill använda kompass

@import "compass/css3";

Border-radius

Inkludera gränseradius med kompass i din Sass-fil:

div {
    @include border-radius(4px);
}

CSS-utgång

div {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

Som du ser kan du använda det vanliga CSS-namnet. Sätt bara @include framför det och använd () för att ställa in ditt värde.

Flexbox-exempel

.row {
  @include display-flex;
  @include flex-direction(row);
}

CSS-utgång

.row {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: row;
  flex-direction: row;
}

Slutsats

Detta är bara två exempel. Kompass ger mycket mer CSS3-blandningar. Det är mycket praktiskt att använda Compass och du behöver inte oroa dig för att du har glömt att definiera en CSS3-komponent för en specificerad webbläsare. Om webbläsaren stöder CSS3-funktionen kommer kompass att definiera den för dig.

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

sass
Kompass CSS3 Mixins

Sök…