IT rekvalifikácia. Seniorní programátori zarábajú až 6 000 €/mesiac a rekvalifikácia je prvým krokom. Zisti, ako na to!

Diskusia – 3. diel - Dátové typy v SASS

Späť

Upozorňujeme, že diskusie pod našimi online kurzami sú nemoderované a primárne slúžia na získavanie spätnej väzby pre budúce vylepšenie kurzov. Pre študentov našich rekvalifikačných kurzov ponúkame možnosť priameho kontaktu s lektormi a študijným referentom pre osobné konzultácie a podporu v rámci ich štúdia. Toto je exkluzívna služba, ktorá zaisťuje kvalitnú a cielenú pomoc v prípade akýchkoľvek otázok alebo projektov.

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

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

Odpovedať
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

 
Odpovedať
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.

 
Odpovedať
11.9.2017 17:01
Avatar
Honza Bittner
Tvůrce
Avatar
Honza Bittner:11.9.2017 17:12

Díky. Opravím.

Odpovedať
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
Odpovedá 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 :(

 
Odpovedať
3.3.2019 22:47
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovedá 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;

Odpovedať
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. :)

 
Odpovedať
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;
        }
}
Odpovedať
31.10.2019 17:16
S úsměvem jde všechno lépe :-)
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovedá 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.

Editované 31.10.2019 17:33
Odpovedať
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
Odpovedá na Honza Bittner
Václav Dachs:31.10.2019 18:22

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

Odpovedať
31.10.2019 18:22
S úsměvem jde všechno lépe :-)
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!