diff options
Diffstat (limited to 'cs-cz')
| -rw-r--r-- | cs-cz/brainfuck.html.markdown | 87 | ||||
| -rw-r--r-- | cs-cz/json.html.markdown | 62 | ||||
| -rw-r--r-- | cs-cz/markdown.html.markdown | 260 | ||||
| -rw-r--r-- | cs-cz/python3.html.markdown | 2 | ||||
| -rw-r--r-- | cs-cz/sass.html.markdown | 439 |
5 files changed, 849 insertions, 1 deletions
diff --git a/cs-cz/brainfuck.html.markdown b/cs-cz/brainfuck.html.markdown new file mode 100644 index 00000000..29abc21f --- /dev/null +++ b/cs-cz/brainfuck.html.markdown @@ -0,0 +1,87 @@ +--- +language: brainfuck +contributors: + - ["Prajit Ramachandran", "http://prajitr.github.io/"] + - ["Mathias Bynens", "http://mathiasbynens.be/"] +translators: + - ["Vojta Svoboda", "https://github.com/vojtasvoboda/"] +filename: learnbrainfuck-cz.bf +lang: cs-cz +--- + +Brainfuck (psaný bez kapitálek s vyjímkou začátku věty) je extrémně minimální +Turingovsky kompletní (ekvivalentní) programovací jazyk a má pouze 8 příkazů. + +Můžete si ho vyzkoušet přímo v prohlížeči s [brainfuck-visualizer](http://fatiherikli.github.io/brainfuck-visualizer/). + +``` +Jakýkoliv znak mimo "><+-.,[]" (bez uvozovek) je ignorován. + +Brainfuck je reprezentován jako pole, které má 30.000 buněk s počátkem v nule +a datovým ukazatelem na aktuální buňce. + +Můžeme využít těchto osm příkazů: ++ : Přičte k aktuální buňce jedničku. +- : Odečte od aktuální buňky jedničku. +> : Posune datový ukazatel na další buňku, která je napravo. +< : Posune datový ukazatel na předchozí buňku, která je nalevo. +. : Vytiskne ASCII hodnotu aktuální buňky (například 65 = 'A'). +, : Načte jeden znak do aktuální buňky. +[ : Pokud je hodnota aktuální buňky nulová, přeskočí na buňku odpovídající ] . + Jinak skočí na další instrukci. +] : Pokud je hodnota aktuální buňky nulova, přeskočí na další instrukci. + Jinak skočí zpět na instrukci odpovídající [ . + +[ a ] tak tvoří 'while' smyčku a tyto symboly musí tak být v páru. + +Pojďme se mrknout na některé brainfuck programy. + +++++++ [ > ++++++++++ < - ] > +++++ . + +Tento program vypíše písmeno 'A' (v ASCII je to číslo 65). Nejdříve navýší +buňku #1 na hodnotu 6. Buňka #1 bude použita pro smyčku. Potom program vstoupí +do smyčky ([) a sníží hodnotu buňky #1 o jedničku. Ve smyčce zvýší hodnotu +buňky #2 desetkrát, vrátí ze zpět na buňku #1 a sníží její hodnotu o jedničku. +Toto se stane šestkrát (je potřeba šestkrát snížit hodnotu buňky #1, aby byla +nulová a program přeskočil na konec cyklu označený znakem ]. + +Na konci smyčky, kdy jsme na buňce #1 (která má hodnotu 0), tak má buňka #2 +hodnotu 60. Přesuneme se na buňku #2 a pětkrát zvýšíme její hodnotu o jedničku +na hodnotu 65. Na konci vypíšeme hodnotu buňky #2 - 65, což je v ASCII znak 'A' +na terminálu. + + +, [ > + < - ] > . + +Tento program přečte znak z uživatelského vstupu a zkopíruje ho do buňky #1. +Poté začne smyčka - přesun na buňku #2, zvýšení hodnoty buňky #2 o jedničku, +přesun zpět na buňku #1 a snížení její hodnoty o jedničku. Takto smyčka pokračuje +do té doby, než je buňka #1 nulová a buňka #2 nabyde původní hodnotu buňky #1. +Protože jsme na buňce #1, přesuneme se na buňku #2 a vytiskneme její hodnotu +v ASCII. + +Je dobré vědět, že mezery jsou v programu uvedené pouze z důvodu čitelnosti. +Program je možné klidně zapsat i takto: + +,[>+<-]>. + + +Nyní se podívejte na tento program a zkuste zjistit co dělá: + +,>,< [ > [ >+ >+ << -] >> [- << + >>] <<< -] >> + +Tento program vezme dvě čísla ze vstupu a vynásobí je. + +Program nejdříve načte dvě vstupní hodnoty. Poté začíná smyčka řízená hodnotou +v buňce #1 - přesun na buňku #2 a start druhé vnořené smyčky, která je řízená +hodnotou v buňce #2 a zvyšuje hodnotu v buňce #3. Nicméně je zde problém +kdy na konci vnitřní smyčky je v buňce #2 nula a smyčka by tak znovu +napokračovala. Vyřešíme to tak, že zvyšujeme o jedničku i buňku #4 a její +hodnotu poté překopírujeme do buňky #2. Na konci programu je v buňce #3 +výsledek. +``` + +A to je brainbuck. Zase tak složitý není, co? Zkuste si nyní napsat nějaký +vlastní brainfuck program a nebo interpretr v jiném jazyce, což není zase +tak složité, ale pokud jste opravdový masochista, zkuste si naprogramovat +interpretr jazyka brainfuck v jazyce... brainfuck :) diff --git a/cs-cz/json.html.markdown b/cs-cz/json.html.markdown new file mode 100644 index 00000000..5972da5e --- /dev/null +++ b/cs-cz/json.html.markdown @@ -0,0 +1,62 @@ +--- +language: json +contributors: + - ["Anna Harren", "https://github.com/iirelu"] + - ["Marco Scannadinari", "https://github.com/marcoms"] +translators: + - ["Vojta Svoboda", "https://github.com/vojtasvoboda/"] +filename: learnjson-cz.json +lang: cs-cz +--- + +JSON je exterémně jednoduchý datově nezávislý formát a bude asi jeden z +nejjednodušších 'Learn X in Y Minutes' ze všech. + +JSON nemá ve své nejzákladnější podobě žádné komentáře, ale většina parserů +umí pracovat s komentáři ve stylu jazyka C (`//`, `/* */`). Pro tyto účely +však budeme používat 100% validní JSON bez komentářů. Pojďme se podívat na +syntaxi formátu JSON: + +```json +{ + "klic": "value", + + "hodnoty": "Musí být vždy uvozený v dvojitých uvozovkách", + "cisla": 0, + "retezce": "Hellø, wørld. Všechny unicode znaky jsou povolené, společně s \"escapováním\".", + "pravdivostni_hodnota": true, + "prazdna_hodnota": null, + + "velke_cislo": 1.2e+100, + + "objekt": { + "komentar": "Most of your structure will come from objects.", + + "pole": [0, 1, 2, 3, "Pole nemusí být pouze homogenní.", 5], + + "jiny_objekt": { + "comment": "Je povolené jakkoli hluboké zanoření." + } + }, + + "cokoli": [ + { + "zdroje_drasliku": ["banány"] + }, + [ + [1, 0, 0, 0], + [0, 1, 0, 0], + [0, 0, 1, "neo"], + [0, 0, 0, 1] + ] + ], + + "alternativni_styl_zapisu": { + "komentar": "Mrkni se na toto!" + , "pozice_carky": "Na pozici čárky nezáleží - pokud je před hodnotou, ať už je kdekoli, tak je validní." + , "dalsi_komentar": "To je skvělé." + }, + + "to_bylo_rychle": "A tím jsme hotový. Nyní již víte vše, co může formát JSON nabídnout!" +} +``` diff --git a/cs-cz/markdown.html.markdown b/cs-cz/markdown.html.markdown new file mode 100644 index 00000000..568e4343 --- /dev/null +++ b/cs-cz/markdown.html.markdown @@ -0,0 +1,260 @@ +--- +language: markdown +lang: cs-cz +contributors: + - ["Dan Turkel", "http://danturkel.com/"] +translators: + - ["Michal Martinek", "https://github.com/MichalMartinek"] +filename: markdown-cz.md +lang: cs-cz +--- + +Markdown byl vytvořen Johnem Gruberem v roce 2004. Je zamýšlen jako lehce čitelná +a psatelná syntaxe, která je jednoduše převeditelná do HTML (a dnes i do mnoha +dalších formátů) + +```markdown +<!-- Markdown je nadstavba nad HTML, takže jakýkoliv kód HTML je validní +Markdown, to znamená, že můžeme používat HTML elementy, třeba jako komentář, a +nebudou ovlivněny parserem Markdownu. Avšak, pokud vytvoříte HTML element v +Markdownu, tak nemůžete používat syntaxi Markdownu uvnitř tohoto elementu. --> + +<!-- Markdown se také mírně liší v jednotlivých interpretacích parseru. Tento +návod vás bude upozorňovat, které vlastnosti jsou obecné a které specifické pro +konkrétní parser. --> + +<!-- Nadpisy --> +<!-- Můžete vytvořit HTML elementy <h1> až <h6> jednoduše tak, že text předsadíte +počtem křížků (#), podle toho jaké úrovně to má být nadpis --> +# Toto je <h1> +## Toto je <h2> +### Toto je <h3> +#### Toto je <h4> +##### Toto je <h5> +###### Toto je <h6> + +<!-- Markdown obsahuje taky dvě další cesty, jak udělat h1 a h2 --> +Toto je h1 +========== + +Toto je h2 +---------- + +<!-- Jednoduché stylování textu --> +<!-- Pomocí markdownu můžete text jednoduše označit jako kurzívu či tučný --> + +*Tento text je kurzívou;* +_Stejně jako tento._ + +**Tento text je tučně** +__Stejně jako tento.__ + +***Tento text je obojí*** +**_Jako tento!_** +*__A tento!__* + +<!-- Ve verzi Markdownu od GitHubu, máme k dispozici taky prošktrnutí: --> + +~~Tento text je prošktrnutý.~~ + +<!-- Odstavce jsou jedna nebo více řádek textu, oddělených jednou nebo více prázdnými řádky. --> + +Toto je odstavec. Píši odstavec, není to zábava? + +Teď jsem v odstavci 2. +Jsem pořád v odstavci 2! + + +Toto je odstavec 3. + +<!-- Chtěli jste někdy vložit znak <br /> tag? Můžete napsat na konec odstavce +dvě nebo více mezer a potom začít nový odstavec. --> + +Tento odstavec končí dvěma mezerami. + +Nad tímto odstavcem je <br />! + +<!-- Blokové citace se dělají jednoduše pomocí znaku >. --> + +> Toto je bloková citace. Můžete dokonce +> manuálně rozdělit řádky, a před každý vložit >, nebo nechat vaše řádky jakkoliv dlouhé, ať se zarovnají sami. +> Nedělá to rozdíl, dokud začínáte vždy znakem >. + +> Můžu použít více než jednu +>> odsazení? +> Jak je to úhledné, že? + +<!-- Seznamy --> +<!-- Nečíslovaný seznam můžete jednoduše udělat pomocí hvězdiček, plusů, nebo + pomlček --> + +* Položka +* Položka +* Jinná položka + +nebo + ++ Položka ++ Položka ++ Další položka + +nebo + +- Položka +- Položka +- Další položka + +<!-- Číslovaný seznam se dělají pomocí čísla a . --> + +1. Položka jedna +2. Položka dvě +3. Položka tři + +<!-- Nemusíte dokonce psát čísla správně a markdown je zobrazi správně, + ale nemusí to být vždy dobrý nápad --> + +1. Položka jedna +1. Položka dvě +1. Položka tři +<!-- (Toto zobrazí to samě, jako příklad nadtím.) --> + +<!-- Můžete také tvořit podseznamy --> + +1. Položka jedna +2. Položka dvě +3. Položka tři + * Podpoložka + * Podpoložka +4. Položka čtyři + +<!-- Existují i zašktávací seznamy. Toto vytvoří HTML checkboxy. --> + +Boxy níže bez 'x' jsou nezašktrnuté checkboxy. +- [ ] První úkol +- [ ] Druhý úkol +Tento box bude zašktrnutý +- [x] Tento úkol byl dokončen + +<!-- Bloky ködu --> +<!-- Můžete označit kód bloku (který používá <code> element) odsazením pomocí 4 + mezer, nebo tabu --> + + Toto je kód + Stejně jako toto + +<!-- Můžete dokonce přidat další 4 mezery nebo tab pro další odsazení --> + + moje_pole.each do |i| + puts i + end + +<!-- Kód na řádku může být označen pomocí zpětných apostrofů ` --> + +Jan nevědel, jak se dělá `go_to()` funkce! + +<!-- V Markdownu od GitHubu , můžete použít speciální syntaxi pro kód --> + +\`\`\`ruby <!-- vyjma zpětných lomítek, jenom ```ruby ! --> +def neco + puts "Ahoj světe!" +end +\`\`\` <!-- zde taky, žádné zpětná lomítka, pouze ``` --> + +<!-- Text výše nepotřebuje odsazení a navíc GitHub použije zvýraznění označeného + jazyka. --> + +<!-- Horizontální čára (<hr />) --> +<!-- Horizontální čára se jednoduše přidá pomocí 3 nebo více hvězdiček nebo pomlček +s nebo bez mezer. --> + +*** +--- +- - - +**************** + +<!-- Odkazy --> +<!-- Jedna z nejlepších věcí na Markdownu je, jak jednoduše se dělají odkazy. +Dejte text, který chcete zobrazit, do [] následovaný url v závorkách () a je to. --> + +[Klikni na mě!](http://test.com/) + +<!-- Můžete také přidat jméno linku pomocí uvozovek --> + +[Klikni na mě!](http://test.com/ "Odkaz na Test.com") + +<!-- Relativní cesty fungují taky --> + +[Jdi na hudbu](/hudba/). + +<!-- Markdown taktéž podporuje reference odkazů. --> + +[Klikni na tento odkaz][link1] pro více informací! +[Taky zkontrolujte tento odkaz][neco], když chcete. + +[link1]: http://test.com/ "Cool!" +[neco]: http://neco.czz/ "Dobře!" + +<!-- Titulek může být v apostrofech nebo závorkách, nebo vyjmutý úplně. Reference + může být kdekoliv ve vašem dokumentu a identifikátor může být jakýkoliv, dokud + je unikátní.--> + +<!-- Také existuje "implicitní pojmenování", které použije text jako id --> + +[Toto][] je odkaz.. + +[toto]: http://totojelink.cz/ + +<!-- Ale toto není zrovna běžné užívané. --> + +<!-- Obrázky --> +<!-- Obrázky se dělají stejně jako odkazy, ale s vykřičníkem na začátku --> + + + +<!-- Reference fungují, jak bychom čekali--> + +![Toto je atribut alt][mujobrazek] + +[mujobrazek]: relativni/cesta/obrazek.jpg "a toto by byl titulek" + +<!-- Ostatní --> +<!-- Automatické odkazy --> + +<http://stranka.cz/> je stejná jako +[http://stranka.cz/](http://stranka.cz/) + +<!-- Automatické odkazy pro emaily--> + +<jmeno@prijmeni.cz> + +<!-- Escapování znaků --> + +Chci napsat *tento text obklopený hvězdičkami*, ale nechci aby to bylo kurzívou, tak udělám: \*tento text obklopený hvězdičkami\*. + +<!-- Klávesové zkratky --> +<!-- V Markdownu od GitHubu, můžete použít tag <kbd> k reprezentování klaves na počítači --> + +Váš počítač přestal pracovat? Zkuste +<kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd> + +<!-- Tabulky --> +<!-- Tabulky jsou povolené pouze v Markdownu od GitHubu a jsou trochu podivně, + ale když je opravdu chcete: --> + +| Sloupec1 | Sloupec2 | Sloupec3 | +| :----------- | :------: | ------------: | +| Vlevo zarovn.| Na střed | Vpravo zarovn.| +| blah | blah | blah | + +<!-- nebo, to jde i taky: --> + +Sloupec 1 | Sloupec2 | Sloupec3 +:-- | :-: | --: +Ohh toto je tak ošklivé | radši to | nedělejte + +<!-- Konec --> + +``` + +Pro více informací, prozkoumejte oficiální článek o syntaxi od Johna Grubera + [zde](http://daringfireball.net/projects/markdown/syntax) a skvělý tahák od Adama Pritcharda [zde](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet). diff --git a/cs-cz/python3.html.markdown b/cs-cz/python3.html.markdown index 6d2fd1eb..b498046a 100644 --- a/cs-cz/python3.html.markdown +++ b/cs-cz/python3.html.markdown @@ -566,7 +566,7 @@ Clovek.odkaslej_si() # => "*ehm*" # Lze importovat moduly import math -print(math.sqrt(16)) # => 4 +print(math.sqrt(16.0)) # => 4 # Lze také importovat pouze vybrané funkce z modulu from math import ceil, floor diff --git a/cs-cz/sass.html.markdown b/cs-cz/sass.html.markdown new file mode 100644 index 00000000..0d2fca64 --- /dev/null +++ b/cs-cz/sass.html.markdown @@ -0,0 +1,439 @@ +--- +language: sass +filename: learnsass-cz.scss +contributors: + - ["Laura Kyle", "https://github.com/LauraNK"] + - ["Sean Corrales", "https://github.com/droidenator"] +translators: + - ["Michal Martinek", "https://github.com/MichalMartinek"] +lang: cs-cz +--- + +Sass je rozšíření jazyka CSS, který přidává nové vlastnosti jako proměnné, zanořování, mixiny a další. +Sass (a další preprocesory, jako [Less](http://lesscss.org/)) pomáhají vývojářům psát udržovatelný a neopakující (DRY) kód. + +Sass nabízí dvě možnosti syntaxe. SCSS, které je stejná jako CSS, akorát obsahuje nové vlastnosti Sassu. Nebo Sass, který používá odsazení místo složených závorek a středníků. +Tento tutoriál bude používat syntaxi CSS. + + +Pokud jste již obeznámeni s CSS3, budete schopni používat Sass relativně rychle. Nezprostředkovává nějaké úplně nové stylové možnosti, spíše nátroje, jak psát Vás CSS kód více efektivně, udržitelně a jednoduše. + +```scss + + +//Jednořádkové komentáře jsou ze Sassu při kompilaci vymazány + +/*Víceřádkové komentáře jsou naopak zachovány */ + + + +/*Proměnné +==============================*/ + + + +/* Můžete uložit CSS hodnotu (jako třeba barvu) do proměnné. +Použijte symbol '$' k jejímu vytvoření. */ + +$hlavni-barva: #A3A4FF; +$sekundarni-barva: #51527F; +$body-font: 'Roboto', sans-serif; + +/* Můžete používat proměnné napříč vaším souborem. +Teď, když chcete změnit barvu, stačí ji změnit pouze jednou.*/ + +body { + background-color: $hlavni-barva; + color: $sekundarni-barva; + font-family: $body-font; +} + +/* Toto se zkompiluje do: */ +body { + background-color: #A3A4FF; + color: #51527F; + font-family: 'Roboto', sans-serif; +} + + +/* Toto je o hodně více praktické, než měnit každý výskyt barvy. */ + + + +/*Mixiny +==============================*/ + + + +/* Pokud zjistíte, že píšete kód pro více než jeden element, můžete jej uložit do mixinu. + +Použijte '@mixin' direktivu, plus jméno vašeho mixinu.*/ + +@mixin na-stred { + display: block; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; +} + +/* Mixin vložíte pomocí '@include' a jména mixinu */ + +div { + @include na-stred; + background-color: $hlavni-barva; +} + +/*Což se zkompiluje do: */ +div { + display: block; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; + background-color: #A3A4FF; +} + + +/* Můžete využít mixiny i třeba pro takovéto ušetření práce: */ + +@mixin velikost($sirka, $vyska) { + width: $sirka; + height: $vyska; +} + +/*Stačí vložit argumenty: */ + +.obdelnik { + @include velikost(100px, 60px); +} + +.ctverec { + @include velikost(40px, 40px); +} + +/* Toto se zkompiluje do: */ +.obdelnik { + width: 100px; + height: 60px; +} + +.ctverec { + width: 40px; + height: 40px; +} + + + +/*Funkce +==============================*/ + + + +/* Sass obsahuje funkce, které vám pomůžou splnit různé úkoly. */ + +/* Funkce se spouštějí pomocí jejich jména, které následuje seznam argumentů uzavřený v kulatých závorkách. */ +body { + width: round(10.25px); +} + +.footer { + background-color: fade_out(#000000, 0.25) +} + +/* Se zkompiluje do: */ + +body { + width: 10px; +} + +.footer { + background-color: rgba(0, 0, 0, 0.75); +} + +/* Můžete také definovat vlastní funkce. Funkce jsou velmi podobné mixinům. + Když se snažíte vybrat mezi funkcí a mixinem, mějte na paměti, že mixiny + jsou lepší pro generování CSS kódu, zatímco funkce jsou lepší pro logiku. + Příklady ze sekce Matematické operátory jsou skvělí kandidáti na + znovupoužitelné funkce. */ + +/* Tato funkce vrací poměr k velikosti rodiče v procentech. +@function vypocitat-pomer($velikost, $velikost-rodice) { + @return $velikost / $velikost-rodice * 100%; +} + +$hlavni obsah: vypocitat-pomer(600px, 960px); + +.hlavni-obsah { + width: $hlavni-obsah; +} + +.sloupec { + width: vypocitat-pomer(300px, 960px); +} + +/* Zkompiluje do: */ + +.hlavni-obsah { + width: 62.5%; +} + +.sloupec { + width: 31.25%; +} + + + +/*Dědění +==============================*/ + + + +/*Dědění je způsob jak používat vlastnosti pro jeden selektor ve druhém. */ + +.oznameni { + @include velikost(5em, 5em); + border: 5px solid $sekundarni-barva; +} + +.oznameni-uspech { + @extend .oznameni; + border-color: #22df56; +} + +/* Zkompiluje do: */ +.oznameni, .oznameni-uspech { + width: 5em; + height: 5em; + border: 5px solid #51527F; +} + +.oznameni-uspech { + border-color: #22df56; +} + + +/* Dědění CSS výrazů je preferováno před vytvořením mixinu kvůli způsobu, + jakým způsobem Sass dává dohromady třídy, které sdílejí stejný kód. + Kdyby to bylo udělané pomocí mixinu, tak výška, šířka, rámeček by byl v + každém výrazu, který by volal mixin. I když tohle neovlivní vaše workflow, + přidá to kód navíc do souborů. */ + + +/*Zanořování +==============================*/ + + + +/*Sass vám umožňuje zanořovat selektory do selektorů */ + +ul { + list-style-type: none; + margin-top: 2em; + + li { + background-color: #FF0000; + } +} + +/* '&' nahradí rodičovský element. */ +/* Můžete také zanořovat pseudo třídy. */ +/* Pamatujte, že moc velké zanoření do hloubky snižuje čitelnost. + Doporučuje se používat maximálně trojité zanoření. + Na příklad: */ + +ul { + list-style-type: none; + margin-top: 2em; + + li { + background-color: red; + + &:hover { + background-color: blue; + } + + a { + color: white; + } + } +} + +/* Zkompiluje do: */ + +ul { + list-style-type: none; + margin-top: 2em; +} + +ul li { + background-color: red; +} + +ul li:hover { + background-color: blue; +} + +ul li a { + color: white; +} + + + +/*Částečné soubory a importy +==============================*/ + + + +/* Sass umožňuje vytvářet částečné soubory. Tyto soubory pomahájí udržovat váš + kód modulární. Tyto soubory by měli začínat vždy '_', např. _reset.css. + Částečné soubory se nepřevádí do CSS. */ + +/* Toto je kód, který si uložíme do souboru _reset.css */ + +html, +body, +ul, +ol { + margin: 0; + padding: 0; +} + +/* Sass obsahuje @import, které může být použit pro import částečných souborů. + Toto se liší od klasického CSS @import, který dělá HTTP požadavek na stáhnutí + souboru. Sass vezme importovaný soubor a vloží ho do kompilovaného kódu. */ + +@import 'reset'; + +body { + font-size: 16px; + font-family: Helvetica, Arial, Sans-serif; +} + +/* Zkompiluje do: */ + +html, body, ul, ol { + margin: 0; + padding: 0; +} + +body { + font-size: 16px; + font-family: Helvetica, Arial, Sans-serif; +} + + + +/*Zástupné selektory +==============================*/ + + + +/* Zástupné selektory jsou užitečné, když vytváříte CSS výraz, ze kterého + chcete později dědit. Když chcete vytvořit výraz, ze kterého je možné pouze + dědit pomocí @extend, vytvořte zástupný selektor s CSS výrazem. Ten začíná + symbolem '%' místo '.' nebo '#'. Tyto výrazy se neobjeví ve výsledném CSS */ + +%okno-obsahu { + font-size: 14px; + padding: 10px; + color: #000; + border-radius: 4px; +} + +.okno-zpravy { + @extend %okno-obsahu; + background-color: #0000ff; +} + +/* Zkompiluje do: */ + +.okno-zpravy { + font-size: 14px; + padding: 10px; + color: #000; + border-radius: 4px; +} + +.okno-zpravy { + background-color: #0000ff; +} + + + +/*Matematické operace +==============================*/ + + + +/* Sass obsahuje následující operátory: +, -, *, /, and %. Tyto operátory + můžou být velmi užitečné pro počítání hodnot přímo ve vašem souboru Sass. + Níže je příklad, jak udělat jednoduchý dvousloupcový layout. */ + +$oblast-obsahu: 960px; +$hlavni-obsah: 600px; +$vedlejsi-sloupec: 300px; + +$obsah-velikost: $hlavni-obsah / $oblast-obsahu * 100%; +$vedlejsi-sloupec-velikost: $vedlejsi-sloupec / $oblast-obsahu * 100%; +$zbytek-velikost: 100% - ($main-size + $vedlejsi-sloupec-size); + +body { + width: 100%; +} + +.hlavni-obsah { + width: $obsah-velikost; +} + +.vedlejsi-sloupec { + width: $vedlejsi-sloupec-velikost; +} + +.zbytek { + width: $zbytek-velikost; +} + +/* Zkompiluje do: */ + +body { + width: 100%; +} + +.hlavni-obsah { + width: 62.5%; +} + +.vedlejsi-sloupec { + width: 31.25%; +} + +.gutter { + width: 6.25%; +} + + +``` + + + +## SASS nebo Sass? +Divili jste se někdy, jestli je Sass zkratka nebo ne? Pravděpodobně ne, ale řeknu vám to stejně. Jméno tohoto jazyka je slovo, "Sass", a ne zkratka. +Protože to lidé konstatně píší jako "SASS", nazval ho autor jazyka jako "Syntactically Awesome StyleSheets" (Syntaktický úžasně styly). + + +## Procvičování Sassu +Pokud si chcete hrát se Sassem ve vašem prohlížeči, navštivte [SassMeister](http://sassmeister.com/). +Můžete používát oba dva způsoby zápisu, stačí si vybrat v nastavení SCSS nebo SASS. + + +## Kompatibilita + +Sass může být použit v jakémkoliv projektu, jakmile máte program, pomocí kterého ho zkompilujete do CSS. Pokud si chcete ověřit, že CSS, které Sass produkuje je kompatibilní s prohlížeči: + +[QuirksMode CSS](http://www.quirksmode.org/css/) a [CanIUse](http://caniuse.com) jsou skvělé stránky pro kontrolu kompatibility. + + +## Kam dál? +* [Oficiální dokumentace](http://sass-lang.com/documentation/file.SASS_REFERENCE.html) +* [The Sass Way](http://thesassway.com/) obsahuje tutoriál a řadu skvělých článků |