- Stefanescu Mihai a postat in Paginare in PHP
- johhny a postat in Paginare in PHP
- Stefanescu Mihai a postat in Cum pot afisa eroarea cand utilizatorul a scris un username gresit sau o parola gresita?
- madalin a postat in Cum pot afisa eroarea cand utilizatorul a scris un username gresit sau o parola gresita?
- Stefanescu Mihai a postat in Featureuri site
Sass â Nesting
In acest articol din serie am sa vorbesc despre nesting.
Ce inseamna nesting in sass si scss? Inseamna ca putem scrie proprietati css in interiorul altor proprietati css. Chiar daca acum nu intelegeti ce vreau sa spun si probabil va ganditi ca este foarte complicat, nu este, de fapt este foarte intuitiv.
Pentru a va explica nesting-ul cat mai simplu mi-am modificat putin codul HTML, astfel incat sa am un articol cu care sa lucrez, iar acum arata astfel:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Invata-Programare.ro - Tutorial SASS & SCSS</title>
<link href="style/style.css" rel="stylesheet">
</head>
<body>
<article>
<header>
<h1>Tutorial SASS si SCSS</h1>
<span>Articol scris de <a href="#">Mihai</a> la data de <time>23 August 2015</time> </span>
</header>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mollis, erat at consequat efficitur, lacus massa tempor enim, at semper lectus diam vitae enim. Maecenas varius, mi sed dignissim tincidunt, metus erat aliquam leo, sed molestie tellus turpis ut lorem. Aliquam nec nisl at sem placerat molestie. Sed sapien eros, iaculis eget congue quis, laoreet ac sapien. Nulla sed sodales libero. Vivamus rhoncus sem velit, mattis interdum justo imperdiet vitae. Morbi eget eros sodales, volutpat enim a, lobortis enim. Quisque et nulla eu tortor egestas pharetra nec vel ex. Duis consectetur dui vel dolor aliquam, nec facilisis ligula efficitur. Proin accumsan, tellus non posuere tempus, ipsum nulla rutrum libero, lobortis commodo elit justo eu nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer eget tristique mauris. Donec eu sagittis nunc, a egestas massa. Donec malesuada condimentum dui sit amet commodo. Quisque dictum vehicula ex, eu hendrerit erat. Sed vehicula, nisl sed fringilla finibus, ligula elit congue orci, eget finibus nisi augue sit amet nibh.
</p>
</article>
</body>
</html>
Iata si cum arata in clipa aceasta fisierul html:
Nu arata prea bine. nu?
Hai sa incepem lucrurile cunoscute deja, hai sa scriem cateva variabile care sa contina culorile dorite.
Fisierul meu SCSS arata astfel in acest moment:
$heading: #3877df; $paragraf: #515151; $autor: #41b7d8; $bg: #ececec; $border: #b2b2b2;
N-am facut mare lucru, ci doar mi-am setat cateva variabile. Acum am sa incep sa adaug elemente de stil elementelor din interiorul articol-ului.
Inainte, in CSS luam fiecare element si ii adaugam propriul stil, dar, desi putem face asta si in sass/scss dorim sa-l facem mai intuitiv. Acum, am sa incep cu elementele de stil pentru elementul <article>, dupa care am sa adaug elemente de stil pentru fiecare element din interiorul acestuia:
In fisierul SCSS am scris urmatorul cod:
article{
background-color: $bg;
border: 1px solid $border;
border-radius: 5px;
padding: 10px 15px;
}
Si iata si rezultatul:
Acum, daca dorim sa schimbam si stilul heading-ului ( tag-ului <h1> ) putem face acest lucru in interiorul lui article, nu trebuie sa mai scriem ca in css:
article{
background-color: $bg;
border: 1px solid $border;
border-radius: 5px;
padding: 10px 15px;
h1{
color: $heading;
font-family: "Times New Roman";
}
}
Iar rezultatul va fi acesta:
! Atentie, atunci cand avem un cod precum cel de mai sus, nu sunt afectate toate tag-urile h1 din pagina, ci doar cele ce se afla intr-un tag article.
Acum, pentru ca nu vreau sa va plictisesc aratandu-va si explicandu-va rand cu rand fiecare lucru scris de mine am sa va scriu mai jos tot codul:
$heading: #3877df;
$paragraf: #515151;
$autor: #41b7d8;
$autor-hover: #3877df;
$bg: #ececec;
$border: #b2b2b2;
article{
background-color: $bg;
border: 1px solid $border;
border-radius: 5px;
padding: 10px 15px;
h1{
color: $heading;
font-family: "Times New Roman";
}
span{
a{
color: $autor;
text-decoration: none;
&:hover{
color: $autor-hover;
}
}
time{
font-style: italic;
}
}
p{
color: $paragraf;
}
}
Iata si rezultatul:
Inainte de a incheia acest articol vreau sa va mai explic un lucru care probabil vi se pare ciudat in codul de mai sus. Ma refer la codul &:hover, pentru ca probabil este ceva nou pentru voi.
Acest cod functioneaza precum si a:hover din CSS normal, putem sa pun dupa tag-ul a{} a:hover{} si sa scriu acolo ce stil sa aiba la hover, dar am ales sa il scriu in interior cu un & in fata.
Puteti face acest lucru si pentru :visited, :active, :nth-child, s.a.m.d.
Comentarii
Inca nu au fost postate comentarii, fii primul care posteaza un comentariu!