Geek tričko zdarma Python týden
Tričko zdarma! Stačí před dobitím bodů použít kód TRIKO15. Více informací zde
Pouze tento sleva až 80% na kurzy Python

Lekce 1 - Příprava a nastavení

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

Vítejte v úvodním článku seriálu tvorby moderního portfolia. Představíme si nejvhodnější jazyky, které budete potřebovat znát pro efektivní tvorbu, a návrh, moderních webových stránek. Pokud neznáte základy HTML a CSS, přečtěte si nejprve seriál http://www.itnetwork.cz/…bove-stranky

Motivace

Abychom pro začátek získali patřičnou motivaci, ukažme si obrázek výsledného webu, který v tomto kurzu vytvoříme:

Moderní a profesionální webové portfolio

Editor/IDE

Základem úspěchu tvorby webových stránek je vhodný editor či IDE. Čím lepší budete míti editor/IDE, tím budete schopni psát váš kód rychleji a také kvalitněji - např. díky napovídání, zvýrazňování syntaxe či upozorňování na chyby. Já osobně doporučuji textový editor Sublime Text 3, o němž si více můžete přečíst na http://www.itnetwork.cz/…sublime-text, nebo pokud chcete něco bytelnějšího, tedy IDE, doporučuji PHPstorm, který je ovšem placený.

Sublime Text

Ukázka textového editoru Sublime Text 3

Vhodné jazyky

Další velmi důležitou částí při tvorbě webu je zvolit si dobré jazyky. Tedy takové, které jsou hodně podporované a se kterými se dá efektivně pracovat. Myslím si, že bychom určitě měli šáhnout po jazycích HTML5 a CSS3, které jsou již pro tvorbu webů velkým standardem. Tyto jazyky využijeme pro rozložení a stylování stránky. Stránku také budeme chtít doplnit o efekty, tedy nějaké animace, na které využijeme jazyk Javascript a samozřejmě také jeho knihovnu jQuery.

Abychom si ušetřili trápení s CSS, které při větších projektech může obsahovat stovky až tisíce řádků, použijeme CSS preprocesor. O preprocesorech obecně si řekneme něco v dalším článku. V naší sérii však budeme používat jazyk Sass. Určitě využijeme informace z jeho dokumentace na stránce http://sass-lang.com/.

Sass je jazyk, který nám ulehčuje psaní stylů. Nabízí nám totiž použití proměnných, podmínek, cyklů, mixinů, matematické operace a další užitečné funkce jako třeba ztmavení barvy o X procent. Sass má dvě syntaxe - my budeme používat syntaxi SCSS (Sassy CSS), která je více podobná syntaxi CSS a je lépe čitelná pro nezasvěcené - tedy pro ty, kteří s preprocesory nikdy nepracovali.

Návrh webu

Každá stránka musí vzejít z určitého grafického návrhu, nejlépe samozřejmě od zkušeného grafika. Návrh můžeme vytvořit 2 základními způsoby: vymýšlením při psaní kódu - což je opravdu ta nejhorší chyba, kterou můžete udělat - a nebo návrh od nějakého grafika - tedy "obrázek".

Návrh se tedy budeme snažit dělat jako grafik - uděláme si nějaký ten "obrázek". Na to můžeme použít libovolný grafický editor - Photoshop, Inkscape, Gimp etc. - nebo jednodušší variantou je použít tužku a papír. Můžeme pak vytvářet přímo "obrázek" tak, jak to má vypadat, nebo jen rozložení, což je jakýsi wireframe, neboli skica.

V našem tutoriálu tedy budeme pracovat s grafickým návrhem v podobě wireframu, který si představíme v některém z dalších dílů.

Analýza návrhu

Poté co dostaneme k dispozici wireframe, musíme si jej zanalyzovat a v hlavě si urovnat pomyslnou důležitost elementů v designu. Nejdříve tedy uděláme ty důležitější části a následně ty méně důležité - tedy např. nejdříve uděláme menu a až poté jeho položky.

Dalším bodem je nejdříve nakódovat web a až poté připsat Javascriptové efekty. S tím souvisí fakt, že stránka musí být spustitelná také bez Javascriptu tak, aby se dala pohodlně ovládat - pokud se tedy nejedná o nějakou speciálnější webovou aplikaci, kde je Javascript nutný.

Instalace Ruby

Jelikož Sass je nutno kompilovat do CSS, a jeho kompilátor je napsán v RUBY, musíme stáhnout Ruby a nainstalovat jej.

Windows

Instalátor pro Windows nalezneme na stránce http://rubyinstaller.org/downloads/ Zde si musíme dát pozor, abychom při instalaci zaškrtli "add ruby executables to your path", což vytvoří jakousi systémovou proměnnou.

Instalace Ruby ve Windows

Linux

V Linuxech využijeme terminál, kde Ruby nainstalujeme pomocí příkazu

pro Debian či Ubuntu

sudo apt-get install ruby

nebo pro CentOS či Fedoru

sudo yum install ruby

Mac

V Mac by mělo být ruby předinstalované v systému.

Instalace Sass

Nyní nainstalujeme kompilátor pro Sass

Windows

Spustíme si CMD a zadáme příkaz

gem install sass

Linux a Mac

Spustíme si terminál a zadáme příkaz

sudo gem install sass

Nyní již máme vše potřebné pro kompilaci Sass do CSS hotové.

Sass v Sublime Textu

Sublime Text umí zavolat kompilátor s určitými argumenty. To znamená, že my nemusíme pracovat s kompilátorem přímo.

Nejdříve si nainstalujte Package Control, jak je vysvětleno v http://www.itnetwork.cz/…sublime-text - který využijeme pro stáhnutí doplňku pro zvýrazňování Sass syntaxe.

Otevřeme si seznam příkazů (CTRL + SHIFT + P), v něm si vyhledáme možnost Package Control: Install Package. Chvíli počkáme a vyjede nám nová tabulka, do které napíšeme "Sass". Zobrazí se vám několik možností a pravděpodobně hned první bude samotné "Sass", které stáhneme. Nyní se bude zvýrazňování nastavovat automaticky a pokud ne, stačí v seznamu příkazů zadat "Set syntax: Sass".

Existuje také doplněk na kompilování, který však nedoporučuji a místo toho si vytvoříme vlastní předpis pro kompilaci podle mého již připraveného kódu:

{

        "cmd": ["sass", "--update", "$file:${file_path}/../css/${file_base_name}.css", "--stop-on-error", "--no-cache"],
        "selector": "source.sass, source.scss",
        "line_regex": "Line ([0-9]+):",

        "osx":
        {
                "path": "/usr/local/bin:$PATH"
        },

        "windows":
        {
                "shell": "true"
        }

}

Kód si stáhneme, pojmenujeme jako SASS.sublime-build a vložíme do složky %AppData%\Roa­ming\Sublime Text 3\Packages\User.

Po stisku CTRL + B, neboli Menu->Tools->Build se nám soubor zkompiluje.

Výsledný soubor je směřován do složky o úroveň výše a poté do složky css/, čehož docílíme pomocí

${file_path}/../css/${file_base_name}.css

Pokud budeme chtít změnit cílovou složku, jednoduše změníme příkaz výše.

Může se stát, že se vám budou při kompilaci zobrazovat nějaké errory, a pokud to bude něco o UTF-8, je to pravděpodobně způsobeno tím, že máte soubor uložený v nějaké složce, ve které jsou v názvu použity háčky/čárky. Stačí se jich zbavit a vše by mělo fungovat.

Sass v PHPstormu

Zde je používání Sassu jednodušší. V projektu si stačí vytvořit soubor Sass, ke kterému vyskočí možnost přidat watcher. Potvrdíme a otevřeme si Menu->File->Settings, kde najdeme položku File Watchers. Pokud zde nemáme žádný watcher, klikneme na plusko a jeden pro SASS(SCSS) vytvoříme. IDE nám automaticky vyplní informace a kompilace funguje sama hned při uložení. Zde je důležité míti zaškrtlou položku "Track only root files".

PHPstorm vám bude automaticky zvýrazňovat syntaxi a dokonce i chytře napovídat jak základní funkce z Sass, tak i ty vaše.

Pro umístění souboru do jiného místa - v našem případě do složky css/ pozměníme v nastavení watcheru hodnotu položky "Output paths to refresh" a v argumentu část za dvojtečkou na

$ProjectFileDir$/css/$FileNameWithoutExtension$.css

Změna cílové složky v PHPstormu

Pro tento díl to bude již vše, další díl si ukážeme základy Sass, abychom se v něm naučili efektivně pracovat a ukážeme si rozdíly oproti CSS.


 

 

Článek pro vás napsal Honza Bittner
Avatar
Jak se ti líbí článek?
47 hlasů
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Všechny články v sekci
Moderní a profesionální webové portfolio
Miniatura
Následující článek
Úvod do CSS preprocesoru Sass
Aktivity (3)

 

 

Komentáře

Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:8.4.2014 11:03

Rozjel jsi to solidně, ten úvod je dobře zvládnutý. Jsem zvědavý co pro nás máš dál :P

Odpovědět 8.4.2014 11:03
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Josef Kožmín:8.4.2014 12:09

Mě se poslední dobou zalíbil Adobe Edge Code CC na kódování ;)

 
Odpovědět  +1 8.4.2014 12:09
Avatar
mkub
Redaktor
Avatar
mkub:8.4.2014 17:38

Honza, nezabudaj ani pre Linuxakov, co su tu, resp. sem prisli... co je spolocne pre oba systemy, to kludne moze byt spolu,ale to, v com sa to lisi, to popis zvlast

 
Odpovědět  ±0 8.4.2014 17:38
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na mkub
Honza Bittner:8.4.2014 17:40

Přemýšlel jsem na tím a chtěl jsem to tak udělat, avšak linux nemám a tak nechci psát to o čem nevím jestli bude fungovat... :)

A myslím, že instalaci SASS na linux si každý najde, to nebude takový problém... :)

Odpovědět 8.4.2014 17:40
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
adder
Člen
Avatar
adder:11.4.2014 16:07

mě nejde to nastavení vůbec

Odpovědět 11.4.2014 16:07
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na adder
Honza Bittner:11.4.2014 16:08

Jak to myslíš?

Odpovědět 11.4.2014 16:08
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
adder
Člen
Avatar
adder:11.4.2014 17:36

Všechny instalace proběhly v pořádku a tohle se mi tam nezobrazuje Package Control: Install Package tohle se mi vůbec nezobrazi

Odpovědět 11.4.2014 17:36
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na adder
Honza Bittner:11.4.2014 18:00

Popis jak ho nainstalovat je v http://www.itnetwork.cz/…sublime-text
Do článku tedy ještě přidám zmínku. :)

Editováno 11.4.2014 18:00
Odpovědět  +1 11.4.2014 18:00
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
adder
Člen
Avatar
Odpovídá na Honza Bittner
adder:11.4.2014 18:28

Jsem myslel, že to pofrčí hned :) Děkuji

Odpovědět 11.4.2014 18:28
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
adder
Člen
Avatar
Odpovídá na Honza Bittner
adder:11.4.2014 19:23

Všechno funguje, těším se na pokračování. Ještě jednou díky.

Odpovědět 11.4.2014 19:23
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na adder
Honza Bittner:11.4.2014 19:37

Super.
Pokračování a k němu cvičení bych měl dneska dopsat, tak snad se bude také pak líbit... :)

Odpovědět  +2 11.4.2014 19:37
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Kejmou
Člen
Avatar
Kejmou:11.4.2014 19:44

Těším se..Honza Bittner

Editováno 11.4.2014 19:47
 
Odpovědět  +1 11.4.2014 19:44
Avatar
Neaktivní uživatel:13.4.2014 7:26

Podporují webhostingy (např. Endora) SASS?

Odpovědět 13.4.2014 7:26
Neaktivní uživatelský účet
Avatar
Juraj Mlich
Redaktor
Avatar
Odpovídá na Neaktivní uživatel
Juraj Mlich:13.4.2014 9:18

Sass súbory dá musia najskôr zkompilovať do klasického CSS.

Editováno 13.4.2014 9:20
 
Odpovědět  +1 13.4.2014 9:18
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Neaktivní uživatel
Honza Bittner:13.4.2014 9:32

Ty píšeš SASS, nebo jiný preprocesor, na svém PC - či ostatní z týmu na svém - a pak ho musí zkompilovat do jednoho CSSka, které bude jako normální styly co jsi doteď psal.

Takže NE, nepodporují přímé spuštění SASS.

Odpovědět  +2 13.4.2014 9:32
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Odpovídá na Honza Bittner
Neaktivní uživatel:14.4.2014 21:05

No jo, ale to by přece nefungovalo, páč css samotné tohle nepodporuje, ne?

Odpovědět 14.4.2014 21:05
Neaktivní uživatelský účet
Avatar
Odpovídá na Honza Bittner
Michal Žůrek - misaz:14.4.2014 21:13

no já si nejsem jistý jestli všichni ví co to ten preprocesor je.

 
Odpovědět  +1 14.4.2014 21:13
Avatar
Mato
Člen
Avatar
Mato:20.4.2014 15:16

Zdavím, chcel by som sa opýtať prečo mi nabehol error : (Gem::CommandLi­neError) keď som do cmd dával ten kód :) A vďaka za článok :P

Odpovědět 20.4.2014 15:16
Nič nie je také vážne, aby sa na tom nedalo zasmiať :)
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Mato
Honza Bittner:20.4.2014 15:33

Nainstaloval jsi správně ruby? :)

Odpovědět 20.4.2014 15:33
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Old Account
Člen
Avatar
Old Account:22.4.2014 1:31

Mat dobre IDE urcite nie je zaklad uspechu, zaklad uspechu vzdy boli, su a budu skusenosti.

Odpovědět  +1 22.4.2014 1:31
"If you keep your eye on the profit, you’re going to skimp on the product. But if you focus on making really gre...
Avatar
Ján Korkoš
Člen
Avatar
Ján Korkoš:6.8.2014 21:26

Kedže som v tom amater. Ako zkompilujem SCSS do normálneho CSS ? Normálne skúšam Ctrl+B. Build finished. A kam to vlasne uloží alebo čo z tým spravý ?

Editováno 6.8.2014 21:26
Odpovědět 6.8.2014 21:26
Niesom expert v HTML/CSS, ale učím sa, začínam PHP, a chcel by som vedieť JS a C#.
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Ján Korkoš
Honza Bittner:6.8.2014 21:29

Hele, měl by se ti vytvořit soubor vedle .scss... Tedy neco.css

Odpovědět 6.8.2014 21:29
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Ján Korkoš
Člen
Avatar
Odpovídá na Honza Bittner
Ján Korkoš:6.8.2014 21:38

Bohužial nič. Niečo je zle. :/

Odpovědět 6.8.2014 21:38
Niesom expert v HTML/CSS, ale učím sa, začínam PHP, a chcel by som vedieť JS a C#.
Avatar
Ján Korkoš
Člen
Avatar
Ján Korkoš:6.8.2014 21:43

Može to byť tým ? Errno::ENOENT: [Decode error - output not utf-8]

Odpovědět 6.8.2014 21:43
Niesom expert v HTML/CSS, ale učím sa, začínam PHP, a chcel by som vedieť JS a C#.
Avatar
Honza Bittner
Šupák
Avatar
Honza Bittner:2.10.2014 17:53

Článek byl přepsán a upraven. :)

Odpovědět 2.10.2014 17:53
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
bc.michal.holub:21.12.2014 14:27

zdravim, nedari sa mi naistalovat sass

napisem do prikazoveho riadku c:\ruby\ gem install sass

a vypise mi:
error: could not find a valid gem "sass" <>=0> here is why:
unable to download data from a bla bla, vie mi niekto poradit ako nainstalujem to SASS dik

 
Odpovědět 21.12.2014 14:27
Avatar
Odpovídá na bc.michal.holub
Neaktivní uživatel:21.12.2014 14:56

Podle návodu tu to funguje, asi jsi blbě něco udělal.
Možná špatně nainstalovál ruby, nebo spustil obyčejný CMD a ne CMD With Ruby

Odpovědět 21.12.2014 14:56
Neaktivní uživatelský účet
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na bc.michal.holub
Honza Bittner:21.12.2014 17:58

Zkus znova přeinstalovat Ruby a zkusit nainstalovat Sass.

Pokud to i přes to nepůjde, zkopíruj chybovou hlášku a vlož ji do Googlu, kde ti jistě vyjedou již vyřešené diskuze. :)

Odpovědět 21.12.2014 17:58
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Odpovídá na bc.michal.holub
jiri.korejtko:29.1.2015 21:42

Koukni na http://stackoverflow.com/…-for-windows
to mi pomohlo a už mi to fakčí :)

Odpovědět 29.1.2015 21:42
Minulost je minulost, tak proto žij přítomností
Avatar
lucas.machacek:5.2.2015 16:59

Zdarec, může mi prosím někdo pomoc s tímhle errorem?

 
Odpovědět 5.2.2015 16:59
Avatar
Growi
Člen
Avatar
Odpovídá na lucas.machacek
Growi:12.2.2015 13:12

Ahoj, dělalo mi to něco podobného tak jsem v založce Tools - Build System - New Build System , vytvořil nový Build a do něj jsem zkopíroval kód z toho souboru SASS.sublime-build , uložil a přes ten už mi to funguje :)

 
Odpovědět 12.2.2015 13:12
Avatar
Neaktivní uživatel:4.4.2015 7:44

Zdravím. :) Zkompilovaný soubor má vypadat jako obyčejné CSS? Mě to tam háže jen komentář s odkazem na mapu, která se ukáže vedle. Dělám něco špatně? :D

Odpovědět 4.4.2015 7:44
Neaktivní uživatelský účet
Avatar
Odpovídá na Neaktivní uživatel
Ondřej Štorc:4.4.2015 9:10

Má to vypadat jako obyčejný CSS, nevím co používáš za IDE, ale jestli používáš PHPStorm tak on ten CSS a SCSS soubor reprezentuje jako jeden, stačí když ten SCSS soubor "rozbalíš". Případně se můžeš kouknout do té složky přes průzkumníka souborů

Odpovědět 4.4.2015 9:10
Život je příliš krátký na to, abychom bezpečně odebírali USB z počítače..
Avatar
Odpovídá na Ondřej Štorc
Neaktivní uživatel:4.4.2015 9:10

Používám Sublime Text 2.

Odpovědět 4.4.2015 9:10
Neaktivní uživatelský účet
Avatar
Odpovídá na Neaktivní uživatel
Ondřej Štorc:4.4.2015 9:17

Aha tak s tím ti neporadím, jelikož jsem s ním nikdy nepracoval...

Odpovědět 4.4.2015 9:17
Život je příliš krátký na to, abychom bezpečně odebírali USB z počítače..
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Neaktivní uživatel
Honza Bittner:4.4.2015 9:32

Po kompilaci Sassu do CSS se ti opravdu, pokud nenastavíš jinak, vytvoří 2 soubory.

Jeden obsahuje normální CSSko, druhý - ten je speciální - obsahuje jakési data, které prohlížeči v např. DevTools řeknou, z jakého Sass souboru a s jakým řádkem je tvůj kód. A to se samozřejmě musí nějak napojit, a proto se vytváří ten komentář dole v CSS.

Pak tedy budeš, spíše jen při testování, moci kouknout do devtools a přesně vědět, z jakého je to Sassu - místo toho, abys tam měl pozici z vygenerovaného CSSka.

http://prntscr.com/6pcmsj - místo těchto css:1 budeš mít např _default:22

Chápeš? :)

Odpovědět 4.4.2015 9:32
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Neaktivní uživatel
Honza Bittner:4.4.2015 9:33

Koukám, že jsem přehlédl slůvko 'jen'. Hmm, máš ve tvém root souboru nějaký kód, resp. importování partials/částí?

Odpovědět 4.4.2015 9:33
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Odpovídá na Honza Bittner
Neaktivní uživatel:4.4.2015 9:40

Hmm... tak daleko jsem se nedostal. Zkrátka jednoduchý CSS kód na zkoušku. V adresáři oxiduje jen test.scss, složka "css" a v ní soubory test.css a test.css.map.

Odpovědět 4.4.2015 9:40
Neaktivní uživatelský účet
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Neaktivní uživatel
Honza Bittner:4.4.2015 9:42

Zkus to tady http://sassmeister.com/

Pokud se ti to tady provede správně, s velkou pravděpodobností máš nějak špatně tvůj kompilátor, nebo jeho konfigurační soubory. Pak bych doporučoval přeinstalovat & nejnovější verzi u ruby a sass a zkontrolovat konfig. soubory.

Odpovědět 4.4.2015 9:42
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Odpovídá na Honza Bittner
Neaktivní uživatel:4.4.2015 9:46

Ruby i SASS jsem instaloval dneska, stáhl jsem si SASS build pro Sublime a ten používám (též neupravený).

Edit: už to mám. Zapomněl jsem, že jsem si trochu přepsal sublime-build. Udělal jsem tam menší chybku. Pardon. :D

Editováno 4.4.2015 9:48
Odpovědět  +1 4.4.2015 9:46
Neaktivní uživatelský účet
Avatar
cisco
Člen
Avatar
cisco:23.5.2015 21:31

Prosím o radu
Mám PHPStorm a nějak nevim jak vytvořit ten SASS soubor :-(

Můj postup instalace
1 - Instalace php storm
2 - Stažení rubby + instalace
3 - cmd a tam jsem vlozil ten prikaz vse probehlo OK

Spustil jsem storm dal jsem nový projekt a teď bohužel nevim co dál :-(
Podle návodu nevim kde vytvořit ten soubor protože tu takovou nabídku knemám :-(

Děkuji

 
Odpovědět 23.5.2015 21:31
Avatar
vojtanosek
Člen
Avatar
vojtanosek:24.5.2015 12:11

Otevřeme si seznam příkazů (CTRL + SHIFT + P), v něm si vyhledáme možnost Package Control: Install Package. Chvíli počkáme a vyjede nám nová tabulka, do které napíšeme "Sass". Nemám tam Package Control: Install Package :(.

 
Odpovědět  -1 24.5.2015 12:11
Avatar
vojtanosek
Člen
Avatar
vojtanosek:24.5.2015 13:34

Doporučuji spíš PHPstorm, je to tam lehčí! Máte pravdu! A našel jsem si i na internetu licenci která funguje.

 
Odpovědět 24.5.2015 13:34
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na vojtanosek
Honza Bittner:24.5.2015 17:46

Kdyby jsi pořádně četl, našel by si tuto větu:

Nejdříve si nainstalujte Package Control, jak je vysvětleno v http://www.itnetwork.cz/software/sublime-text - který využijeme pro stáhnutí doplňku pro zvýrazňování Sass syntaxe.
Odpovědět 24.5.2015 17:46
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
vojtanosek
Člen
Avatar
vojtanosek:24.5.2015 18:31

Jo, to jsem si právě četl. Radši jsem se vrátil k PHP. V PHP stormu se zase nevyznám.

 
Odpovědět 24.5.2015 18:31
Avatar
blablabla
Člen
Avatar
blablabla:27.5.2015 14:37

Ahoj,
potřeboval bych poradit. Postupoval jsem dle výše uvedeného návodu a nainstaloval jsem si ruby, sass a připravil watcher v PhpStormu. Když jsem něco napsal do styl.scss, tak se mi to normálně zkomplikovalo do CSS, ale když jsem zkusil psát dál, tak mi PhpStorm vyhodil chybovou hlášku:

cmd.exe /D /C C:/Ruby22-x64/bin/scss.bat --no-cache --update style.scss:style.css
Encoding::CompatibilityError: incompatible character encodings: CP852 and UTF-8
Use --trace for backtrace.

Process finished with exit code 1

Zajímavé ale je, že když jsem watcher odebral a přidal znova, bylo to stejné jako po instalaci (první kompilace bez problémů, potom chyba). Nevíte někdo, co s tím?

 
Odpovědět 27.5.2015 14:37
Avatar
yoloman
Člen
Avatar
yoloman:31.5.2015 15:54

Všechny vaše články jsou nekonkrétní, nikdy nenapíšete kam co psát a potom mám ve všem akorát zmatek!

 
Odpovědět  -4 31.5.2015 15:54
Avatar
David Novák
Redaktor
Avatar
Odpovídá na yoloman
David Novák:31.5.2015 16:36

Tvůj komentář mě zarazil, takže jsem článek přečetl.. Nevím, co bys jako chtěl vědět, co kam psát - tenhle článek je pouze úvod a rady, jak vybrat prostředí a nainstalovat některé věci.. Vůbec o nic tu nejde - pokud nevíš, co máš kam psát, pak ti chybí základní znalosti o používání PC a měl bys začít něčím jednodušším..

Jo a s tímhle přístupem moc daleko nedojdeš - něco ti nejde a jen si stěžuješ.. (Přitom chyba je na tvé straně) Navíc píšeš nepravdu a děláš přesně to, na co si stěžuješ.
Tvá stížnost je nekonkrétní.. "Všechny", "nikdy", "ve všem"... To prostě není pravda.
Např. "V Linuxech využijeme terminál, kde Ruby nainstalujeme pomocí příkazu ..." Třeba tu máš jasně napsané, kam máš psát a co tam máš psát.. Tak netvrď že "nikdy" - jednoduše to není pravda.

Navíc být ajťák není nic jednoduché - není to jedna z nejlépe placených profesí jen tak. Nikdo tě nebude v životě vodit za ručičku (tu jsme tak hodní, že se o to pomocí tuturiálů pokoušíme) a nebude ti říkat, co kam máš psát.. IT je o tvorbě, vymýšlení a samostudiu..

A klidně si můžeš přečíst návod přímo od autorů SASS..
http://sass-lang.com/guide
http://sass-lang.com/documentation/

Odpovědět  +3 31.5.2015 16:36
Chyba je mezi klávesnicí a židlí.
Avatar
yoloman
Člen
Avatar
Odpovídá na David Novák
yoloman:31.5.2015 17:10

Není to jen u tohoto článku, ale už jsem si toho všiml i u HTML.
Myslel jsem to tak, že by stačilo JEN uvést: "A nyní se přemístíme do ...., kam napíšeme .....".
"něco ti nejde a jen si stěžuješ.." nechápu kde jste tohle vzal, ale nechám si na Vás v klidu vyléčit vaše mindráky.
PS: Já to nemyslel zle, jen jsem chtěl podotknout, že je někdy problém zjistit kam co napsat, když nějaký uvedený "kód" píši poprvé.

 
Odpovědět  -1 31.5.2015 17:10
Avatar
David Novák
Redaktor
Avatar
Odpovídá na yoloman
David Novák:31.5.2015 17:47

Když to nemyslíš zle, tak nepiš v superlativech a s vykřičníky..

Odpovědět  +2 31.5.2015 17:47
Chyba je mezi klávesnicí a židlí.
Avatar
yoloman
Člen
Avatar
Odpovídá na David Novák
yoloman:31.5.2015 18:34

Vykřičník tam je proto, protože je to věta oznamovací... -_-

 
Odpovědět  -6 31.5.2015 18:34
Avatar
David Novák
Redaktor
Avatar
Odpovídá na yoloman
David Novák:31.5.2015 18:43
o_O

Kde ses učil česky? Oznamovací věty se ukončují tečkou.. Vykričníkem se ukončují věty rozkazovací nebo zvolací. Oznamovací pouze, pokud chceš dát najevo, že křičíš..

Odpovědět  +4 31.5.2015 18:43
Chyba je mezi klávesnicí a židlí.
Avatar
yoloman
Člen
Avatar
Odpovídá na David Novák
yoloman:31.5.2015 18:45

Vykřičník (!) je interpunkční znaménko, které se zpravidla používá pro ukončení věty rozkazovací nebo zvolací, po citoslovci nebo ke zdůraznění věty oznamovací.

 
Odpovědět  -2 31.5.2015 18:45
Avatar
David Novák
Redaktor
Avatar
Odpovídá na yoloman
David Novák:31.5.2015 18:47

Bravo - zopakoval jsi přesně to, co jsem právě řekl.. ;) (y)

Odpovědět  +4 31.5.2015 18:47
Chyba je mezi klávesnicí a židlí.
Avatar
yoloman
Člen
Avatar
Odpovídá na David Novák
yoloman:31.5.2015 18:49

"Zdůraznění věty oznamovací." Takhle jsem to myslel.

 
Odpovědět  -1 31.5.2015 18:49
Avatar
David Novák
Redaktor
Avatar
Odpovídá na yoloman
David Novák:31.5.2015 18:50

Já to chápu.. :D Ale "zdůraznění" je jen odborněji pojmenované zvýšení hlasu - aka křik..

Odpovědět  +2 31.5.2015 18:50
Chyba je mezi klávesnicí a židlí.
Avatar
yoloman
Člen
Avatar
Odpovídá na David Novák
yoloman:31.5.2015 18:50

A kde je problém ?

 
Odpovědět  -1 31.5.2015 18:50
Avatar
David Novák
Redaktor
Avatar
Odpovídá na yoloman
David Novák:31.5.2015 18:52

Kde je problém? Tobě se líbí, když na tebe někdo pokřikuje (ještě k tomu nesmysly)??

Odpovědět  +3 31.5.2015 18:52
Chyba je mezi klávesnicí a židlí.
Avatar
yoloman
Člen
Avatar
yoloman:31.5.2015 18:57

Já řekl nějaký nesmysl ?

 
Odpovědět  -2 31.5.2015 18:57
Avatar
tomasmanhal
Člen
Avatar
Odpovídá na yoloman
tomasmanhal:31.5.2015 19:54

Víceméně ano. Návody tady (zvláště HTML a CSS) mám projeté stejně jako ty od úplných začátků a nikdy jsem neměl problém pochopit co se kam ukládá nebo kam se při editaci přesouváš. Pokud by ses držel instrukcí a shlédnul i zdrojové kódy předložené ke stažení, tak bys to při očekávaném průměrném IQ pochopil a pokud ne, doporučují přečíst a zkusit to podruhé, nebo potřetí. Ber to i jako radu do života. Tvůj přístup není správný.

Odpovědět  +4 31.5.2015 19:54
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
yoloman
Člen
Avatar
yoloman:31.5.2015 20:37

Další guru.
Děláte tady jak kdyby jste se nikdy nespletli.

 
Odpovědět  -5 31.5.2015 20:37
Avatar
David Novák
Redaktor
Avatar
Odpovídá na yoloman
David Novák:31.5.2015 20:47

Spletli.. Mnohokrát. Ale neviníme z toho druhé ;)

Editováno 31.5.2015 20:47
Odpovědět  +4 31.5.2015 20:47
Chyba je mezi klávesnicí a židlí.
Avatar
yoloman
Člen
Avatar
Odpovídá na David Novák
yoloman:31.5.2015 20:54

To ja taky ne.

 
Odpovědět  -4 31.5.2015 20:54
Avatar
David Novák
Redaktor
Avatar
Odpovídá na yoloman
David Novák:31.5.2015 20:57
Všechny vaše články jsou nekonkrétní, nikdy nenapíšete kam co psát a potom mám ve všem akorát zmatek!

Já tam teda nečtu "Nějak nechápu xyz.. :/ Vysvětlil by mi to prosím někdo?", ale "Jste fakt neschopní! Ani neumíte napsat článek - nepíšete mi přesně, co mám dělat.. Takže kvůli vám v tom mám zmatek!"

Aspoň zkus být chlap a uznej, že ses zachoval jako debil a omluv se zdejším autorům..

Odpovědět  +2 31.5.2015 20:57
Chyba je mezi klávesnicí a židlí.
Avatar
tomasmanhal
Člen
Avatar
Odpovídá na yoloman
tomasmanhal:31.5.2015 21:05

Tady nejde o to, jestli jsi se spletl nebo ne, ale o tvůj přístup. Slušně jsem ti napsal svůj názor a snahu Tě posunout správným směrem, ale ty jsi si to přebral jako urážku z nějakého jen Tobě známého důvodu. Já už pod tvé dotazy nenapíšu ani čárku.

Odpovědět  +2 31.5.2015 21:05
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
yoloman
Člen
Avatar
yoloman:31.5.2015 21:40

Neomluvím.
Můj první komentář byl myšlen asi takhle: Pro některé začátečníky nemusí být úplně jasné kam co napsat(na začátku jsem s timto měl problém i já) a nejspíš by bylo pro tak zkušené programátory jako jste vy potupné, kdyby bylo u článku napsáno do jakého programu to mám napsat.
V článku se mluví cca o 3 programech a najednou je tam uvedený kód, ale už tam není řečeno v jakém programu se právě pracuje.
Nemyslel jsem to tak, že nevím kam mám v programu dát kód.

 
Odpovědět  -6 31.5.2015 21:40
Avatar
Odpovídá na yoloman
Neaktivní uživatel:31.5.2015 21:45

Uveď část, kde se toto vyskytuje.

Odpovědět  +2 31.5.2015 21:45
Neaktivní uživatelský účet
Avatar
Odpovídá na yoloman
Ondřej Štorc:31.5.2015 21:46
  1. Tento článek není určen pro úplné začátečníky, takže tím si myslím, že je řečeno vše.
  2. Mohl bys mi uvést, alespoň jedno místo kde není jasně vysvětleno kam co psát? Já ho prostě nemůžu najít a myslím si každý kdo si to přečte a alespoň v té hlavě chvilku udrží tak nemá šanci se ztratit.
Odpovědět  +2 31.5.2015 21:46
Život je příliš krátký na to, abychom bezpečně odebírali USB z počítače..
Avatar
yoloman
Člen
Avatar
yoloman:31.5.2015 21:48

Já už to řešit nebudu.

 
Odpovědět  -1 31.5.2015 21:48
Avatar
Richard
Člen
Avatar
Odpovídá na yoloman
Richard:31.5.2015 21:49

X lidí se vyjádřilo že chyba je na tvé straně a stejně jsou všichni idioti a ty máš pravdu? Určitě?
A ještě mínusuje, no to je zase případ.. :-D

Editováno 31.5.2015 21:49
Odpovědět  +3 31.5.2015 21:49
$action = $_GET['Life']; | Když dáš mínus, napiš proč!
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na yoloman
Honza Bittner:31.5.2015 21:56

yoloman

Všechny vaše články jsou nekonkrétní, nikdy nenapíšete kam co psát a potom mám ve všem akorát zmatek!

Děkuji Ti za pozitivní komentář. :)

Všechny své články se snažím psát tak, aby byly co možná nejvíce srozumitelné i pro méně nadané, či mladé, vývojáře. Pokud něco nechápeš, nebo něčemu nerozumíš, obvykle bude chyba na Tvé straně a měl by jsi si přečíst článek, nebo alespoň danou část, znovu.

Pokud ani opakované přečtení, nejlépe třeba další den, nepomůže, bude vhodné, pokud napíšeš slušný komentář, který přesně označí tvůj problém, se kterým Ti bude moci někdo, kdo danou situaci chápe, pomoci nebo se článek díky Tvému slušnému komentáři upraví tak, aby byl více srozumitelný.

Editováno 31.5.2015 21:59
Odpovědět  +5 31.5.2015 21:56
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
yoloman
Člen
Avatar
yoloman:31.5.2015 22:02

Jednoduše by to bylo přehlednější, nemělo to vyznít zle.

 
Odpovědět  -4 31.5.2015 22:02
Avatar
David Novák
Redaktor
Avatar
Odpovídá na yoloman
David Novák:31.5.2015 22:17

Stále jsi nedal jeden konkrétní příklad, co by mělo být napsáno jinak.. ;)

A jsi srab a děláš ostudu mému přijmení..

Odpovědět  +3 31.5.2015 22:17
Chyba je mezi klávesnicí a židlí.
Avatar
mkub
Redaktor
Avatar
Odpovídá na yoloman
mkub:1.6.2015 8:47

chalani maju v tom pravdu, mal by si sa ospravedlnit komunite za to, ake ake usilie tu musia vynalozit, kym napisu jeden clanok a nie cely serial...
takyto clanok nevznika za 5 minut, ale venuju sa mu cele hodiny, popritom robia screeny, ako to vypada a ty im takto vynadas?
najprv sa nauc zaklady netikety, potom sa nauc ako sa ovlada pocitac a az potom reaguj na tie clanky, ale trosku inym sposobom a napis konkretne, comu nerozumies...

mimochodom, sa mi zda, ze sme mimo temy clanku...

 
Odpovědět  +3 1.6.2015 8:47
Avatar
mkub
Redaktor
Avatar
Odpovídá na yoloman
mkub:1.6.2015 18:02

a Marek, navyse design tvojho webu, co si okopiroval odtialto, by si nemal vydavat za svoj design a ani si tam davat svoj copyright, lebo je to plagiatorstvo, co robis...

skus si vytvorit svoj vlastny design, az potom si tam mozes dat svoj vlastny copyright
narazam na web: http://www.markbay.cz/index.html a na paticku: Vytvořil ©Marek Novák v roce 2015.

pokial kopirujes nejaky design, tak zo slusnosti si tam mohol uviest, odkial si ho okopiroval, napr: Vytvorene podla tutorialov na itnetwork.cz namiestoterajsej paticky

 
Odpovědět  +1 1.6.2015 18:02
Avatar
Jan Otipka
Člen
Avatar
Jan Otipka:10.6.2015 10:58

Dobrý den,
jde přidat Sass do NetBeans?

 
Odpovědět 10.6.2015 10:58
Avatar
tomasmanhal
Člen
Avatar
Odpovídá na Jan Otipka
tomasmanhal:10.6.2015 11:09

Pokud je mi známo, tak při vytváření HTML5 aplikace, potažmo stránek v Netbeans, tak při kliknutí pravým tlačítkem na HTML5 Application ve stromové struktuře napravo a pak na properties, tak tam je možnost aktivovat preprocesory pro CSS. Pak už Ti při vytvoření dalšího souboru projektu nabídne SASS nebo LESS soubory. viz odkaz.

https://www.youtube.com/watch?…

Našel by se určitě u plugin, pokud děláš v Zenu.

Odpovědět 10.6.2015 11:09
Kdyby nám dodali k životu zdrojový kód, vše by bylo jednodušší...
Avatar
Jan Otipka
Člen
Avatar
 
Odpovědět 10.6.2015 11:11
Avatar
Martin Šenovský:16.7.2015 10:45

Ahoj, mám takový problém, když to chci kompliovat (CTRL+B), ve spodní liště mi to vyhodí

"No build systém"

, nevíte co s tím? Díky moc :)

 
Odpovědět 16.7.2015 10:45
Avatar
martinkhla
Člen
Avatar
martinkhla:24.7.2015 8:43

Dobrý deň, mám problém s kompiláciou do CSS v Sublime Text 3. Všetko som nastavil podľa Vašich pokynov, ale stále mi program nevytvorí .css súbor, tiež vypíše hlášku:

'sass' is not recognized as an internal or external command,
operable program or batch file.
[Finished in 1.9s with exit code 1]
[cmd: ['sass', '--update', 'E:\\lock_folder\\Web - App Theme\\css\\style.scss:E:\\lock_folder\\Web - App Theme\\css/../css/style.css', '--stop-on-error', '--no-cache']]
[dir: E:\lock_folder\Web - App Theme\css]
[path: C:\Program Files\Common Files\Microsoft Shared\Windows Live;C:\Program Files (x86)\Common Files\Microsoft Shared\Windows Live;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\Windows Live\Shared]

Ak by mi vedel niekto pomôcť bol by som veľmi rád, ďakujem veľmi pekne.

Odpovědět  ±0 24.7.2015 8:43
Logic will get you from A to B. Imagination will take you everywhere. - Albert Einstein
Avatar
Odpovídá na martinkhla
Josef Kuchař - Pepa489:24.7.2015 11:16

Opravdu jsi nainstaloval ruby i sass?

Odpovědět  +1 24.7.2015 11:16
2x piš, jednou debuguj
Avatar
martinkhla
Člen
Avatar
Odpovídá na Josef Kuchař - Pepa489
martinkhla:24.7.2015 11:36

Aha :D ja som blbec :D. Myslel som si že Ruby je ďalší editor :), takže už asi viem kde je chybička :). Ďakujem veľmi pekne za pomoc, prípadne dám Feedback keď nebude fungovať.

Odpovědět 24.7.2015 11:36
Logic will get you from A to B. Imagination will take you everywhere. - Albert Einstein
Avatar
torhanmichal
Člen
Avatar
torhanmichal:18.8.2015 19:49

....Kód si stáhneme, pojmenujeme jako SASS.sublime-build a vložíme do složky %AppData%\Roa­ming\Sublime Text 3\Packages\User.

Po stisku CTRL + B, neboli Menu->Tools->Build se nám soubor zkompiluje.

Výsledný soubor je směřován do složky o úroveň výše a poté do složky css/, čehož docílíme pomocí

${file_path}/­../css/${file_ba­se_name}.css

Dobrý den od tohoto bodu nevím co mám dělat.. ruby jsem stáhnul, sass jsem taky nainstaloval a co teď :)...

 
Odpovědět 18.8.2015 19:49
Avatar
torhanmichal
Člen
Avatar
torhanmichal:24.8.2015 13:26

Přeformuluji otázku.. Ruby a Sass mam nainstalovaný.. kód mam taky stáhnutý a pojmenovaný jako SASS-sublime-build. vytvořím scss soubor stisknu ctrl+b, ale bohužel se mi žádný css soubor nevytvoří.. hodi mi to tuto hlasku:

[cmd: ['sass', '--update', 'C:\\Program Files\\Sublime text 3\\zkouska2.scss:C:\\Pr­ogram Files\\Sublime text 3/zkouska2.css', '--stop-on-error', '--no-cache', '--style', 'compressed']]
[dir: C:\Program Files\Sublime text 3]
[path: C:\Ruby200\bin;C:­\WINDOWS\system32;C:\WIN­DOWS;C:\WINDOW­S\System32\Wbem;C­:\Program Files\ATI Technologies\A­TI.ACE\Core-Static;C:\Program Files\Common Files\DivX Shared\;C:\WIN­DOWS\system32\Win­dowsPowerShell\v1­.0;C:\Program Files\QuickTime Alternative\QTSys­tem\;C:\Program Files\Skype\Phone\]

problém může být, že nevím přesně do jaké složky ten SASS.sublime-build mám dát..
děkuji za případné rady :)

 
Odpovědět 24.8.2015 13:26
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na torhanmichal
Honza Bittner:24.8.2015 14:41

Přečti si článek znovu, proveď všechny instrukce a pak případně napiš. Cesta, kam máš uložit ten soubor tu je napsána také, dokonce zvýrazněně.

Odpovědět 24.8.2015 14:41
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
torhanmichal
Člen
Avatar
Odpovídá na Honza Bittner
torhanmichal:24.8.2015 15:36

Honzo přečetl jsem si ho několikrát .. pochopil jsem to tak, že ve složce sublime text 3 si vytvořím další složky viz výše zvýrazněné a tam uložím ten SASS.sublime-build?

 
Odpovědět 24.8.2015 15:36
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na torhanmichal
Honza Bittner:24.8.2015 16:47

Psal jsem tam, že to máš uložit do %AppData%\Roa­ming\Sublime Text 3\Packages\User - tedy ten soubor SASS.sublime-build.

Odpovědět 24.8.2015 16:47
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
David Novák
Redaktor
Avatar
Odpovídá na Honza Bittner
David Novák:24.8.2015 16:52

on asi neví, co znamená %AppData% ;)

Odpovědět 24.8.2015 16:52
Chyba je mezi klávesnicí a židlí.
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na torhanmichal
Honza Bittner:24.8.2015 16:54

Ještě koukám, že někde (win 10) směřuje %AppData% přímo do složky Roaming, takže to můžeš zkusit zadat případně i bez toho.

Editováno 24.8.2015 16:55
Odpovědět 24.8.2015 16:54
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Odpovídá na Honza Bittner
Michal Žůrek - misaz:24.8.2015 16:56

Nevím jak u tebe, ale mě už od Windows 7 (Visty nemám) to vždycky směruje do Roaming....

 
Odpovědět 24.8.2015 16:56
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Michal Žůrek - misaz
Honza Bittner:24.8.2015 17:00

Na WIN 7 mě to tam asi neházelo, jelikož cesty běžně zkouším... Ale kdo ví. :)

Odpovědět 24.8.2015 17:00
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
torhanmichal
Člen
Avatar
torhanmichal:25.8.2015 22:04

Díky Michale a Honzo za radu, už běží vše jak má :)...

 
Odpovědět  +1 25.8.2015 22:04
Avatar
torhanmichal
Člen
Avatar
torhanmichal:25.8.2015 22:05

..a Davide ;)

 
Odpovědět 25.8.2015 22:05
Avatar
Vít Cigánek:2.12.2015 15:33

Já jenom doplním video v netbeansech pro nastaven sass. https://www.youtube.com/watch?…

 
Odpovědět 2.12.2015 15:33
Avatar
Michal Durik
Člen
Avatar
Michal Durik:13.12.2015 10:31

Čaute, potreboval by som pomôcť. Používam OSX a neviem kam mám uložiť súbor SASS.sublime-build. Vie mi niekto poradiť ?

 
Odpovědět 13.12.2015 10:31
Avatar
Michal Durik
Člen
Avatar
Michal Durik:14.12.2015 10:47

Vyriešené.

 
Odpovědět 14.12.2015 10:47
Avatar
Odpovídá na Honza Bittner
Denis Mozdík:30.12.2015 1:15

Prosimťa ako mám stiahnuť súbor SASS.sublime-build keď je tu na stránke napísany ako kód ? Viem to uložiť akurát tak ako html súbor alebo cez ctr-c a crl-v do textového súboru... Ale to asi není ono :D

 
Odpovědět 30.12.2015 1:15
Avatar
TomasGlawaty
Člen
Avatar
Odpovídá na Denis Mozdík
TomasGlawaty:30.12.2015 9:41

Normálně to zkopíruj do txt, ale ulož to jako "SASS.sublime-build" :)

Odpovědět  +1 30.12.2015 9:41
Člověk může dosáhnout čeho si zamane. Jen musí chtít, případně něco obětovat ...
Avatar
Milan Fafek
Člen
Avatar
Odpovídá na Michal Durik
Milan Fafek:9.1.2016 12:28

Ahoj,

mohl by jsi mi prosím prozdradit kam jsi to uložil?

Děkuju za pomoc

 
Odpovědět 9.1.2016 12:28
Avatar
Dominik Lev
Redaktor
Avatar
Dominik Lev:6.2.2016 20:40

Je správně, když uložím ten kod, pak dám Ctrl+B a dole vlevo mi to napíše No Build System??

Odpovědět 6.2.2016 20:40
Dominik Lev
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Dominik Lev
Honza Bittner:7.2.2016 20:42

Máš nainstalovaný a nastavený plugin? Všechno by mělo fungovat tak, jak to je popsáno.

Odpovědět 7.2.2016 20:42
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
mat.masar
Člen
Avatar
Odpovídá na Honza Bittner
mat.masar:19.3.2016 14:14

Taky mi to píše No Build system. Nainstalovaný sass mám(přes cmd) a ruby taky. V sublimu jsem přes install package sass přidal. Do složky jsem ten kompilátor nahrál. Asi nevím, kde má být ten soubor sccs do kterého píšu.

 
Odpovědět 19.3.2016 14:14
Avatar
Odpovídá na Honza Bittner
FrulalaTralala:22.3.2016 20:46

No Build System

 
Odpovědět 22.3.2016 20:46
Avatar
Štefan Mazáň:19.4.2016 0:34

Prosím o radu. Nainstaloval jsem si Sass + Sublime Text 3. Zkoušel jsem editovat, nějaký příklad, co jsem našel, soubor "_config.scss" ale při editaci a publikaci "CTRL+B" se mi zobrazí chyba "Encoding::Com­patibilityError: incompatible character encodings: CP852 and UTF-8". Nesetkal jste se s tím někdo?

 
Odpovědět 19.4.2016 0:34
Avatar
 
Odpovědět 19.4.2016 0:43
Avatar
Jenda Xenofob Kropáč:30.4.2016 21:20

Hezký večer,
omlouvám se, jsem děsná lama, ale ztroskotal jsem už v první kapitole.
Nainstaloval jsem Sublime Text Build 3103 x64, otevřel seznam příkazů (CTRL + SHIFT + P), avšak Package Control: Install Package nikde (viz. CTRL_SHIFT_P.jpg)
Druhý pokus pomocí Set syntax: Sass dopadl viz Set syntax_Sass.jpg...

Po několika hodinách marných pokusů se kamkoliv dobrat jsem to vzdal. Je mi pomoci..?

 
Odpovědět 30.4.2016 21:20
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Jenda Xenofob Kropáč
Honza Bittner:1.5.2016 9:54

Musíš si neprve Package Control nainstalovat. Doplněk Sass nevidíš, protože se instaluje z Package Controlu.

Někdy po maturitě články upravím aby byly více aktuální a aby měly lépe propracované postupy, teď na to není čas. :-)

Odpovědět 1.5.2016 9:54
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Filip Válek
Člen
Avatar
Filip Válek:14.5.2016 8:44

Ahoj poraďte prosím potřeboval bych opravdu blbuvzdornou radu :-)

postupoval jsem zcela pode návodu, ale neporozuměl jsem dvěma částem:

" Existuje také doplněk na kompilování, který však nedoporučuji a místo toho si vytvoříme vlastní předpis pro kompilaci podle mého již připraveného kódu:"

chápu správně, že si otevřu v Sublime text New File tam to překopíruji a uložím pod avizovaným názvem do avizovaného souboru?

...tímto způsobem jsem postupoval ale po zadaní CTRL+B mi to v tom nově otevřeném souboru pouze vypíše: No Build System

druhé věci se kterou se nevím rady:

Výsledný soubor je směřován do složky o úroveň výše a poté do složky css/, čehož docílíme pomocí...

to zadám kam?

Prosím o radu má hlava šedivá si s tím neví rady už několik dní

 
Odpovědět 14.5.2016 8:44
Avatar
Odpovídá na Honza Bittner
Libor Šimo (libcosenior):11.6.2016 10:56

Honzo, viem že odporúčaš používať IDE, ale ja píšem kód v PsPad editore.
Je možnosť to všetko nastaviť aj tam?
Už si sa s tým stretol?

Odpovědět 11.6.2016 10:56
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Michal Ruml
Člen
Avatar
Michal Ruml:23.8.2016 23:23

ahoj už si zmaturoval mohol by si to prosím ťa upresniť s tým článkom hlavne dve najproblematic­kejšie časti kompilácia + typ kompilácie väčšina pravdepodobne uprednostňuje compressed díky :)

 
Odpovědět  +1 23.8.2016 23:23
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Libor Šimo (libcosenior)
Honza Bittner:24.8.2016 10:12

V PSPad nic podobného pravděpodobně nenajdeš. Zkus se ale podívat na nástroj Gulp. Nastavení můžeš okoukat z https://github.com/…/gulpfile.js

Odpovědět  +1 24.8.2016 10:12
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Michal Ruml
Honza Bittner:24.8.2016 12:47

Uvažuji, že bych to přepracoval do Gulp, protože toto kompilování v sublime či phpstorm je so much nepřenositelné...

Odpovědět  +1 24.8.2016 12:47
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Michal Ruml
Člen
Avatar
Michal Ruml:24.8.2016 21:28

každé zlepšenie dobré zlepšenie :)

 
Odpovědět 24.8.2016 21:28
Avatar
Michal Ruml
Člen
Avatar
Michal Ruml:28.8.2016 18:42

každopádne mi postačí vysvetlenie kompilácie po stlačení kláves ctrl+b mi ukáže tento riadok vieš mi poradiť čo s tým ? Nikde

Editováno 28.8.2016 18:43
 
Odpovědět 28.8.2016 18:42
Avatar
Ondřej Matýs:16.10.2016 18:08

Ahoj, potřeboval bych trošku pomoct. Možná mě teď většina lidí, co jsou tady prokleje, ale po zadání příkazu 'gem install sass' mi to vyhodí chybovou hlášku: "Could not find a valid gem 'sass' (>= 0), here is why:
Unable to download data from https://rubygems.org/ - SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate verify failed (https://api.rubygems.org/specs.4.8.gz)".

 
Odpovědět 16.10.2016 18:08
Avatar
Ilja Židkov
Člen
Avatar
Odpovídá na Ondřej Matýs
Ilja Židkov:8.11.2016 22:41

Při instalaci ruby zaškrtni checkbox - add to PATH.

 
Odpovědět 8.11.2016 22:41
Avatar
Odpovídá na Ilja Židkov
Ondřej Matýs:10.11.2016 16:59

Díky za radu. Už se mi to podařilo vyřešit :)

 
Odpovědět 10.11.2016 16:59
Avatar
Karel Wala
Člen
Avatar
Odpovídá na Ondřej Matýs
Karel Wala:11.11.2016 10:03

Ahoj, jak jsi to prosím tě vyřešil? Add to PATH check box jsem měl zaškrtnutý, už jsem to 2x přeinstaloval a dělá mi to přesně to, co tobě. Děkuji

 
Odpovědět 11.11.2016 10:03
Avatar
vgixr
Člen
Avatar
Odpovídá na Karel Wala
vgixr:11.11.2016 22:26

Odinstaluj verzi Ruby, co máš, a nainstaluj Ruby 1.9.3-p551; to fungovalo mně

 
Odpovědět 11.11.2016 22:26
Avatar
jozef.stropko:21.11.2016 16:10

Poprosil by som o malú pomoc. Postupoval som podľa návodu a dostal som sa takmer ku koncu, kde treba prekopírovať súbor pre kompiláciu do sublime textu a uložiť ho pod názvom SASS.sublime-build do %AppData%\Roa­ming\Sublime Text 3\Packages\User a následne ho skompilovať cez ctrl+b a tu je problém,, ktorý sa vyskytol tiež u niektorých. V sublime texte mi to po stačení ctrl+b, keď mám súbor SASS.sublime-build skompilovať v spodnej časti vypíše "no build system" a nič to nerobí. Neviem, či nerobím nejakú chybu (možno triviálnu).

Pre doplnenie:

Ruby mi funguje vo verzii 2.0.0-p0-x64, keďže pri novších sa nedal nainštalovať, vypisoval chybové hlásenie, ktoré tu bolo spomenuté a o zložke %AppData%\Roa­ming\Sublime Text 3\Packages\User do ktorej bolo treba uložiť SASS.sublime-build som sa doobeda dočítal, že sa jedná o skrytý súbor, ktorý je uložený v zložke užívatelia (konkrétne u mňa) a programy si tam ukladajú potrebné súbory. Pred tým som ho vytváral v položke sublime text, ktorá je uložená v program files.

Za pomoc vopred veľmi pekne ďakujem!

 
Odpovědět 21.11.2016 16:10
Avatar
Michal Martinec:22.12.2016 18:37

Ahojte vsetko som nastavil len nerozumiem poslednej veci. Ako mam stiahnut ten kod a kam ho dat? Mam ho len nakopirovat, dat do editoru a ulozit respektive vytvorit ulozisko nakolko takato cesta v PC neexistuje? Tam som sa zasekol. Nech som skusal robit cokolvek tak mi to nic neurobilo a neviem ako to mam urobit. :D

Odpovědět 22.12.2016 18:37
Neporovnavaj sa s ostatnymi. Porovnavaj sa sam so sebou.
Avatar
Michal Martinec:22.12.2016 19:20

ok uz nemusite radit :) podarilo sa. Pokial mi to malo v konzole vypisat po kompilacii len ze finished in 0.3s tak je to v poriadku. Ak by to malo urobit nieco ine prosim povedzte mi ka to bude niekto citat.

Odpovědět 22.12.2016 19:20
Neporovnavaj sa s ostatnymi. Porovnavaj sa sam so sebou.
Avatar
Odpovídá na jozef.stropko
Michal Martinec:22.12.2016 19:31

Tiez som to dal do package v program files/Sublime text 3 lebo taku cestu ako sa tu pise, este k tomu nechapem preco je pisana opacne :D alebo ja som sa s tym nikdy nestretol, som nenasiel. Po ctrl + b mi to v konzole vyhodilo len ze finished in 0.3s. Tak predpokladam ze je to ok. Ale potom som zistil ze nie je, lebo som to mal zle napisane, namiesto build som napisal bulid a aj tak to bez problemov skompilovalo a ze je hotovo. Takza mam s tym tiez problem cez ktory sa asi nedostanem bez pomoci.

Odpovědět 22.12.2016 19:31
Neporovnavaj sa s ostatnymi. Porovnavaj sa sam so sebou.
Avatar
Odpovídá na jozef.stropko
Michal Martinec:22.12.2016 20:07

Ok nechcem tu spamovat, ale chcem ti pomoct, lebo ja som to uz spravil. Vykasli sa na to, aby si vkladal nejaky kod odtialto a nastavoval to podla tohto navodu, hlavne ked autor nenapisal preco nedoporucuje doplnok na kompilaciu priamo z instalacnych moznosti Sublime Text 3 editora. Cele som to nastavil podla tohto videa https://www.youtube.com/watch?… pekne krok po kroku. Jediny problem moze nastat, ked budes kopirovat kod a vkladat ho do konzoly podla videa. Ak ti to nevyhodi ten vysledok co jemu na videu, ale vyhodi ti to len cely ten nakopirovany text tak, ako si ho napisal, nepanikar. Je to lenk kvoli tomu, ze uz to tam vsetko mas a tym padom mozes ten krok preskocit a pokracuj podla videa dalej. ;)

Odpovědět 22.12.2016 20:07
Neporovnavaj sa s ostatnymi. Porovnavaj sa sam so sebou.
Avatar
jozef.stropko:25.12.2016 21:11

Michal Martinec, dodatočne vďaka za odpoveď! teraz mám troška zaneprázdnené dni, tak to skúsim prejsť celé po novom roku.

 
Odpovědět 25.12.2016 21:11
Avatar
Vladimír Křížek:18.1.2017 11:16

Ahoj, mám takový problém. Vyhazuje mi to tuto hlášku (někde výše padla, nenašel jsem ale odpověď).

cmd.exe /D /C call C:/Ruby23/bin/scs­s.bat --no-cache --update SASS.scss:E:\Do­kumenty\Progra­mování\SASS/css/SAS­S.css
Encoding::Com­patibilityError: incompatible character encodings: CP852 and UTF-8
Use --trace for backtrace.

Process finished with exit code 1

css složka včetně souborů se vytvořila, ale neaktualizuje se mi při změně. Kde dělám chybu? Díky

 
Odpovědět 18.1.2017 11:16
Avatar
Daniel Miarka:17.3.2017 17:12

Mám dotaz, pro psaní webu nám škola zařídila server jménem Junglee kde si každý student dělá vlastní web, ve škole Sass nebereme a tak bych se chtěl zeptat jak ho tam mám potom nacpat aby to fungovalo ?

 
Odpovědět 17.3.2017 17:12
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Daniel Miarka
Honza Bittner:17.3.2017 17:19

Asi nijak, pokud to neumí spouštět příkazy. Každopádně můžeš si vyvíjet doma a na server dávat jen zkompilované soubory.

Odpovědět 17.3.2017 17:19
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Daniel Miarka:17.3.2017 21:57

Díky za radu ! Jinak super článek :)

 
Odpovědět 17.3.2017 21:57
Avatar
jozef.stropko:6.4.2017 20:28

Tak po krvopotnom skúšaní a odinštalovaniach a preinštalovaniach sublime textu, rubya sass sa mi podarilo prekonvertovať súbor scss na css cez sublime text. Treba skúšať v štýle pokus - omyl. Tak snáď to teda vyšlo a vrhnem sa aj do tohto kurzu.

 
Odpovědět  +1 6.4.2017 20:28
Avatar
jozef.stropko:6.4.2017 20:42

"Může se stát, že se vám budou při kompilaci zobrazovat nějaké errory, a pokud to bude něco o UTF-8, je to pravděpodobně způsobeno tím, že máte soubor uložený v nějaké složce, ve které jsou v názvu použity háčky/čárky. Stačí se jich zbavit a vše by mělo fungovat."

Ešte aby som nezabudol, tak posledný error, ktorý mi to vyhadzovalo počas konvertovania v sublime texte sa týkal kódovania utf-8 a riadil som sa podľa citácie z článku. Z kmeňového súboru, v ktorom mám podsúbory som odstránil interpunkciu. Týmto ďakujem za všetky rady!

 
Odpovědět 6.4.2017 20:42
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na jozef.stropko
Honza Bittner:6.4.2017 21:25

Teď už bych doporučoval kompilovat (a automatizovat projekt) například přes Gulp. Bohužel se v brzké době nedostanu k upgradu článků, ale inspirovat se můžeš například tímto mým nastavením https://github.com/…/gulpfile.js

Odpovědět 6.4.2017 21:25
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
MartinaK
Člen
Avatar
MartinaK:9.5.2017 0:05

Ahoj.
Mám problém s uložením a s kompilací tohoto kódu:
{

"cmd": ["sass", "--update", "$file:${file_pat­h}/../css/${fi­le_base_name}­.css", "--stop-on-error", "--no-cache"],
"selector": "source.sass, source.scss",
"line_regex": "Line ([0-9]+):",

"osx":
{
"path": "/usr/local/bin:$PAT­H"
},

"windows":
{
"shell": "true"
}

}
Sublime Text 3, SASS, SCSS a Ruby mám instalovaný podle https://www.youtube.com/watch?…
Zkopírovala jsem kód do Sublime Textu 3 do Plain Text, uložila ho do AppData\Roamin­g\Sublime Text 3\ Packages\User, pojmenovala jsem ho SASS.sublime-build, ale teď nevím v jakým formátu jsem to měla uložit, jestli Sass nebo SCSS, Plain Text anebo All Files?? :-(
Kód jsem dala do SCSS, ale když jsem zmáčkla Ctrl+B vyhodilo mi to tuhle chybu:
WARNING on line 3 of C:\Users\Marti­na\AppData\Ro­aming\Sublime Text 3\Packages\User\SAS­S.sublime-build:
This selector doesn't have any properties and will not be rendered.
WARNING on line 9 of C:\Users\Marti­na\AppData\Ro­aming\Sublime Text 3\Packages\User\SAS­S.sublime-build:
This selector doesn't have any properties and will not be rendered.
WARNING on line 10 of C:\Users\Marti­na\AppData\Ro­aming\Sublime Text 3\Packages\User\SAS­S.sublime-build:
This selector doesn't have any properties and will not be rendered.
WARNING on line 14 of C:\Users\Marti­na\AppData\Ro­aming\Sublime Text 3\Packages\User\SAS­S.sublime-build:
This selector doesn't have any properties and will not be rendered.
WARNING on line 15 of C:\Users\Marti­na\AppData\Ro­aming\Sublime Text 3\Packages\User\SAS­S.sublime-build:
This selector doesn't have any properties and will not be rendered.
WARNING on line 17 of C:\Users\Marti­na\AppData\Ro­aming\Sublime Text 3\Packages\User\SAS­S.sublime-build:
This selector doesn't have any properties and will not be rendered.
Error: Invalid CSS after "": expected selector, was "{"
on line 1 of C:\Users\Marti­na\AppData\Ro­aming\Sublime Text 3\Packages\User\SAS­S.sublime-build
Use --trace for backtrace.
[Finished in 0.6s with exit code 13]
[cmd: ['sass', '--update', 'C:\\Users\\Mar­tina\\AppData\\Ro­aming\\Sublime Text 3\\Packages\\U­ser\\SASS.subli­me-build:C:\\User­s\\Martina\\Ap­pData\\Roamin­g\\Sublime Text 3\\Packages\\U­ser/../css/SAS­S.css', '--stop-on-error', '--no-cache']]
[dir: C:\Users\Marti­na\AppData\Ro­aming\Sublime Text 3\Packages\User]
[path: C:\Ruby23\bin;C:\­ProgramData\O­racle\Java\ja­vapath;C:\Pro­gram Files (x86)\NVIDIA Corporation\Phys­X\Common;C:\Pro­gram Files\Common Files\Microsoft Shared\Windows Live;C:\Program Files (x86)\Common Files\Microsoft Shared\Windows Live;C:\Window­s\system32;C:\Win­dows;C:\Window­s\System32\Wbem;C­:\Windows\Sys­tem32\WindowsPo­werShell\v1.0\;C:\Pro­gram Files (x86)\Windows Live\Shared;C:\Pro­gram Files (x86)\EgisTec MyWinLocker\x64;C:\P­rogram Files (x86)\EgisTec MyWinLocker\;C:\Pro­gram Files (x86)\QuickTi­me\QTSystem\;C:\Pro­gram Files (x86)\VDownlo­ader;C:\Users\Mar­tina\.dnx\bin;C:\­Program Files\Microsoft DNX\Dnvm\;C:\­Program Files (x86)\Skype\Pho­ne\;C:\Users\Mar­tina\AppData\Lo­cal\Programs\Pyt­hon\Python36-32\Scripts\;C:\U­sers\Martina\Ap­pData\Local\Pro­grams\Python\Pyt­hon36-32\;C:\Program Files (x86)\Microsoft VS Code\bin;.;;.;]

Díky moc za pomoc. :-)

 
Odpovědět 9.5.2017 0:05
Avatar
Fíla N.
Člen
Avatar
Fíla N.:29.7.2017 0:33

Finály, konečně to buildí... Phew.
Musím tedy poděkovat Michal Martinec , díky jehož odkazu jsem to nakonec zprovoznil.
Přikladám odkaz od Martina (z jeho příspěvku): https://www.youtube.com/watch?…

 
Odpovědět  +1 29.7.2017 0:33
Avatar
Radek Trojan
Člen
Avatar
Odpovídá na MartinaK
Radek Trojan:12.1.2018 9:45

Na otázku MartinaK bych taky rád znal odpověď. Z textu jsem pochopil instrukce tak, že jsem kod zkopíroval do PsPadu, uložil jako text a na hotovém souboru jem příponu txt přepsal na sublime-build. Chvíli mi trvalo najít složku, kde se má soubor uložit. Složku %appdata% jsem nenašel. Nakonec jsem usoudil, že soubor patří sem: c:\Users\Radek\Ap­pData\Roaming\Su­blime Text 3\Packages\User*.*
Snad mi to bude fungovat. :-)

Odpovědět 12.1.2018 9:45
Je fajn být tady s vámi
Avatar
Radek Trojan
Člen
Avatar
Odpovídá na Radek Trojan
Radek Trojan:12.1.2018 10:32

Tak nefunguje

Odpovědět 12.1.2018 10:32
Je fajn být tady s vámi
Avatar
Radek Trojan
Člen
Avatar
Radek Trojan:17.1.2018 9:59

Tak už to funguje. Nastavit tools na správný build systém a za příkazem k importu nezapomenout na středník. :-)

Odpovědět  +1 17.1.2018 9:59
Je fajn být tady s vámi
Avatar
Bite Rook
Člen
Avatar
Bite Rook:22.2.2018 4:52

Připadám si teď jako naprostý amatér (což vlastně i více méně jsem), ale raději se zeptám, než abych to s neúspěchem vzdal. Nepochopil jsem konec tohoto článku. nainstaloval jsem si Sublime Text 3 i některé jeho pluginy. Poté jsem nainstaloval ruby a při instalaci zaškrtl pouze to políčko, které je vyzobrazeno v přiloženém obrázku v článku. Poté jsem v CMD zadal gem install sass, vše se bez erroru nainstalovalo. Zasekl jsem se u té části s kodem. kód jsem celý zkopíroval, vložil do PSpadu, uložil jako SASS.sublime-build a vložil do správné složky. Úplně jsem ale nepochopil, jak přesně funguje to zkompilování. jakou adresu bych měl zadat, tedy jak přesně by měl vypadat ${file_path}/­../css/${file_ba­se_name}.css, když můj CSS soubor je uložen v C:\BiteRook\web­stranka\web-flexbox\flexsty­les.css ? pokud jsem to správně pochopil, tak poté si v Sublime Text 3 vytvořím nový soubor, zapíšu nějaký sass kód, např.

$sirka : 500px;

p {
   @if $sirka < 500px
   {
      background: red;
   }
   @else if $sirka == 500px
   {
      background: green;
   }
   @else
   {
      background: blue;
   }
}

a on se mi poté v převedené CSS verzi přidá do mého již vytvořeného CSS souboru, když zmáčknu ctrl + b?

 
Odpovědět 22.2.2018 4:52
Avatar
Bite Rook
Člen
Avatar
Odpovídá na Bite Rook
Bite Rook:23.2.2018 23:11

tak nakonec to bylo opravdu jen nedorozumění textu. nakonec jsem se rozhodl pro PHPstorm a vše krásně šlape :)

 
Odpovědět  +1 23.2.2018 23:11
Avatar
Kamil Maděra:7.3.2018 15:17

Ahoj, nejde mi nainstalovat ,,sass", nemohl by mi někdo poradit?

 
Odpovědět 7.3.2018 15:17
Avatar
Kamil Maděra:7.3.2018 15:36

Nejde nainstalovat sass

 
Odpovědět 7.3.2018 15:36
Avatar
Martin Patočka:7.3.2018 21:45

Ahoj, omlouvám se, ale prostě vůbec nevím co dělat od této části i když jsem článek přečetl několikrát.
Kód si stáhneme, pojmenujeme jako SASS.sublime-build a vložíme do složky %AppData%\Roa­ming\Sublime Text 3\Packages\User.

Po stisku CTRL + B, neboli Menu->Tools->Build se nám soubor zkompiluje.

Výsledný soubor je směřován do složky o úroveň výše a poté do složky css/, čehož docílíme pomocí

Nevím kde najít složku
%AppData%\Roa­ming\Sublime Text 3\Packages\User.

Děkuji za odpověď.

 
Odpovědět 7.3.2018 21:45
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Martin Patočka
Honza Bittner:7.3.2018 21:53

%AppData%\Roa­ming\Sublime Text 3\Packages\User

je cesta té složky. Když si otevřeš průzkumníka a místo D:\Games či whatever tam vložíš výše zmíněný text, otevře se ti složka.

%AppData% se přeloží do něčeho jako C:\Users\mojej­meno\AppData\

Ve výsledku tedy něco jako

C:\Users\mojej­meno\AppData\Ro­aming\Sublime Text 3\Packages\User

Odpovědět  +1 7.3.2018 21:53
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Odpovídá na Honza Bittner
Martin Patočka:7.3.2018 22:24

Děkuji za odpověď, bohužel, mi to žádnou takovou složku nenašlo. Nevím čím by to mohlo být, postupoval jsem přesně podle návodu a neměl jsem problém do této doby. Gem install sass se mi také povedl bez problému.

 
Odpovědět 7.3.2018 22:24
Avatar
Odpovídá na Honza Bittner
Martin Patočka:8.3.2018 0:11

Tak jsem tu složku našel, moje chyba, ovšem ctrl + B mi nefunguje i když jsem tam ten soubor uložil. Soubor obsahuje přesně ten kód, co tu je napsaný.

 
Odpovědět 8.3.2018 0:11
Avatar
Karel Labonek:5.4.2018 5:57

Zdravím, omlouvám se nerad něco vzdávám, nicméně nedaří se mi vyřešit poslední problém tohoto článku. Četl jem komentáře a zkoušel, no narazil jsem na problém při posledním kroku, kdy v "Sublime Text" použiji "Ctrl + B" tak mi napíše tohle:

Errno::ENOENT: No such file or directory @ rb_sysopen -
  Use --trace for backtrace.
[Finished in 0.9s]

děkuji za pomoc.

 
Odpovědět 5.4.2018 5:57
Avatar
kamoB
Člen
Avatar
Odpovídá na Karel Labonek
kamoB:17.4.2018 7:04

Mam uplne stejny problem...nevy­resils nahodou? Lehce jsem googlil a snad by to mohlo byt nevhodnou verzi Ruby, nebo Sass. Momentalne jsem ve spitale, takze omezene pripojeni a nemuzu moc experimentovat. Diky.

 
Odpovědět 17.4.2018 7:04
Avatar
Odpovídá na kamoB
Karel Labonek:17.4.2018 7:23

Ahoj, bohužel tě nepotěším. Zjistil jsem, že phpStorm má free licenci pro studenty a vzhledem k tomu že potřebuji do školy projít i javascripte, jQuery, php a také dle příspěvků zde je phpStorm profi nástroj rozhodl jsem se že by mě to mohlo zase posunout o kousek dále no a zkrátka jsem to vzdal a začal s phpStorm :-( . Mám ho nainstalovaný asi tři dny a vypadá skvěle, já mám samozřejmě problém s tím že je prostředí v anglickém jazyce no a já anglicky příliš nevládnu (můj problém a makám na tom :-) ) ale jinak jsem spokojený. Asi jsem ti moc nepomohl zkus oslovit autora článku mě už také radil a pomohl :-) .

 
Odpovědět 17.4.2018 7:23
Avatar
kamoB
Člen
Avatar
Odpovídá na Karel Labonek
kamoB:17.4.2018 7:27

jasna zprava :). No ja anglinu ucim takze to by nebyl problem, ale zas nejsem student, takze bych php storm musel koupit a zrovna nemam prachy. No, ja to nejak rozlousku...Diiik za reakci.

 
Odpovědět 17.4.2018 7:27
Avatar
Alex Russo
Člen
Avatar
Alex Russo:6.8.2018 16:37

Zdravím,
když se pokusím o kompilaci v Sublime,hlásí mi : "no build system".
Poradíte mi?

 
Odpovědět 6.8.2018 16:37
Avatar
Alex Russo
Člen
Avatar
Alex Russo:6.8.2018 18:25

Už mi to běží..
Ale..

Errno::ENOENT: No such file or directory @ rb_sysopen -
Use --trace for backtrace.
[Finished in 0.6s with exit code 1]
[cmd: ['sass', '--update', ':/../css/.css', '--stop-on-error', '--no-cache']]
[dir: C:\Program Files\Sublime Text 3]
[path: C:\Program Files (x86)\Common Files\Oracle\Ja­va\javapath;C:\Pro­gram Files (x86)\Intel\iCLS Client\;C:\Program Files\Intel\iCLS Client\;C:\Win­dows\system32;C:\Win­dows;C:\Window­s\System32\Wbem;C­:\Windows\Sys­tem32\WindowsPo­werShell\v1.0\;C:\Pro­gram Files (x86)\NVIDIA Corporation\Phys­X\Common;C:\Pro­gram Files\Intel\Wi­Fi\bin\;C:\Pro­gram Files\Common Files\Intel\Wi­relessCommon\;C:\Pro­gram Files (x86)\Intel\In­tel(R) Management Engine Components\DAL;C:\Pr­ogram Files\Intel\In­tel(R) Management Engine Components\DAL;C:\Pr­ogram Files (x86)\Intel\In­tel(R) Management Engine Components\IP­T;C:\Program Files\Intel\In­tel(R) Management Engine Components\IP­T;C:\WINDOWS\sys­tem32;C:\WINDOW­S;C:\WINDOWS\Sys­tem32\Wbem;C:\WIN­DOWS\System32\Win­dowsPowerShell\v1­.0\;C:\WINDOW­S\System32\Open­SSH\;C:\Program Files (x86)\Common Files\Acronis\Fi­leProtector\;C:\Pro­gram Files (x86)\Common Files\Acronis\Fi­leProtector64\;C:\Ru­by24-x64\bin;C:\User­s\VIRUS\AppDa­ta\Local\Micro­soft\WindowsAp­ps]

Zkuste mi prosím někdo říct kde dělám chybu..
Díky..

 
Odpovědět 6.8.2018 18:25
Avatar
Alex Russo
Člen
Avatar
Alex Russo:6.8.2018 18:58

Omlouvám se,asi budu za idiota,ale už mi to snad kompiluje..

directory C:\Users\VIRUS\Des­ktop/../css
write C:\Users\VIRUS\Des­ktop/../css/new­.css
write C:\Users\VIRUS\Des­ktop/../css/new­.css.map
[Finished in 0.7s]

Stále ale nemůžu najít výsledný *.ccs soubor..

 
Odpovědět 6.8.2018 18:58
Avatar
Jan Jurníček:22.11.2018 16:26

Napsal jsem podobný příspěvek k další kapitole (odtamtud jsem si totiž stáhl zdroják .scss, na kterém jsem to vyzkoušel), ale patří to do nastavení prostředí a je to pro ty, kdo používají MS Visual Studio:

Pro MS Visual Studio lze instalační program integrovaného preprocesoru nejen SASS, ale také LESS, JSX, ES6 a CoffeeScriptu stáhnout zdarma odtud a jmenuje se to Web Compiler. Pokud máte nainstalováno více verzí Visual Studia, při instalaci Web Compileru dostanete vybrat, do které jej integrovat.

A funguje to na pravé tlačítko myši, stisknuté na názvu souboru s některou z extenzí .less, .scss, .styl, .jsx, .es6 nebo .coffee v Solution Exploreru. Objeví se lokální menu s volbou Web Compiler, které má podvolbu Compile file, resp. podvolby Re-compile File a Remove from compilation ...

První překlad proběhne do složky, ve které se nachází zdroják, ale současně se vytvoří (nebo pokud existují, tak doplní) soubor compilerconfig.json a compilerconfig­.json.defaults. V souboru compilerconfig.json si pak můžete nastavit výstupní složku:

[
  {
    "outputFile": "css/uvod_do_css_preprocesoru_sass.css",
    "inputFile": "sass/uvod_do_css_preprocesoru_sass.scss"
  }
]

Volbou Remove from compilation ... (po potvrzení v potvrzovacím dialogu) odstraníte json objekt s údaji o výstupním a vstupním soubotu kompilace ze souboru compilerconfig­.json.

 
Odpovědět 22.11.2018 16:26
Avatar
Odpovídá na Jan Jurníček
Jan Jurníček:22.11.2018 17:37

... Jo, a ještě jsem zapomněl doplnit, že tento Web Compiler nevyžaduje Ruby.

 
Odpovědět 22.11.2018 17:37
Avatar
Odpovídá na Alex Russo
Andy Scheuchzer:23.11.2018 22:28

Mám stejný problém („No Build System“). Mohl bys mi prosím popsat svůj postup (jestli si ho ještě pamatuješ)?

Odpovědět 23.11.2018 22:28
Člověk, co si myslí, že snědl všechnu moudrost světa, i když tomu tak není.
Avatar
Zdeneek Choleva:28.11.2018 19:39

mám starší verzi kubuntu (mám starý a slabý počítač) do ted to stačilo nevíte někdo jak dostat ty pluginy na netbeans ?

 
Odpovědět 28.11.2018 19:39
Avatar
Kristijan Kominek:8. ledna 13:28

Našel jsem na youtube.com video jak nastavit SASS v PhpStormu. Snad to někomu pomůže.
Odkaz: https://www.youtube.com/watch?…

 
Odpovědět 8. ledna 13:28
Avatar
Jan Jedlička:9. ledna 20:36

Ahoj mam dotaz ohledne ukladani do souboru css. Lze nejak v sublimu nastavit kompilaci na klavesovou zkrazku ctrl+s misto ctrl+b?

 
Odpovědět 9. ledna 20:36
Avatar
Petr Kateřiňák:21. ledna 15:27

Ahoj, jak správně nastavit Sass.sublime-build, v případě, že používám klasickou adresářovou strukturu Sassu? Aktuálně, když něco změním např v scss/5-components/_lo­gin.scss, tak se mi vytvoří adresář /scss/css/_lo­gin.css, namísto, aby se zkompiloval hlavní soubor /scss/main.scss do /css/main.css. Přitom v Sass.sublime-build jsem si nastavil selektor na main.scss:

"selector": "main.sass, main.scss",
 
Odpovědět 21. ledna 15:27
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na Petr Kateřiňák
Honza Bittner:21. ledna 17:18

Ahoj, v článku je to napsané, hledej $path v sass v sublime text

Odpovědět 21. ledna 17:18
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Peter Kroupa
Člen
Avatar
Odpovídá na Alex Russo
Peter Kroupa:20. února 8:15

Zdar ako si to nakoniec vyriešil ?? mám úplne ten istý problém
Errno::ENOENT: No such file or directory @ rb_sysopen -
Use --trace for backtrace.
[Finished in 0.7s]

 
Odpovědět 20. února 8:15
Avatar
Odpovídá na Peter Kroupa
Andy Scheuchzer:20. února 19:01

Jestli jsi to zkoušel jako já, tedy jsi porozuměl řádku

Po stisku CTRL + B, neboli Menu->Tools->Build se nám soubor zkompiluje.

tak, že máš zkompilovat přímo .sublime-build, a ne soubor se styly, prostě kompiluj až styly, ne tohle. (Sorry, že se tak opakuju :-) )

Btw. můj komentář ze dřívějška už neplatí (už jsem pochopil), takže pokud si někdo čtete tohle (a četli jste i ten předtím), už se neobtěžujte.

Odpovědět 20. února 19:01
Člověk, co si myslí, že snědl všechnu moudrost světa, i když tomu tak není.
Avatar
skkotlas
Člen
Avatar
skkotlas:20. května 23:17

Ahoj, všetko som nainštaloval ako bolo v popise. Skopíroval som kód z nejakej stránky pre skúšku:

//scss
.navigation {
  …
}
.navigation__item {
  color: $navigation-idle-color;
  .navigation:hover & {
    color: $navigation-ready-color;
  }
}
.navigation__link {
  color: inherit;
  &:hover {
    color: $primary-color;
  }
}

Dal ctrl+b a vyhadzuje mi to

WARNING on line 3 of C:\Program Files\Sublime Text 3\testujem\div:
This selector doesn't have any properties and will not be rendered.
WARNING on line 4 of C:\Program Files\Sublime Text 3\testujem\div:
This selector doesn't have any properties and will not be rendered.
Error: Invalid CSS after "...tion-idle-color": expected expression (e.g. 1px, bold), was ";"
        on line 6 of C:\Program Files\Sublime Text 3\testujem\div
  Use --trace for backtrace.
[Finished in 1.2s with exit code 13]
[cmd: ['sass', '--update', 'C:\\Program Files\\Sublime Text 3\\testujem\\div:C:\\Program Files\\Sublime Text 3\\testujem/div.css', '--stop-on-error', '--no-cache']]
[dir: C:\Program Files\Sublime Text 3\testujem]

Čo robíš špatne prosím Vás? Dva dni sa to snažím rozbehnúť, neviem si rady...

 
Odpovědět 20. května 23:17
Avatar
Odpovídá na skkotlas
Michal Štěpánek:21. května 6:29

Koukni se na tu chybu lépe, hlavně na tu část, kde ti vypisuje ten error, tam ti píše kde přesně je chyba...

Error: Invalid CSS after "...tion-idle-color": expected expression (e.g. 1px, bold), was ";"
        on line 6 of C:\Program Files\Sublime Text 3\testujem\div
Odpovědět 21. května 6:29
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
skkotlas
Člen
Avatar
skkotlas:21. května 20:50

Ja som si ten error všimol, ale nikde v kurze nie sú napísané úplne základy.

Čítam:

Sass má dvě syntaxe - my budeme používat syntaxi SCSS (Sassy CSS)

Nemôžem využívať syntax scss? Tam je problém? Druhá syntax predpokladám je sass? Momentálne ak napíšem kód bez zložených zátvoriek a bodkočiarok, tak mi vytvorí css. Poradí mi niekto v tomto? :D

 
Odpovědět 21. května 20:50
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 165 zpráv z 165.