@extends:%subsclasses-color {
.sub1, .sub2, .sub3 {
color:red;
}
}
.main1 {
@extends %subclasses-color;
}
.another-main {
@extends %subclasses-color;
}background-image: url(<картинка с точками, можно как data url>);
background-position: top left;
background-repeat: repeat-y;
padding-left: <размер фона по Y + отступ до контента>;position: relative;
&:before {
content: '';
position: absolute;
top: 0;
left: 0 - <размер отступа>;
transform: translate(50%, 50%);
border: <размер белого пространства сверху / снизу> solid #fff;
<и здесь либо рисуем элемент через width, height, background-color, border-radius либо картинками, думаю что второе предпочтительнее>
}flex-shrink и flex-grow не имеют прямого отношения к размерам элемента в том плане что они не определяют размер напрямую (для этого есть flex-basis). Эти свойства определяют поведение элемента при сжатии (shrink) и расширении (grow).:first-of-type. На Stack Overflow есть пара очень хороших объяснений этого, стоит ознакомиться (раз, два)..services-block:first-of-type означает "первый элемент с классом services-block" ложно и это приводит к неработающему селектору. В реальности этот селектор читается как "любой подэлемент текущего элемента, имеющий класс services-block и при этом являющийся первым элементом с таким именем тега среди всех имеющихся". Слегка контр-интуитивно, да, но уж как есть.div - не единственный элемент в HTML и начнёте использовать также и другие элементы. В вашем примере для div.basic-title и div.services-block_title явно лучше подходят какие-то из элементов заголовка, а структура из div.services-block_item и подэлементов - это явно dl/dt/dtt.container > div.services-container:first-of-type > .services-block:first-child.container > .basic-title + .services-container > .services-block:first-child@mixin last-childs {
@for $i from 7 through 1 {
&:nth-last-child(#{$i}) {
margin-left: 40px - 5px * ($i - 1);
}
}
}<meta name="viewport" content="width=device-width, initial-scale=1.0"/>map-has-key - это функция работы с map, у вас же по факту map of lists т.е. через map-has-key и map-get вы получаете элемент соответствующего "цвета", а обращение к элементам списка должно идти через функции работы со списками, к примеру через @for или @each, или, если вам известна позиция в списке - то через nth() width определяет строго определённый размер элемента - его размер по оси X, тогда как flex-basis определяет размер элемента вдоль главной оси flexbox контейнера. В случае если flex-direction имеет значения row или row-reverse - разницы нет, а вот в случае если это свойство имеет значение column или column-reverse - разница принципиальная. Всё это есть в документации. rgba(0,0,0,0.25) до transparent на :after с "запихиванием" половины элемента под основной. :before и :after с тенями, небольшой rotate transform влево / вправо и "запихивание" под основной элемент + видимо ещё :after от какого-нибудь дополнительного элмента чтобы нарисовать центральную часть тени. Правда во втором случае лучше чтобы фон под элементом был однородный, а тени - непрозрачными т.к. иначе будут видимые артефакты в местах их пересечения. $font-sizes: (
lg: 16px,
sm: 14px,
);
@each $type,$size in $font-sizes {
.btn-#{$type} {
&.rounded {
@include border-radius($size);
}
}
}.flex > .right {
flex-basis: 32%;
position: absolute;
width: 32%;
right: 0;
}