Autor Zpráva
iiic
Profil
(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
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
Kcko:

přesně tohle jsem neznal a přesně tohle jsem hledal… díky :)

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: