Styl dla elementu w umieszczony w innym stylu

pytanie zadane 6 stycznia 2018 w HTML i CSS przez kevin Mądrala (5,010 p.)

Witam!

W jaki sposób mam rozumieć zagnieżdżenie stylu CSS ? Przykładowy kod:

.element {

      magin: 0 auto;
      padding: 15px;


      a { color: red; }
      p { color: blue }
}

Czy to jest równoznaczne z .element > a, .element > p ?

4 odpowiedzi

odpowiedź 6 stycznia 2018 przez Marchiew Dyskutant (7,690 p.)

odpowiedź 6 stycznia 2018 przez mtk3d Nałogowiec (46,690 p.)

odpowiedź 6 stycznia 2018 przez radek024 Szeryf (77,160 p.)

Jest to charakterystyczne dla preprocesorów. Jeżei chcesz się dowiedzieć co i jak, to w tym wpisie opisałem czym jest nesting styli - i nie tylko: https://radek024.github.io/blog/css/strony-www/2017/07/28/preprocesory-css-opis/#nesting-styl%C3%B3w

komentarz 6 stycznia 2018 przez kevin Mądrala (5,010 p.)

Zmienne w SCSS są "wspierane" przez wszystkie przeglądarki ? Tzn. preprocesor SCSS w miejsce background-color wpisuje wartość zmiennej więc nie m tutaj mowy o braku wsparcia ?

komentarz 6 stycznia 2018 przez radek024 Szeryf (77,160 p.)

Zanim kod SCSSa zostanie przetłumaczony na CSS, przechodzi przez "tłumaczenie". Zmienne pozostają tylko po stronie SCSSa, później są zamienione na wartości w nich zawarte. Jestem święcie przekonany że gdzieś widziałem mixiny czy tez funkcje które zamieniają zmienne z SCSSa na te w CSS, ale trudno mi przypomnieć gdzie i kiedy. Czy ich stosowanie na sens? Trudno powiedzieć - nie testowałem czy zmienne CSSowe działają(natywne rzecz jasna działają) z funkcjami które oferują preprocesory(chociażby darken w SCSS), niewykluczone że nie.