Szybka nauka Sass (SCSS)

Sass (scss)

Poziom średnio-zaawansowany

Sass (Syntactically awesome style sheets), znany również jako CSS with superpowers, jest to preprocesor, który czyni opracowywanie stylów dla naszych projektów, znacznie łatwiejszym, przyjemniejszym, szybszym. Pozwala również znacząco ulepszyć samą strukturę kodów, używać zmiennych oraz tworzyć elementy wielokrotnego użytku (mixins, placeholders), co znacząco poprawia również łatwość utrzymania i modyfikacji.

Szybka nauka Sass (SCSS)

O Sass (scss) wspominaliśmy już, oraz używaliśmy w artykułach o strukturze CSS oraz konwencjach i metodologiach dla CSS i Sass. Polecam poczytać:

część 1

część 2

Zobacz także:

https://en.wikipedia.org/wiki/Sass_(stylesheet_language)

Po co nam nauka Sass?

Cóż, pisanie kodu CSS jest proste. Pisanie kodów CSS dla większych projektów, które łatwo utrzymywać już nie jest proste. Potrzeba narzędzi oraz metodologii, które to uproszczą, przyśpieszą, oraz po prostu nakierują programistów na właściwy tor.

Jednym z takich narzędzi jest stary, poczciwy Less CSS, jednak od dawna go nie używam. Jego miejsce w moim przypadku zastąpił Sass, który po prostu uwielbiam.

Wydawnictwo Strefa Kursów

Dobry przykład daje również Bootstrap 4, który w przeszłości był pisany z użyciem Less, natomiast wersja 4 została napisana w Sass!

Ale wracajmy to nauki SCSS. Cały preprocessing pomaga upodobnić pisanie CSS do ‚normalnego’ programowania, w którym mamy takie konstrukcje jak zmienne i funkcje. Fajnie? No pewex!

Przykład – zmienne:

// some-file.scss

$my-color: #333444;

p {
  color: $my-color;
}

Na zmiennych możemy oczywiście wykonywać operacje arytmetyczne. Kod umieszczamy w partialach i plikach, zgodnie z ich przeznaczeniem, trzymamy porządek. A całość na koniec ukazuje nam się jako gotowy plik CSS.

Przykład:

sass –watch input.scss output.css

Oczywiście nie musimy się babrać z tym wszystkim manualnie. Są odpowiednie narzędzia automatyzujące. A jeszcze lepiej – jeśli używamy frameworka, za pewne posiada on możliwość integracji i automatyzacji, aby łatwo i przyjemnie korzystać z Sass. Ja dla przykładu używam głównie Ruby on Rails. Do tego webpack, es6, vue.js i… niech stanie się magia.


Przy okazji można rozszerzyć konfigurację, aby używać np. auto-prefixera i nie martwić się o prefixy CSS dla różnych przeglądarek – narzędzie zrobi to za nas, generując wynikowy CSS:

https://autoprefixer.github.io

Jazda!

Do dzieła. Opanujmy zmienne, zagnieżdżenia i mixiny. Właściwe prosty guide (Sass w pigułce), dostępny na oficjalnej stronie:

https://sass-lang.com/guide

wystarczy, aby efektywnie pisać w użyciem Sass!

Czy nauka Sass może trwać 15 minut? Najwyraźniej tak:

http://tutorialzine.com/2016/01/learn-sass-in-15-minutes

Podobne artykuły również warto przejrzeć:

https://scotch.io/tutorials/getting-started-with-sass

http://www.hongkiat.com/blog/getting-started-saas

https://www.tutorialspoint.com/sass

Idąc dalej, bądź dla dociekliwych, dobrze będzie zagłębić się nieco bardziej, korzystając z kompletnej dokumentacji:

https://sass-lang.com/documentation/file.SASS_REFERENCE.html

Co jeszcze? Burbon!

Bourbon

Nie chodzi niestety o szklankę burbona, która czasem by się przydała programistom 😉

Chodzi o http://bourbon.io, czyli bibliotekę Sass, która zawiera mixiny, funkcje, słowem pre-definiowane dodatki przyśpieszające programowanie. Oczywiście cross-browser.

Warto się zapoznać, ponieważ Bourbon może już dostarczać to, czego akurat szukamy:

http://bourbon.io/docs

https://www.sitepoint.com/getting-started-sass-bourbon

Bourbon to nie jedyne rozwiązanie tego typu:

http://www.hongkiat.com/blog/mixin-library-for-sass

Wydawnictwo Strefa Kursów

Składnia (syntax) – .sass vs .scss

Już o tym wspominałem w innym artykule. Sass daje 2 warianty składni. Cóż, gusta są różne, ale najważniejsze to konsekwentne trzymanie się wybranej składni. Poza tym, używanie podejścia .scss zamiast .sass jest zalecane w dobrych praktykach:

https://sass-guidelin.es

Więcej na temat różnic:

https://www.sitepoint.com/whats-difference-sass-scss

http://thesassway.com/editorial/sass-vs-scss-which-syntax-is-better

http://www.wrock.org/css-vs-scss-vs-sass-what-is-difference-between-them

Zobacz także:

Na pograniczu: LESS CSS

Twitter Bootstrap w pigułce

https://www.sitepoint.com/sass-features-may-never-tried

Mixin vs placeholder? Subtelna różnica, którą jednak warto znać:

https://www.sitepoint.com/sass-mixin-placeholder

http://krasimirtsonev.com/blog/article/SASS-mixins-extends-and-placeholders-differences-use-cases

Sass variables in JavaScript (Rails)

Więcej zasobów? Awesome Sass to perełka:

https://github.com/Famolus/awesome-sass

Geek level – lodash zaimplementowany w Sass:

http://davidkpiano.github.io/sassdash/sassdoc/index.html

Polecam również książkę:

Sass. Nowoczesne arkusze stylów

Podsumowanie

Sass to potężne narzędzie jeśli chodzi o produktywność, a także komfort samych programistów. Z pewnością warto poświęcić chwilę na jego opanowanie, zwłaszcza że wcale nie potrzeba na to dużo czasu. Duże za to mogą być korzyści. Sass now!

Możesz skomentować leave a response, lub podać trackback z własnej strony.