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::Rack

Merbjest 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] = :compact

Można również ustawić opcje w init.rb akt Merb stosując następujący wiersz -

Merb::Plugin.config[:sass][:style] = :compact

Dostę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 -

  • :auto- Zawiera względne identyfikatory URI. Jeśli nie ma względnego URI, używa URI „file:”.

  • :file - Używa identyfikatorów URI „file:”, które działają lokalnie, a nie na zdalnym serwerze.

  • :inline - Zawiera tekst źródłowy w mapie źródłowej, który jest używany do tworzenia dużych plików map źródłowych.

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 .