LazySass: Mixiny oparte na Emmet w Sass

Jestem tak leniwy, że zapomniałem napisać jakikolwiek post na tej stronie przez ostatnich kilka miesięcy… A ten post również będzie o mojej leniwości :).

Pracowałem nad nową skórką mojego bloga przez ostatnich kilka miesięcy - ostatnich kilka miesięcy z powodu wielu projektów na pokładzie. To co zrobiłem podczas pracy nad tymi projektami to stworzenie własnego małego frameworka. To nie jest ten rodzaj frameworków, które są znane na całym świecie jak Foundation czy Bootstrap. To raczej związane z pisaniem własnych atomowych mixinów w SASS, aby zmniejszyć powódź kodu w projekcie. Oparłem się trochę na projekcie Emmet i liczeniu jednostek z projektu Foundation (piksele na remy).

LazySASS Idea

Projekt został rozpoczęty podczas pisania mojej książki "Professional CSS3" (wydanej przez PACKT Publishing) i był nazywany pojedynczym plikiem _shorts.sass. Była to kolekcja krótkich form dobrze znanych reguł CSS.

=tdn
    text-decoration: none

=tdu
    text-decoration: uppercase

=tac
    text-align: center

=tar
    text-align: right

=tal
    text-align: left

=ttu
    text-transform: uppercase

=ttl
    text-transform: lowercase

=di
    display: inline

=db
    display: block

=dib
    display: inline-block

=m0a
    margin: 0 auto

Było to używane do skracania najbardziej znanych reguł CSS w końcowym kodzie tak:

.className
  +di // display: inline-block
  +tac // text-align: center
  +ttu // text-transform: uppercase

Tak… dość mała zmiana i… nieczytelna. Tworzy dodatkowy stos nieznanych reguł… wygląda jak dodatkowy nowy język. Ale kto nie pracuje z EMMET (wcześniej znanym jako ZenCoding)? To nie jest inny nowy język, po prostu oparty na podstawach EMMET.

Następny krok - LazySASS rozszerzony

Następnym problemem, który dla mnie był najbardziej powtarzalny, były poprawne jednostki. Przyczepiłem się do REM zamiast pikseli, co sprawiło, że układ był bardziej dostosowywalny. Używałem remCalc(), który zamieniał piksele na REMy. Ale problemem jest powtarzanie tej funkcji. Zdefiniujmy remCalc w SASS:

@function remCalc($value)
   $rem: $value / 16px
   @return #{$rem}rem

Więc za każdym razem gdy chciałem zastosować wartość REM, musiałem wywołać funkcję:

h1
  font-size: remCalc(32px)

To wygenerowało:

h1 {
  font-size: 2rem;
}

Ale… co jeśli chciałbym zmienić font na przykład na 21px i daje mi to 1.3125rem? W inspektorze trudno jest to pomnożyć i wiedzieć co było podstawą tego równania. Przechodziłem z jednej jednostki na drugą, ale można to oprzeć na jednej zmiennej trzymanej globalnie i jednym mixinie:

$UNIT_REM: true // pixels / rems

@function _countUnits($value)
  @if ($UNIT_REM)
    $rem: $value / 16px
    @return #{$rem}rem
  @else
    @return $value

Teraz musimy zastosować mixiny, które konwertują piksele na remy tak:

=mt($value)
  margin-top: _countUnits($value)

=ml($value)
  margin-left: _countUnits($value)

=mr($value)
  margin-right: _countUnits($value)

=mb($value)
  margin-bottom: _countUnits($value)

Za każdym razem gdy chcesz zmienić na piksele, ustawiasz $UNIT_REM na false. Teraz łatwiej jest sprawdzać jednostki rozmiaru.

Podsumujmy

Więc teraz gdy chcesz opisać element, możesz użyć kodu takiego jak ten:

.single_article__book__content
  +posa
  +t(0px)
  +w(470px)

.single_article__book__img
  +r(0px)
  +t(0px)
  +fr
  +posr

... skompiluje się do:

.single_article__book__content {
  position: absolute;
  top: 0;
  width: 465px;
}
.single_article__book__img {
  right: 0;
  top: 0;
  float: right;
  position: relative;
}

…lub:

.single_article__book__content {
  position: absolute;
  top: 0rem;
  width: 29.375rem;
}

.single_article__book__img {
  right: 0rem;
  top: 0rem;
  float: right;
  position: relative;
}

… w przypadku ustawionych jednostek na REMy.

LazySASS

Kod LazySASS jest dostępny tutaj: https://github.com/fedojo/LazySASS/blob/master/_shorts.sass!