NOVINKA: Začni v IT jako webmaster s komplexním akreditovaným online kurzem Tvůrce WWW stránek. Zjisti více:
NOVINKA: Staň se datovým analytikem od 0 Kč a získej jistotu práce, lepší plat a nové kariérní možnosti. Více informací:

Diskuze – Lekce 3 - Datové typy v SASS

Zpět

Upozorňujeme, že diskuze pod našimi online kurzy jsou nemoderované a primárně slouží k získávání zpětné vazby pro budoucí vylepšení kurzů. Pro studenty našich rekvalifikačních kurzů nabízíme možnost přímého kontaktu s lektory a studijním referentem pro osobní konzultace a podporu v rámci jejich studia. Toto je exkluzivní služba, která zajišťuje kvalitní a cílenou pomoc v případě jakýchkoli dotazů nebo projektů.

Komentáře
Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:2.10.2014 17:54

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

Odpovědět
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar

Člen
Avatar
:3.7.2016 8:37

min(7px, 23px) => 23px
OPRAVA: max(7px, 23px) => 23px

Avatar
Lucie Fiedlerová
Člen
Avatar
Lucie Fiedlerová:11.9.2017 17:01

Kromě funkce max je ještě třeba opravit:
map-values("alfa": "hodnotaAlfy", "beta": "hodnotaBety") => "alfa", "beta"
OPRAVA: map-values("alfa": "hodnotaAlfy", "beta": "hodnotaBety") => "hodnotaAlfy", "hodnotaBety"

Jinak díky za článek.

Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:11.9.2017 17:12

Díky. Opravím.

Odpovědět
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Patrik Pastor
Člen
Avatar
Odpovídá na Honza Bittner
Patrik Pastor:3.3.2019 22:47

Čau, mohl bys mi prosím vysvětlit příklad 2 ? Proč převádíš čísla na stringy, když stringy nejde dělit?, Nechápu :(

Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Patrik Pastor
Honza Bittner:4.3.2019 12:14

Je to tam popsané, ale zkusím trochu jinak. Když se podíváš na font property, např. na https://www.w3schools.com/…ont_font.asp, tak vidíš, že jedna z syntaxí pro zápis hodnot je s použitím lomítka. (To se občas používá i u jiných vlastností.).

V tomto případně, pokud chceme nastavit vlastnost line-height z vlastnosti font, používá se syntaxe font-size/line-height. Jelikož by se normálním použitím proměnných vynutilo dělení, vkládáme obsah jako string, který nám zaručí, že ve výsledku bude formát jako 15px/22px např.

Jinými slovy:

font: 16px/18px;

je stejné jako

font-size: 16px;
line-height: 18px;

Odpovědět
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Jakub Podskalský
Člen
Avatar
Jakub Podskalský:19.5.2019 16:28

Zdravím, rád bych upozornil na chybu v článku: ne map-values("alfa": "hodnotaAlfy", "beta": "hodnotaBety") => "alfa", "beta", ale map-values("alfa": "hodnotaAlfy", "beta": "hodnotaBety") => "hodnotaAlfy", "hodnotaBety".
Na tuhle opravu jsi už jednomu komentujícímu nade mnou odepsal, že opravíš... Ale bylo to v roce 2017, takže jsi zřejmě zapomněl. :D Ale stává se, jen upozorňuji, aby to nepletlo nové čtenáře. :)

Avatar
Václav Dachs
Člen
Avatar
Václav Dachs:31.10.2019 17:16

Podle příkladu 1 by měl být text odstavce na webové stránce (následujícího html kódu) obarven červeně (viz následující kód scss). Z nějakého důvodu tomu tak není. můžete prosím poradit?

<!DOCTYPE html>
<html lang="cs-cz">
<head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" type="text/css" href="css/pokus.css"/>
        <title>Pokus</title>
</head>
<body>
        <h1>Pokus</h1>
        <p>Tento text by měl být červený.</p>
</body>
</html>

následuje kód z scss souboru

$barva-nadpisu: #8F8F8F;
$min: min(7px, 15px, 3px);

h1 {
        color: $barva-nadpisu;
}

p {
        @if $min == 3px {
                color: #FF0000;
        }
}
Odpovědět
S úsměvem jde všechno lépe :-)
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Václav Dachs
Honza Bittner:31.10.2019 17:32

Sass, jelikož je v "novém" CSS funkce min/max, tak pokud je syntaxe validní pro CSS, přenechá jí na zpracování CSS, výsledek je tedy např. "min(7px, 15px, 3px)". Pokud se využívá nějaká proměnná, např., tak to zpracuje Sass a výsledek bude hodnota (např. "3px").

Viz https://sass-lang.com/…al-functions#…

A na tvojí otázku: jelikož se tedy pak porovnává min(7px, 15px, 3px) a 3px, tak nedojde ke shodě a nic se nevygeneruje.

Editováno 31.10.2019 17:33
Odpovědět
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Václav Dachs
Člen
Avatar
Odpovídá na Honza Bittner
Václav Dachs:31.10.2019 18:22

Aha, ok. Už to funguje. Dík

Odpovědět
S úsměvem jde všechno lépe :-)
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 10 zpráv z 10.