Dlaczego zacząłem pracować z preprocesorem CSS Stylus

Przez ostatnich kilka lat pracowałem z SASS. Byłem ślepo przywiązany do tego języka po kilku testach z innymi preprocesorami CSS.

Kilka dni temu zacząłem tworzyć projekt od zera i chciałem przeprowadzić badania w tej dziedzinie. Na początek zacząłem od SASS ale...

Pierwszy problem, który miałem, to różnice między SASS a SCSS. Uwielbiam języki oparte na wcięciach jak PUG (wcześniej JADE). Te języki oszczędzają czas i liczbę znaków w kodzie. Ale... wróćmy do SASS więc ... chciałem mieć podstawowe obiekty, które następnie można by iterować i tworzyć końcowe selektory z odpowiednimi deklaracjami.

W SASS:

$h1: ( font-size: 40px, font-family: Arial, weight: 100, color: black, text-decoration: none)

Jak widzisz, SASS wymaga, aby ten obiekt był w jednej linii. W przypadku gdy użyłoby się SCSS, które mogłoby mieć obiekty wieloliniowe, mogłoby to powodować niespójność gdy użyjemy w niektórych plikach SASS, a w niektórych SCSS. Ale... zacząłem sprawdzać czy mógłbym to zrobić w jakiś inny sposób.

Stylus!

Więc użycie Stylus ułatwiło mi życie:

$_btn_success = {
  font-family: Arial,
  font-size: 14px,
  font-weight: normal,
  color: white,
  background: blue,
  border-radius: 5px,
  padding: 5px 15px,
  display: inline-block
}

Mogę trzymać mój obiekt tak. Dodatkowo mogę użyć funkcji do iterowania tego rodzaju obiektu tak:

for key, value in hash
    {key}: value

Więc gdy stworzę funkcję taką jak:

CreatePropertiesFromHash(hash)
  for key, value in hash
    {key}: value</code>

Mogę jej użyć do tworzenia pełnych opisów selektorów opartych na wcześniej utworzonym obiekcie tak:

$_btn_success = {
  font-family: Arial,
  font-size: 14px,
  font-weight: normal,
  color: white,
  background: blue,
  border-radius: 5px,
  padding: 5px 15px,
  display: inline-block
}

CreatePropertiesFromHash(hash)
  for key, value in hash
    {key}: value

.btn--success
  CreatePropertiesFromHash($_btn_success)

Ten kod zostanie przekształcony w:

.btn--success {
  font-family: Arial;
  font-size: 14px;
  font-weight: normal;
  color: white;
  background: blue;
  border-radius: 5px;
  padding: 5px 15px;
  display: inline-block;
}

Dlaczego uważam, że Stylus może poprawić mój przepływ pracy?

Obecnie przeszedłem na ten preprocesor CSS ze względu na jego prostotę. Może być tak prosty jak SASS lub nawet ulepszony SASS. Oczywiście moja poprzednia miłość do SASS nie zardzewieje, ale zmiany pokazują nam inny punkt widzenia.

Po następnej dawce Stylus podzielę się z Wami również moimi przemyśleniami!

Wypróbuj Stylus na własną rękę!