@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);
}
}
.gitignore
&
в имени файла - сомнительная затея. В целом ничего страшного, но он может иметь специальное значение@import
- плохая идея т.к. он будет загружаться после того как будет загружена и разобрана таблица стилей т.е. вы оставляете пользователя с неправильными шрифтами дольше чем нужно..post section
добавить не один параграф, а два.post-meta-author
.post
: Этот элемент обладает очень простой структурой - общим внутренним отступом из которого иногда "вылезают" элементы (к примеру картинка на мелких экранах), но у вас это какие-то кусочки отступов, применённые к разным внутренним элементам, причём иногда даже не к непосредственным потомкам, часть отступов - margin, а часть - padding, в общем полный бардак. Это делает макет весьма хрупким и сложным в поддержке. Вам стоит немного углубиться в теорию и выстроить у себя внутри понимание того как именно взаимодействуют элементы между собойlang
, установите корректноsome.php
?let
в JavaScript коде приводит к ошибкам в MSIE, если вы вдруг собираетесь его поддерживать(function(window, document) { ... })(window, document);
чтобы скрыть его из глобального пространства имён - это позволит избегать конфликтов с другим кодом который может быть загружен@extends
:%subsclasses-color {
.sub1, .sub2, .sub3 {
color:red;
}
}
.main1 {
@extends %subclasses-color;
}
.another-main {
@extends %subclasses-color;
}
@include button-variant($active-background: white, $active-border: lightgrey);
: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);
}
}
}
%gallery__man-flex
определён внутри .gallery
, таким образом все места где будет использоваться этот placeholder будут наследовать контекст его определения.&__man
означает "расширение текущего селектора", поэтому очевидно добавления контекстного селектора не происходит. Если он нужен - то стоит использовать & &__man
.ai
- это формат Adobe Illustrator, он явно не является шрифтом. Просто используйте реальные веб-шрифты (расширение должно быть .woff2
или .woff
). .ttf
или .otf
) - то веб-версию можно получить используя FontSquirrel generator. $map
расставлены в порядке возрастания значений