sass
Compass CSS3 Mixins
Szukaj…
Wprowadzenie
Przewodnik wprowadzający z użyciem kompasu Sass Exentsion Compass. Kompas jest bardzo przydatny, gdy mamy do czynienia z CSS3, ponieważ zapewnia mixiny do napisania 1 linii w celu obsługi każdej przeglądarki korzystającej z funkcji CSS3. Świetnie jest również dołączyć obrazy sprite.
Skonfiguruj środowisko
Otwórz wiersz poleceń
Instalacja przy użyciu Ruby
gem update --system
gem install compass
Utwórz projekt
compass create <myproject>
Spowoduje to zainicjowanie projektu kompasu. Doda folder o nazwie. Folder będzie wyglądał następująco:
| Folder plików | opis |
|---|---|
| sass / | Umieść pliki sass / scss w tym folderze |
| arkusze stylów / | W tym folderze zostanie zapisany skompilowany plik css |
| config.rb | Konfiguruj kompas - np. Ścieżka folderu, kompilacja sass |
Użyj kompasu
compass watch
Spowoduje to skompilowanie plików sass za każdym razem, gdy je zmienisz. Ścieżkę folderu sass można zmienić w pliku config.rb
Używanie CSS3 z kompasem
Na tej stronie można znaleźć pełne odniesienie, które komponenty CSS3 są obsługiwane
Aby użyć CSS3 w swoim projekcie, Compass zapewnia miksy do obsługi funkcji CSS3 w każdej przeglądarce. Na górze pliku Sass / Scss musisz określić, że chcesz używać kompasu
@import "compass/css3";
Promień granicy
Uwzględnij promień obramowania z kompasem w pliku sass:
div {
@include border-radius(4px);
}
Wyjście CSS
div {
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
Jak widać, możesz użyć normalnej nazwy CSS. Po prostu umieść @include przed nim i użyj (), aby ustawić swoją wartość.
Przykład Flexbox
.row {
@include display-flex;
@include flex-direction(row);
}
Wyjście CSS
.row {
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
Wniosek
To tylko dwa przykłady. Kompas zapewnia znacznie więcej miksów CSS3. Korzystanie z Compass jest bardzo przydatne i nie musisz się martwić, że zapomniałeś zdefiniować komponent CSS3 dla określonej przeglądarki. Jeśli przeglądarka obsługuje funkcję CSS3, kompas ją zdefiniuje.