@keyframes animStar {
from {
transform: translateY(0) rotate(0.05deg);
}
to {
transform: translateY(-200vh) rotate(0.05deg);
}
} ;rotate() помогает. If you need to set a global variable’s value from within a local scope (such as in a mixin), you can use the !global flag. A variable declaration flagged as !global will always assign to the global scope.
!global после присвоения. blackness() поддерживается только в Dart Sass. .example {
margin: 0 #{math.div(54, $maxWidthContainer * 100vw)} 0 0;
}@media запроса - да, может, но @media запрос будет также применяться. Также такой placeholder не может быть использован внутри другого @media - это приведёт к ошибке.@media выражение. В этом случае placeholder уже не сработает, вы получите ошибку. Такой вариант реализуется уже через mixin'ы.$vars: (
1 : #333,
5 : #111,
100 : #222,
);
@mixin div-color($id) {
@if (map-has-key($vars, $id)) {
color: map-get($vars, $id);
}
}@extends:%subsclasses-color {
.sub1, .sub2, .sub3 {
color:red;
}
}
.main1 {
@extends %subclasses-color;
}
.another-main {
@extends %subclasses-color;
}: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@each $query in $queries {
@media (max-width: #{$query}) {
@for $i from 1 through 6 {
h#{$i} {
font-size: nth($sizes, $i);
}
}
}
}$sizes: (
h6: $fzh6,
h5: $fzh5,
h4: $fzh4,
h3: $fzh3,
h2: $fzh2,
h1: $fzh1
);
@each $query in $queries {
@media (max-width: #{$query}) {
@each $tag, $size in $sizes {
#{$tag} {
font-size: $size;
}
}
}
}@mixin last-childs {
@for $i from 7 through 1 {
&:nth-last-child(#{$i}) {
margin-left: 40px - 5px * ($i - 1);
}
}
}