CSS - Sass preprocessor
// Blocks are named as standard CSS classes
.block {
}
// Elements declared with 2 underscores, after block
// Grandchildren are named after their grandparent class
// (.block__grandchild NOT .blog__parent__grandchild)
.block__element {
}
// Modifiers declared with 2 dashes, after block or after element
.block--modifier {
}
// element and modifier together
.block__element--modifier {
}Snažíme se nezanořovat jednotlivé třídy, zanořovat můžeme pouze v případě snadného zápisu když se například tahají nadpisy, obsahy bez tříd z databáze nebo jednostupňové zanoření při specifikaci, v jaké sekci například má tato část vypadat trochu jinak
// Content
<div class="content">
<h2>Testovací nadpis</h2>
<p>Testovací odkaz</p>
</div>.person__number{
font-size: 1.9rem;
font-weight: 700;
color: $color__primary;
border-top-right-radius: $radius;
background: $color__secondary;
padding: 8px 10px;
position: absolute;
left:0;
bottom:0;
line-height: 1;
.person--large &{
@include media($medium){
font-size: 2.4rem;
padding: 12px 16px;
}
}
}