{% if some_variable == 2 %}
{% include "file1.twig" %}
{% else %}
{% include "file2.twig" %}
{% endif %}
Нужно padding оставить такой же, а при наведении добавить рамку которая в 10px
a {
/* padding: 20px; // Было */
padding: 10px;
border: 10px solid transparent;
}
a:hover {
border-color: red;
}
.menu {
position: relative;
&__item {
display: block;
margin-bottom: 5px;
position: relative;
}
&__link {
display: block;
font-size: 1rem;
color: blue;
}
&__img {
position: absolute;
width: 10px;
height: 10px;
display: none;
}
//==
//== Hover & active states
//== ======================================= ==//
&__link:hover,
&__link_active {
color: red;
}
&__link:hover + &__img,
&__link_active + &__img {
display block;
}
}
<h2 class="heading heading_red">
...
</h2>
<h2 class="heading heading_theme_red">
...
</h2>
<h2 class="heading heading_primary">...</h2>
<h2 class="heading heading_secondary">...</h2>
.block {
$this: &;
color: red;
&__element { font-size: 12px; }
&:hover &__element { transform: scale(1.1); }
@media () {}
//==
//== Модификация какая-то
//== ==========================
#{$this}_mod {
color: green;
&__element { font-size: 16px; }
@media () {}
}
#{$this}__mod:hover &__element { transform: scale(1.1); }
//==
//== Другая модификация
//== ==========================
&_mod { background: yellow; }
@media () {}
}
.myslider:not(.owl-loaded) {
height: 300px;
overflow-y: scroll;
}