Czy istnieje sposób kompilacji plików LESS do CSS (aby każda przeglądarka nie musiała)?

20

Zastanawiam się nad użyciem LESS, ale kulę się na myśl, że przeglądarka ma wyłączoną obsługę JavaScript i mój CSS jest nieczytelny (a strona wygląda okropnie).

Obraża też inżyniera we mnie, aby zmusić każdą przeglądarkę do „skompilowania” tego pliku Less do pliku .css, kiedy możemy go „skompilować” raz za każdym razem, gdy go modyfikujemy.

css css-framework Clay Nichols
źródło
1
@ Anonimowy - Jeśli przejdziesz do kasy MNIEJ, powinieneś także spojrzeć na SASS i COMPASS.
Sorcy
Rysik i OOCSS są również podobnymi produktami.
Lèse majesté
1
Wysłałem
3
Nie wiedziałem, że ktoś kompiluje MNIE w przeglądarkach!
Kenny Evitt,

Odpowiedzi:

17

Tak. Możesz używać aplikacji, która automatycznie kompiluje pliki LESS do CSS na twoim komputerze programistycznym podczas pisania kodu. Następnie po prostu prześlij wygenerowany plik CSS na serwer, gdy skończysz programowanie.

Nacięcie
źródło
11

Używam SimpLESS - przeciągnij, upuść, gotowe.

Sorcy
źródło
10

LESS zawiera plik binarny (lessc), który pozwala wstępnie skompilować pliki .less. Używasz go jako takiego:

 $ lessc styles.less > styles.css

Ale myślę, że większość ludzi po prostu używa polecenia lessc -wlub lessc --watchdo automatycznej ponownej kompilacji arkusza stylów CSS przy każdej aktualizacji pliku LESS. Możesz także poprosić lessc o zminimalizowanie CSS, np lessc -w -x.

Edycja: Aby to wyjaśnić, lessc jest dostarczany z instalacją po stronie serwera (tj. Gdy instalujesz mniej za pomocą menedżera pakietów node.js). Ale możesz pobrać go ręcznie z GitHub .

lekcja znajduje się na /bin/lessc. To jest oczywiście * nix binarny (powinien także działać na komputerze Mac), ale nie jest binarny system Windows ( lessc.exe ) na podstawie bez kropki, które jest inny kompilator Okna MNIEJ.

Aktualizacja: służy less-watchdo automatycznej kompilacji.

Alternatywnie, wielu programistów korzysta obecnie z programów grunturuchamiających zadania, takich jak obsługa automatyzacji kompilacji (kompilacja, minimalizacja, testowanie itp.). Korzystanie grunt-contrib-watch, grunt-contrib-lessi grunt-contrib-livereloadmożna naprawdę usprawnić przepływ pracy rozwojowej.

Na przykład, jeśli używasz yodo rusztowania nowego projektu internetowego, jest wstępnie skonfigurowany do oglądania plików LESS / CSS / JS / HTML pod kątem zmian i rekompilacji niezbędnych części projektu w razie potrzeby. Wystarczy uruchomić grunt serve, a będziesz gotowy do kodowania bez martwienia się o ręczne kompilowanie (LESS / SASS / CoffeeScript) / minimalizowanie / konkatenację kodu lub ręczne odświeżanie przeglądarki jak jaskiniowiec ...

Lèse majesté
źródło
1
Nie jestem pewien, jakiej wersji używasz. W najnowszej wersji 1.3.0 nie ma funkcji --watch. Prośba o ściągnięcie funkcji --watch została zestrzelona 9 miesięcy temu. github.com/cloudhead/less.js/pull/246
Gerard Roche,
@BullfrogBlues: Przepraszam, to było ze starej lekcji opartej na Ruby.
Lèse majesté
Uwaga: „zmieniono nazwę less-watch na fs-change. Zamiast tego użyj:. npm install -g fs-change”
Andrew Lott,
6

Istnieje wiele opcji kompilacji LESS do CSS na serwerze, a ta, którą wybierzesz, prawdopodobnie będzie zależeć od tego, czego używasz w pozostałej części strony.

  • Jeśli użyjesz node.js, oryginalne lesscss wykonają zadanie.
  • Jeśli używasz PHP, lessphp . Ma nieco śmieciowy interfejs API, jeśli chodzi o przekazywanie zmiennych z PHP, ale spełnia swoje zadanie.
  • Jeśli używasz Ruby, SASS nie jest MNIEJSZY, ale jest tak podobny, że kiedy przestawiłem się z SASS (projekt osobisty) na LESS (projekt PHP w pracy), nie zauważyłem żadnych różnic poza rozszerzeniem pliku. Posiada również przydatną bibliotekę miksów - COMPASS . Nie próbowałem ich używać z MNIEJ, ale spodziewam się, że będą działać. (Najwyraźniej MNIEJ pierwotnie był Ruby, więc prawdopodobnie gdzieś tam pływa stary kompilator).
  • Jeśli używasz ASP.Net, jest .less . Nie korzystałem z tego, więc nie wiem, jak dobrze działa.
  • Jeśli używasz Javy, lesscss4j kończy kompilację z oryginalnym środowiskiem skryptowym Rhino wbudowanym w LESS i Java 6.
  • Jeśli używasz Perla, w CPAN jest moduł LESSp .
Peter Taylor
źródło
2
Jest to kompilator Ruby, który pochodzi ze starym MNIEJ Ruby gem, ale to nie jest już aktualizowany tak wiele nowych funkcji nie będzie działać na nim. Tak więc, jeśli używasz Ruby, polecam po prostu użycie lessckompilatora binarnego opartego na najnowszej wersji less.js.
Lèse majesté
@ Lèsemajesté, wybrałbym SASS, ale nie chciałem być oskarżony o umyślne ignorowanie możliwości kompilacji LESS w Ruby.
Peter Taylor
1
Tak, myślę, że SASS byłaby najlepszą opcją dla Ruby, ponieważ klejnot LESS został wycofany od czasu przejścia na JS.
Lèse majesté