Advertisement
  1. Web Design
  2. Sass

Sass do CSS: jak zachować przestrzeń po kompilacji

by
Read Time:3 minsLanguages:

Polish (Polski) translation by Mateusz Kurlit (you can also view the original English article)

Czy kiedykolwiek chciałeś zachować strukturę wizualną plików Sass po kompilacji do CSS bez utraty przestrzeni? W tym krótkim poradniku, pokażę ci jak to zrobić!

Obejrzyj poradnik

Ten poradnik jest dla osób, które chcą skompilować Sass do "rozszerzonej" formy. Jeśli kompilujesz "kompresując" lub "minimalizując", kwestia istniejącej przestrzeni traci znaczenie.

Problem

Wyobraź sobie, że masz kilka części kodu Sass, które są sformatowane w ten sposób, włącznie z pustymi wierszami na dole:

Po skompilowaniu ich w normalnych okolicznościach otrzymasz coś takiego:

Ale powiedzmy, że tak naprawdę chcesz otrzymać coś takiego:

Rozwiązanie

Zamierzamy rozwiązać problem korzystając z wtyczki Grunt o nazwie grunt-replace. Aby uzyskać więcej informacji na temat Grunt, zapoznaj się z poniższymi artykułami:

Wczytujemy grunt-replace razem z kilkoma innymi zależnościami do naszego pliku package.json jak pokazano poniżej:

Następnie, w pliku grunt.js musimy zaimplementować zadanie:

Dopasowanie

Uruchamiamy zadanie zastępowania po skompilowaniu naszego pliku Sass (zapoznaj się z plikami źródłowymi, aby uzyskać więcej informacji).

Zwróć uwagę na opcję patterns, która zawiera następujące informacje: 

Grunt zostanie poproszony o przejście przez skompilowany plik, znalezienie fragmentów /**/ i zastąpienie ich pustym ciągiem. Teraz musimy przejść przez fragmenty kodu Sass, umieścić komentarze /**/ w miejscach, w których chcemy zachować przestrzeń, a Grunt zrobi za nas resztę:

Podsumowanie

Wtyczka grunt-replace nadaje się idealnie do wyszukiwania wspólnych ciągów i zastępowaniu ich czymś innym, ilekroć uruchamiamy Grunt. W tym przypadku, to perfekcyjne narzędzie zapobiegające usuwaniu przestrzeni ze skompilowanego kodu Sass. Do czego jeszcze użyłbyś go?

Przydatne materiały

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.