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