Autor Zpráva
joe
Profil
Ahoj,

jaké používáte preprocesory na CSS - a kvůli čemu? Hledám nejlepšího kandidáta, kterého se minimálně nějakou dobu nepustím a budu ho na svých projektech používat.

Zatím používám LESS, ale menší zkušenosti mám i se Stylusem a Sass (Compass).

Chtěl jsem zkusit Compass, ale bohužel se mi ho nedaří jednoduše zprovoznit na projektu a zdá se mi nějak moc zabugovaný na to, že je poměrně využíván (na Windows nefunguje sledování souborů, nefunguje s Gulpem pokud mám svou adresářovou strukturu, ...), ale líbí se mi vytváření spritů, ale zase o to víc trvá kompilace souborů (?)

Jak efektivně tvořit spritové obrázky (automatizovaně?)

+ vše kolem CSS s čím byste se chtěli pochlubit :)
Kcko
Profil
joe:
Na windows to samozřejmě funguje, stáhneš RubyGem, nainstaluješ compass, pustíš příkazovou řádku, pustíš compass watch a jedeš ... zvládl jsem to já, musí to zvládnout každý.

Less je imho sra*ka proti kombinaci Sass + Compass (SCSS), neumožnuje spoustu věcí a syntaxe je mi bližší jako PHP programátorovi.
Stylus jsem nezkoušel, přijde mi zbytečně složitej a komplikovanej (a syntax se mi taky nelíbí).

Generování stojí režii, ale za ten luxus to stojí.
Jestli chceš do Sassu (SCSS) proniknout doporučuji hugogiraudel.com (je to odborník).

Bez SCSS už ani ránu, nedokážu si představit psát projekt v čistém CSS.
joe
Profil
Kcko:
pustíš compass watch a jedeš
V tom je ten problém, nejedu, po spuštění compass watch na Windows vše vypadá, že je v pořádku (vypíše >>> Compass is watching for changes. Press Ctrl-C to Stop), ale při jakékoli změně v souborech, které by to mělo překompilovat do CSS to neudělá vůbec nic, do konzole se nic nevypisuje. (Po příkazu compass compile kompilace proběhne v pořádku).

Řekl jsem si, že to obejdu pomocí úkolu v Gulpu, kde pokud jsou gulpfile.js, config.fb a složky pro sass soubory na stejné úrovni, vše funguje. Pokud ale mám složky se sass soubory zanořené jinde, píše to tuto chybu

Individual stylesheets must be in the sass directory.

Problémy jsem samozřejmě hledal.

Možná mám problém jinde, jaký OS používáš?
Kcko
Profil
joe:
To je zvláštní ... používám to na WIN 7, kolega to má na WIN 8, další kolega ma OSX.
Opravdu stačí nainstalovat ten RubyGems, compass a pak to pustit.

Máš v adresáři ve kterém to pouštíš config.rb?
joe
Profil
Kcko:
Pořád mi to nefunguje, zkusil jsem to všechno znovu, stáhnul jsem Ruby 2.0.0-p481 (x64), mám 64 bitové Windows 7. Vytvořil jsem si na disku C složku kompas a spustil cmd. Nainstaloval jsem Compass pomocí gem install compass, v příkazovém řádku jsem se dostal do složky, kde jsem dal compass create, pak jsem spustil compass watch a zkusil zeditovat nějaký *.scss soubor, nic se nestalo., nepřekompilovalo.

Soubor config.rb samozřejmě mám a mám v něm

require 'compass/import-once/activate'
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

Neměl bys nějaký nápad, jak to rozběhat? Vypadá to, že tento problém se táhne už dlouho.
Kcko
Profil
joe:
Můj config.rb vypadá skoro stejně s tím rozdílem, že compass importuji v hlavním scss souboru.

_core.scss
/* Internal
---------------------------------------------------------------------------------------------------- */
@import "compass"; // the most important framework - internal via ruby
@import "rgbapng";

config.rb
# Require any additional compass plugins here.
require "rgbapng" // tohle je plugin nepotrebujes


# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "assets/css"
sass_dir = "vendor/sass"
images_dir = "assets/gfx"
javascripts_dir = "assets/js"
cache_path = 'vendor/.sass-cache'


#sass_options = {:debug_info => true}

output_style =  :expanded


# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = true


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

Tak vyhod ten init s compassem z RB a vlož to do scss souboru a zkus to takhle. Jinak pak nevím, Gulp nepoužívám. Ale známý co ted najel na Grunt/Bower/Libsas mi popisoval taky něco podobného... tak až se k tomu dostanu (tak za půl roku, ted prožívám orgie s Nette ;) .. dám vědět pokud to nevyřešíš - ale o tom pochybuji, jsi šikovný a hlavně to nevzdávej - je to skvost.)
joe
Profil
Kcko:
Watcher od Compass se mi nepodařilo rozběhat, prostě nefunguje, možná mám nějaký balíček s chybama (našel jsem, že je problém v Listen balíčku), ale nevím ani jak zjistit, jestli takový balíček vlastně mám, protože s Ruby jsem nikdy nedělal a nevím ani jak to funguje.

Nakonec jsem to zprovoznil s Gulpem a to tak, že nevyužívám vůbec soubor config.rb, ale mám v podstatě to samé napsané v úloze. Ještě to prozkouším.

hlavně to nevzdávej - je to skvost
Compass je sice hodně šikovný nástroj, ale dělá pár věcí navíc, které by dělat nemusel.

Generování stojí režii, ale za ten luxus to stojí.
Jsi si tím tvrzením jistý? Jsou totiž lidé, kteří od Compassu odchází.
Stalker
Profil
No, vidím, že se diskuze trošku zvrhla, tak se zkusím vyjádřit k otázce.

Doporučuji kouknout na web frontendisti.cz, kde u prvního pražského srazu najdeš 3 videa a prezentace o css preprocesorech (sass, less a stylus). Každý přednášející si tam obhajuje ten svůj.

Pak bys mohl kouknout i na web vzhurudolu.cz, kde Martin Michalek vseobecne vede blog o frontendu. V nejakem clanku take psal o preprocesorech, v jinem se zase zminuje o automatizaci.

Ja osobne pouzivam Stylus, protoze ho v predchozi praci pouzival kazdy, a tak jsem zajel do internich koleji. A uz jsem u nebo zustal. Psat jsem se v nem naucil hned a nejvic se mi na nem libi syntaxe. Vybral jsem si zpusob, kde nepisu zadne zavorky, stredniky atp. Take se mi libi pouzivani mixin, ci jednoducha matika. Co si ale budeme povidat, je to nejspis hlavne o zvyku, protoze vesmes vsechny tri preprocesory umi to stejne.

Na tvorbu spritu pouzivam Grunt. Funguje to asi takto: ulozim obrazek (ktery chci mit ve spritu) do konkretni slozky a grunt mi automaticky do Stylusu vygeneruje funkci s bagroundem a pozici daneho obrazku ve spritu. Grunt totiz vsechny jednotlive obrazky pro sprite vezme z nejake dane slozky a vytvori jeden sprite
joe
Profil
Stalker:
Kam se diskuse zvrhla? Mě spíše zajímají praktické zkušenosti, a ty se z videí moc vyčíst nedají, chtěl bych znát skutečné workflow, které kdo používá pokud se s ním nestydí podělit :)

Osobně se mi Stylus moc nelíbí, protože jak je mimojiné i ve videích zmíněno, není jednoznačně vidět, zda používám nějaký mixin nebo ne, to je podle mě velká nevýhoda, ačkoli ušetří psaní.

Vynechání složených závorek je sice na rychlejší psaní dobrá věc, ale pak v editorech nefunguje tzv. folding a nemůžu rychle skočit na konec v případě použití tzv. nesting a musím prostě skrolovat a hlídat pozici a ručně tak zjistit, kde vlastnosti pro element končí.

Na tvorbu spritu pouzivam Grunt.
Podělíš se s názvem modulu? Kdy probíhá generování spritu? Až při kompilaci na produkci a nebo při každém uložení i ve vývojovém režimu?
joe
Profil
Kcko:
Mám nový projekt, zkusil jsem nasadit Gulp, Compass a můj oblíbený Browser Sync, ale asi to vzdávám, kompilace jednoduchého SASS souboru (celkem asi 100 řádků) trvá někdy třeba i 2 vteřiny. To je opravdu moc, když například u Lessu nebo Stylusu to je otázka milisekund. Pravděpodobně nebude na vině samotný Compass, ale bude problém v pluginu pro Gulp. Jen je taková doba při práci skoro až nesnesitelná... Taky ti to trvá tak dlouho?

(Při dvou oknech vedle sebe - editor a prohlížeč, chci změny v prohlížeči vidět okamžitě, jak soubory změním)

Takže se možná opět vrátím k Lessu, protože pro Stylus není v NetBeans podpora.
Kcko
Profil
joe:
Mno můj Sass taky není nejrychlejší (mě se momentálně generuje cca 3-5s, ale já nemám v CSS 100 řádků ale tak 5000).
Krom toho mám starší NTB (CD2, 4GB RAM, klasickej disk .. ne SSD), kolega má stolní a tam mu tohle generuje < 1s.

Trošku mi pomohlo, že jsem si do sublimu stáhl BUILD generování SCSS, rychlost generování se zlepšila tak o 20%.

Mrkni se na LibSass (kolega o tom básnil, že to používá ve spojení s LiveReloadem) a všechno se mu generuje rychle (sám o tom nic nevím, nezkoumal jsem to, momentálně jsem "zamrzl" v Nette a dále zkoumáním Bootstrapu / Foundation a do konce roku mám v plánu FW Sensa a víc už toho nestihnu ;-)).
joe
Profil
Kcko:
Bohužel nemám čas na to pracovat s nástrojema, který prostě jednoduše nefungují, vede Less, kompilace okamžitě (max. do 200 ms i při hodně souborech) a tomu se Compass teď nevyrovná. Věřím, že s LibSass by to bylo asi podobné, ale nemám tušení, jak se to instaluje a rozhodně nechci trávit den jenom tím, že to budu zkoušet... (to samé potom, kdybych to měl dělat na jiném OS)

Vaše odpověď

Mohlo by se hodit

Odkud se sem odkazuje


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: