Pourquoi je n'imbrique pas
en SCSS ?
// Titre
// ==========================================================================
.comments__title {
@extend %h2;
@extend %underlined;
}
// Commentaire
// ==========================================================================
.comment {
position: relative;
display: grid;
align-items: center;
grid-template-columns: 40px 1fr;
grid-row-gap: space(1);
grid-column-gap: space(2);
grid-template-areas: 'avatar meta' 'content content' 'replies replies';
}
.comment.without-avatar {
grid-template-columns: 1fr;
}
.comment.is-loading {
opacity: 0.6;
}
.comment__author {
font-family: $font-alt;
font-weight: bold;
}
.comment__author a:hover {
color: var(--contrast);
}
.comment__avatar {
grid-area: avatar;
width: 100%;
height: auto;
border-radius: 50px;
}c'est quoi l'imbrication ?
.header {
.navbar {
display:flex;
}
}.header .navbar {
display:flex;
}.header {
&__logo {
width: 130px;
height: 130px;
}
.dark & {
background: #000;
color: #FFF;
}
}.header__logo {
width: 130px;
height: 130px;
}
.dark .header {
background: #000;
color: #FFF;
}
Pourquoi ne pas les utiliser ?
Pourquoi ne pas les utiliser ?
Raison #1 : Règles trop spécifiques
Pourquoi ne pas les utiliser ?
Raison #2 : Lisibilité difficile si trop de profondeur
// ....
//
&__menu {
.icons {
width: 100%;
max-width: calc(var(--col-width) + 15rem);
margin: 0 auto;
&__item {
position: absolute;
z-index: -1;
user-select: none;
&--youtube {
left: 30%;
top: 82.92px;
}
&--facebook {
left: 88.15%;
right: 8.43%;
top: 22%;
transform: rotate(25deg);
}
}
}
}
}
Pourquoi ne pas les utiliser ?
Raison #3 : Les règles sont difficiles à retrouver
Pourquoi ne pas les utiliser ?
Raison #4 : Les commits et les MR
Toute règle a ses exceptions
.button {
background: blue;
color: #FFF;
padding: .2rem 1rem;
border: none;
&:hover {
background: #FFF;
color: #000;
}
&::before {
content:'';
background: url(img/icon.png);
width: 100px;
height: 100px;
}
&.is-active {
box-shadow: 0 0 4px 0 lightblue;
}
}Pseudo éléments & états
.button {
background: blue;
color: #FFF;
padding: .2rem 1rem;
border: none;
font-size: 1rem;
@media only screen and (min-width: 1000px) {
padding: .5rem 2rem;
font-size: 1.2rem;
}
}