NOVINKA - Online rekvalifikační kurz Python programátor. Oblíbená a studenty ověřená rekvalifikace - nyní i online.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - 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
2.10.2014 17:54
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

 
Odpovědět
3.7.2016 8:37
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.

 
Odpovědět
11.9.2017 17:01
Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:11.9.2017 17:12

Díky. Opravím.

Odpovědět
11.9.2017 17:12
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 :(

 
Odpovědět
3.3.2019 22:47
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
4.3.2019 12:14
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. :)

 
Odpovědět
19.5.2019 16:28
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
31.10.2019 17:16
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
31.10.2019 17:32
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
31.10.2019 18:22
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.