Korzystanie z Sass
SASS jest potężniejszy i stabilniejszy, zapewniając moc podstawowemu językowi dzięki rozszerzeniu CSS. Możesz używać SASS na trzy różne sposoby -
- Jako narzędzie wiersza poleceń
- Jako moduł Ruby
- Jako wtyczka do platformy Rack
Jeśli używasz SASS w systemie Windows, musisz zainstalować Rubypierwszy. Więcej informacji na temat instalacji Rubiego można znaleźć w rozdziale Instalacja SASS .
W poniższej tabeli przedstawiono polecenia, które są używane do wykonywania kodu SASS -
| S. Nie. | Polecenie i opis |
|---|---|
| 1 | sass input.scss output.css Służy do uruchamiania kodu SASS z wiersza poleceń. |
| 2 | sass --watch input.scss:output.css Informuje SASS, aby obejrzał plik i zaktualizował CSS za każdym razem, gdy plik SASS się zmieni. |
| 3 | sass --watch app/sass:public/stylesheets Służy do oglądania całego katalogu, jeśli SASS zawiera wiele plików w katalogu. |
Wtyczka Rack / Rails / Merb
Rackto interfejs serwera WWW, który jest używany do tworzenia aplikacji internetowych w języku Ruby. Aby uzyskać informacje na temat Rack, wystarczy odwiedzić ten link .
Możesz włączyć SASS w Rails 3 wersja przy użyciu environment.rb plik obecny pod configteczka. Włącz SASS dla Rails 3 używając następującego kodu -
config.gem "sass"Możesz użyć następującego wiersza do Gemfile dla Rails 3 (i nowszych wersji), jako -
gem "sass"Railsto platforma internetowa typu open source, która wykorzystuje standardy sieciowe, takie jak JSON, HTML, CSS i JavaScript do wyświetlania interfejsu użytkownika. Aby pracować z Railsami, musisz mieć podstawową wiedzę na temat języka Ruby i programowania obiektowego. Dowiedz się więcej o frameworku Railsów tutaj .
Jeśli chcesz włączyć SASS w Rack aplikacji, dodaj następujące wiersze do pliku config.ru plik, który znajduje się w katalogu głównym aplikacji -
require 'sass/plugin/rack'
use Sass::Plugin::RackMerbjest frameworkiem aplikacji internetowych, który zapewnia Railsom szybkość i modułowość. Aby dowiedzieć się więcej o Merb, otwórz ten link .
Możesz włączyć SASS w Merb dodając następujący wiersz do config/dependencies.rb plik -
dependency "merb-haml"Buforowanie
SASS buforuje dokumenty, takie jak szablony i części składowe, których można użyć ponownie bez ich analizowania, chyba że uległy zmianie. Przyspiesza kompilację plików SASS i działa jeszcze lepiej, gdy szablony są podzielone na oddzielne pliki, które są importowane do jednego dużego pliku. Jeśli usuniesz pliki z pamięci podręcznej, zostaną one ponownie wygenerowane podczas następnej kompilacji.
Opcje
Możesz ustawić opcje w pliku environment.rb w Railsach lub pliku config.ru aplikacji Rack, używając następującego wiersza -
Sass::Plugin.options[:style] = :compactMożna również ustawić opcje w init.rb akt Merb stosując następujący wiersz -
Merb::Plugin.config[:sass][:style] = :compactDostępnych jest kilka opcji z SASS i SCSS, jak opisano w poniższej tabeli -
| S. Nie. | Opcja i opis |
|---|---|
| 1 | :style Wyświetla styl wyniku. |
| 2 | :syntax Możesz użyć wciętej składni dla sass i składni rozszerzenia CSS dla scss . |
| 3 | :property_syntax Używa wciętej składni do korzystania z właściwości. Jeśli nie jest poprawne, zgłosi błąd. Weźmy na przykład pod uwagę „background: # F5F5F5”, w którym tło jest nazwą właściwości, a # F5F5F5 jest jej wartością właściwości. Po nazwie właściwości należy użyć dwukropka. |
| 4 | :cache Przyspiesza kompilację plików SASS. Domyślnie jest ustawiony na true. |
| 5 | :read_cache Odczytuje tylko pliki SASS, jeśli pamięć podręczna nie jest ustawiona, a ustawiona jest pamięć podręczna read_cache . |
| 6 | :cache_store Może być używany do przechowywania i uzyskiwania dostępu do zbuforowanych wyników poprzez ustawienie go na wystąpienie Sass :: CacheStores :: Base . |
| 7 | :never_update Nigdy nie powinien aktualizować pliku CSS, jeśli pliki szablonu ulegną zmianie. Domyślnie jest ustawiona na false. |
| 8 | :always_update Powinien aktualizować plik CSS po każdej zmianie plików szablonu. |
| 9 | :always_check Powinien sprawdzać dostępność aktualizacji przy każdym uruchomieniu serwera. Ponownie skompiluje i nadpisze plik CSS, jeśli istnieje aktualizacja w pliku szablonu SASS. |
| 10 | :poll Używa zaplecza odpytywania dla Sass :: Plugin :: Compiler # watch (który obserwuje szablon i aktualizację plików CSS) , ustawiając go na true. |
| 11 | :full_exception Wyświetla opis błędu za każdym razem, gdy wystąpi wyjątek w kodzie SASS w wygenerowanym pliku CSS. Wyświetla numer wiersza, w którym wystąpił błąd, wraz ze źródłem w pliku CSS. |
| 12 | :template_location Zawiera ścieżkę do katalogu szablonów w aplikacji. |
| 13 | :css_location Zawiera ścieżkę do arkuszy stylów CSS w aplikacji. |
| 14 | :unix_newlines Zapewnia znaki nowej linii w stylu uniksowym podczas zapisywania plików, ustawiając ją na true. |
| 15 | :filename Jest to nazwa nazwy pliku, która jest wyświetlana i używana do zgłaszania błędów. |
| 16 | :line Określa pierwszy wiersz szablonu SASS i wyświetla numery wierszy dla błędów. |
| 17 | :load_paths Służy do ładowania ścieżek do szablonu SASS, które są zawarte za pomocą dyrektywy @import . |
| 18 | :filesystem_importer Służy do importowania plików z systemu plików, który używa podklasy Sass :: Importers :: Base do obsługi ścieżek ładowania ciągów. |
| 19 | :sourcemap Generuje mapy źródłowe, które instruują przeglądarkę, aby znaleźć style SASS. Używa trzech wartości -
|
| 20 | :line_numbers Wyświetla numer wiersza błędów zgłoszonych w pliku CSS, ustawiając go na true. |
| 21 | :trace_selectors Pomaga w śledzeniu selektorów importu i mikserów, gdy jest ustawiona na true. |
| 22 | :debug_info Dostarcza informacje debugowania pliku SASS przy użyciu numeru linii i pliku, gdy jest ustawione na true. |
| 23 | :custom Udostępnia dane funkcjom SASS w oddzielnych aplikacjach. |
| 24 | :quiet Wyłącza ostrzeżenia, ustawiając je na true. |
Wybór składni
Możesz określić, której składni używasz w szablonie SASS, używając narzędzia wiersza poleceń SASS. Domyślnie SASS używa wciętej składni, która jest alternatywą dla składni SCSS opartej na CSS. Możesz użyć programu wiersza poleceń SCSS, który jest podobny do programu SASS, ale domyślnie traktuje składnię jako SCSS.
Kodowania
SASS wykorzystuje kodowanie znaków arkuszy stylów, określając następujące specyfikacje CSS -
Najpierw sprawdza bajt Unicode, następnie deklarację @charset, a następnie kodowanie napisów Ruby.
Następnie, jeśli nic nie jest ustawione, wówczas uznaje kodowanie zestawu znaków za UTF-8 .
Określ kodowanie znaków jawnie przy użyciu deklaracji @charset . Po prostu użyj „@charset nazwa kodowania” na początku arkusza stylów, a SASS założy, że jest to podane kodowanie znaków.
Jeśli plik wyjściowy SASS zawiera znaki spoza zestawu ASCII, użyje deklaracji @charset .