preprocesor SASS

Syntactical Awesome StyleSheet– język skryptowy, którego kod przetwarzany jest do plików wynikowych kaskadowych arkuszy stylów – CSS.

SASS można rozumieć, jako dodatkową warstwę lub rozszerzenie na CSS. Ponieważ przeglądarki nie mogą odczytywać bezpośrednio plików SASS, dlatego potrzebujemy kompilatorów, które mogą konwertować pliki SASS do pliku CSS czytelnego dla przeglądarki.

SASS dostarcza wiele przydatnymi funkcjami i właściwości, na przykład istnieją zmienne, zagnieżdżanie, czy pisanie funkcji.

Tutaj znajdziesz więcej informacji:

• strona główna SASS.
• dokumentacja

Uruchomienie SASS

1. Instalacja Ruby – download
2. odpalenie konsoli (terminal/cmd)
3. sprawdzenie czy mamy już Ruby ruby -v
4. sprawdzamy czy mamy gem gem --version
5. instalacja SASS
   1. na systemie Windows gem install sass
   2. na Mac OS lub Linux sudo gem install sass

 

Uruchomienie SASS z node.js

1. instalacja node.js – download z nodejs.org
2. command terminal – sprawdzenie wersji node node -v
3. stworzenie pliku package.json – zawierającego definicje projektu – npm init
   1. name – brana z nazwy katalogu
   2. version (1.0.0)
   3. description
   4. entry point (index.js)
   5. test command
   6. git repository
   7. keywords
   8. author
   9. license (ISC)
4. instalacja sass kompilatora i dodanie go do devDependencies – npm install node-sass –save-dev
5. instalacja potrzebnych modułów z zapisanego pliku package.json – npm install
6. odinstalowanie npm uninstall jquery –save – jeśli był dodany jako dependencies
7. modyfikacja script w package.json – dodanie polecenie do kompilacji sass na css i watchowania zdarzeń – „compile:sass” : ” node-sass sass/main.sass css/style.css -w”
8. command line – npm run compile:sass
9. odświeżanie plików w przeglądarce po ich zmianie, instalacja globalna – npm install live-server -g (linux sudo npm install…)
10. command line w katalogu projektu – live server – otwiera domyślną przeglądarkę z otwartą stroną z portem 127.0.0.1:8080

framework:

• compass
• inuit.css

 

Preprocesor SASS odmiany:

• SASS – bez klamer i średników na końcu lini
• SCSS – zawiera klamry i średniki

SASS	SCSS
indentation	curly braces & semi-colons
strict rules for whitespace	ignores whitespace
=my-mixin	@mixin my-mixin
+my-mixin	@include my-mixin
@import foo	@import foo
@extend foo	@extend foo

 

kompilacja online: (do sprawdzenia)

• http://codepen.io/pen
• http://jsbin.com/
• http://cssdeck.com/labs
• http://fiddlesalad.com/sass/
• http://beautifytools.com/sass-compiler.php
• http://devotter.com/sass-compiler
• http://sassmeister.com/
• http://rendera.herokuapp.com/

 

korzyści:

• zmienne
• wstawki
• porcjowanie plików, plik partials oznaczony _ przed nazwą – _mixins.sass
• dziedziczenie selektorów
• zagnieżdzanie
• pętle warunkowe
• pętle iteracyjne

 

SASS – build process – npm

1. compile:sass – npm install compile-sass –save-dev
2. concat:css – npm install concat –save-dev
   1. concat -o output.css ./1.css ./2.css ./3.css
3. prefix:css – npm instal autoprefixer –save-dev + npm install postcss-cli –save-dev (autoprefixer jest częścią paczki postcss)
   1. -b – okresla browser i x ostatnich wersji
   2. -o – output plik
4. compress:css – za pomocą paczki node-sass
   1. –output-style compressed
5. build:css – npm install npm-run-all –save-dev – npm run build:css
   1. –parallel – uruchamianie tasków jednocześnie

 

uruchomienie pojedynczego taska – npm run compile:sass

plik packages,json:

"devserver": "live-server",
"start": "npm-run-all --parallel devserver watch:sass",
"watch:sass": "node-sass sass/main.scss css/style.css -w",
"compile:sass": "node-sass sass/main.scss css/style.comp.css",
"concat:css": "concat -o css/style.concat.css css/icon-font.css css/style.comp.css",
"prefix:css": "postcss --use autoprefixer -b 'last 10 versions' css/style.concat.css -o css/style.prefix.css",
"compress:css": "node-sass css/style.prefix.css css/style.css --output-style compressed",
"build:css": "npm-run-all compile:sass concat:css prefix:css compress:css"

Komendy SASS

• sass-watch – przegląda katalog w poszukiwaniu plików do przetworzenia
• sass-update – jednorazowa kompilacja
• sass-check – sprawdza składnię bez kompilacji
• sass-style NAME – styl css na wyjściu, jako NAME:
  • nested
  • compact
  • compressed
  • expanded
• sass-compas – importowanie modułów Compass, ładuje konfigurację projektu
• sass-help – pomoc
• watch – kompiluje pliki gdy zostaną zmienione

 

Komendy Compass

• compass clean – usuwa wygenerowane pliki i czyści cashe
• compile – kompiluje pliki SASS do CSS
• create – tworzy nowy projekt
• init – dodaje Compass do projektu

 

Komendy SASS w Start Command Prompt with Ruby

• sass–watch sass/styles.scss : css/styles.css

http://grafmag.pl/artykuly/wstep-do-sass-prepreocesora-jezyka-css/

http://sass-lang.com/

 

 

kompilacja z poziomu konsoli z Ruby

 

sass [options] [input] [outpu]

sass –help – pomoc

sass –watch sass/styles.scss:css/styles.css – śledzenie

Ctrl – C – zakończenie śledzenia, potwierdzenie przez T/N

sass –watch sass/styles.scss:css/styles.css –style compressed – otrzymujemy skompresowany plik css

 

sass shell – sass -i

 

Konwerter css – scss:

http://sebastianpontow.de/css2compass/

 

Frameworks:

• http://oddbird.net/susy/
• http://breakpoint-sass.com/
• http://compass-style.org/
• http://compass-style.org/reference/compass/

 

Funkcje kolorów:

http://jackiebalzer.com/color

 

 

Partials in SASS

• abstracts – katalog z plikami w których kod nie jest kompilowany na css
  • _variables.sass
  • _mixins.sass
  • _functions.sass
• base
  • _utilities.sass
  • _animations.sass
  • _typo.sass
  • _base.sass
• components – building blocks/ organisms w Atomic Design nie zależne, re-używalne elementy, które mogą wystąpić w dowolnym miejscu strony
• layouts – elementy które są na każdej stronie, trzyma razem components – jak templates w Atomic Design
  • _header.sass
  • _footer.sass
• pages – specyficzne style tylko dla jednej, określonej strony, występujące tylko tam
  • _home.sass
  • _contact.sass
• themes – kiedy uzywamy różnych tematów dla aplikacji
• vedors – inne pliki css które są potrzebne do działania strony/aplikacji
  • bootstrap.css
  • icons.css