KURS ONLINE SASS: Zmienne - część 5 z cholera wie ilu

Lipiec 09 2019
SASS KURS ONLINE 5

Dzisiaj kolejna dawka wiedzy technicznej. To już piąta część kursu SASS. Tym razem przypatrzymy się zmianach w zapisie składni.

Na początek wrzućmy sobie do HTML kilka prostych rzeczy, nie będziemy tutaj robić nic skąplikowanego po prostu 

 

<DIV class="box">
Test <SPAN>SASS</SPAN>

 </DIV>

 

Zacznijmy od tego jak wyglądałby klasyczny zapis CSS gdybyśmy chcieli odnieść się do niektórych z tych elementów:

.box{

    background: #FFF;

    padding: 20px;

    display: inline-block;

}

.box:hover{

    background: #AAF;

}

.box:after{

    content: ' GF';

}

.box span{

    color:#F00;

}

.box span:hover{

    color:#0F0;

}

 

Niby wszystko ok, jasno i przejrzyście, ale kiedy plik zaczyna mieć kilkaset linii to zaczyna się lekki bałagan. Teoretycznie można by robić wcięcia… ale kto je robi w CSS?

No to teraz zerknijmy jak można zapisać to samo w SCSS aby bardziej przejrzyście:

.box{

    background: #FFF;

    padding: 20px;

    display: inline-block;

    &:hover{

        background: #AAF;

    }

    &:after{

        content: ' GF';

    }

    span{

        color:#F00;

        &:hover{

            color:#0F0;

        }

    }

}

 

Na pierwszy rzut oka wydaje się dziwne ale… to dokładnie ten sam zapis. Zaczynamy od boxa, potem kiedy chcemy dodać :hover, :after, :before, :focus,... wystarczy poprzedzić stan albo pseudo klasę znakiem &. Kiedy robimy selektor złożony to po prostu wpisujemy w środku danego selektora kolejny selektor i jego stany. Początkowo ciężko się przyzwyczaić ale z biegiem czasu staje się to oczywistym zapisem. Tyle na dzisiaj.

 

Autor: Geek Factory
Powrót
Serwis korzysta z plików cookies w celu świadczenia spersonalizowanych usług na najwyższym poziomie, w tym usług statystycznych oraz w celu dostosowania zawartości do indywidualnych preferencji Użytkowników, zgodnie z Polityką Plików Cookies. Możesz określić warunki przechowywania lub dostępu do plików cookies w Twojej przeglądarce.