Look Who it Was Random video

Responsive Sass, prehoď px na % za mňa (ukážka z bit.ly/SassKurz)

918 views · Published 11 October 2017 · 7:59 · Indexed 13 October 2026

Channel: Yablko · 2017 · Entertainment

Watch on YouTube

35 nových videí v Sass kurze :: http://bit.ly/SassKurz
Target / context je najväčšia klasika responzívneho dizajnu. Ak stránka má 1200 pixelov a vo vnútri hlavný obsah 720px a sidebar 480px, tak:

800 / 1200 = 0,6 (čiže 60%)
480 / 1200 = 0,4 (čiže 40%)

Rovnako je to pri veľkosti fontov, ak ich chcem prehodiť z fixných pixelov na relatívne em hodnoty. Ak rodič má veľkosť 18px a môj element má 13px, tak:

13px / 18px = 0.722222222em;

Ide o to, že ja dostanem dizajn, zrejme vo Photoshope. Tam si viem odmerať hodnoty v pixeloch. Keď chcem stránku responzívnu, potrebujem ju prehodiť do relatívnych hodnôt - percentá, em. 

A musím to spraviť so všetkými rozmermi. Veľkosť písma, výška riadku, každý margin, padding, border, radius, všetko. 

Vďaka Sass nemusím. V Sass môžem robiť matematiku.
Môžem zadeliť mixin, ktorý mi vráti už vypočítaný font-size, napr:

@mixin font-size($size, $context: 16) {
    font-size: ($size / $context) + em;
}


---------

Sleduj ma

📸 INSTAGRAM https://instagram.com/yablko
👍 FACEBOOK https://www.facebook.com/yablko.smrdi
🐦 TWITTER https://twitter.com/yablko
📚 BLOGY https://medium.com/@yablko

---------

Naučím ťa programovať

🕸 HTML a CSS kurz http://bit.ly/WebdizajnKurz
⌨ Základy programovania kurz http://bit.ly/ZakladyOOP
☕ JavaScript kurz http://bit.ly/JavaScriptKurz
😂 Humor http://bit.ly/doleziteUmenie

Všetko na http://yablko.sk Programovanie na http://brm.sk Kurzy na https://www.learn2code.sk

More from this channel