preprocesor SASS

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

 

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