| Autor | Zpráva | ||
|---|---|---|---|
| iiic Profil |
#1 · Zasláno: 13. 1. 2016, 10:26:05
(doufám, že v sekci css se řeší i preprocesory :) )
Potřeboval bych totiž radu či nasměrování jak nějak v scss vyřešit závislosti jedné css vlastnosti na jiné css vlastnosti mám zhruba takovýto kód: #neco::after {
content: 'x'
width: 15px - 2px;
height: 15px;
padding-left: 2px;
border-radius: 50%;
}výsledkem má být x-ko v kolečku, ale to v tomto případě není až tak důležité. Jde mi o to, že z width ubírám tolik px, kolik jich dám do padding-left a tento princip bych nějak rád vyjádřil v scss. Napadá mě leda si vytvořit globální proměnnou a zapsat to nějak takto: $x-shift: 2px;
.
.
.
#neco::after {
content: 'x'
width: 15px - $x-shift;
height: 15px;
padding-left: $x-shift;
border-radius: 50%;
}jenže mi to přijde že vytvářím globální proměnnou kvůli takovéto drobnosti a pak už ji nikde jinde stejně nevyužiji. Nedá se nějak použít proměnná jen v rámci jednoho css pravidla ? Případně nedá se vzít hodnota padding-left a v rámci tohoto css pravidla ji použít? Nebo nějaké jiné elegantní řešení? |
||
| Kcko Profil |
iiic:
Tak si napiš mixin nebo funkci a samozřejmě nějaký konfigurák s proměnnýma je standardem. Přečti si sass-guidelin.es A jinak proměnná může být "lokální" uvnitř CSS zápisu. Pak už dál neni viditelná. .pravidlo
{
$var: 50px;
width: $var;
}
// tady a dal už $var neexistuje. |
||
| Chamurappi Profil |
#3 · Zasláno: 13. 1. 2016, 12:40:04
Reaguji na iiice:
„výsledkem má být x-ko v kolečku, ale to v tomto případě není až tak důležité“ Jestli má být vodorovně uprostřed, tak používat k tomu padding mi přijde nemoudré, když jde vycentrovat univerzálně.
Navíc nikdy nevíš, jak bude písmo velké (uživatel může mít jinou velikost, nebo napevno nastavenou jinou font-family), takže šachovat s nějakými konkrétními pixelovými délkami také není rozumné, web není plakát.
Krom toho můžeš používat box-sizing: border-box a pak od šířky nemusíš nic odečítat.
(A ještě mě napadá, že :after se dvěma dvojtečkami bezdůvodně odřezává starší Explorer.)
|
||
| iiic Profil |
#4 · Zasláno: 14. 1. 2016, 16:15:57
Kcko:
přesně tohle jsem neznal a přesně tohle jsem hledal… díky :) |
||
|
Časová prodleva: 9 let
|
|||
0