Популярные ответы с меткой

11 голосов
Принятый

Сложный polygon на препроцессорах

Необходимые координаты в path: 120 — радиус круга; если надо уменьшить, то уменьшать обе координаты 240 — высота блока 1000 — длина блока При необходимости повернуть вырез, воспользуйтесь атрибутом ...
10 голосов

Как по клику изменить текст, используя css?

Хоть и не в тему, но вот подобное на z-index, без javascript: Изначальный вариант был длиннее и неинтереснее, ищите его в истории правок, если угодно. Новый, улучшенный вариант: button:focus + ...
8 голосов

Зачем ставят _ перед именем файла с расширением scss?

Это стандартное соглашение по именованию файлов-составляющих - они служат частями других файлов. Обычно в них хранят общие mixin'ы, функции, константы и прочее. SASS не позволяет независимо ...
8 голосов
Принятый

Зачем ставят _ перед именем файла с расширением scss?

_ пишется перед именем частичных файлов, которые не должны отдельно компилироваться в css, а вложены в какой-то другой scss файл
  • 1,232
8 голосов
Принятый

Calc и переменные в SASS

Что б использовать переменную в значении обычного CSS нужно заключить переменную в #{}, Например: top: calc(#{$border_padding} - 3px); Вот ссылка на документацию
  • 480
8 голосов

Чем глобально отличается текстовый редактор от IDE?

В текстовых редакторах нет понятия "проект". Что даёт это понятие: Радикальное ускорение поиска по коду, с помощью индексации текста проекта - это очень важно для больших проектов. На практике это ...
8 голосов

Нужно ли корректировать верстку так, чтобы при масштабировании нигде ничего не выпирало?

нужно ли вообще корректировать верстку так, чтоб при масштабировании нигде ничего не выпирало и тд? Отвечаю на ваш вопрос. Если вы хотите, чтобы все пользователи видели качественно выполненную вами ...
  • 27.7k
7 голосов

Дополнительный header элемент непонятно откуда

Судя по коду, который вы оставили, Вы не закрыли тег <header> (у Вас в коде их два). <main class="main__wrapper"> <header> ... <header> </main>
7 голосов
Принятый

Как по клику изменить текст, используя css?

Такое можно вытворять ради спортивного интереса, но это издевательство над CSS, в реальном коде не надо так!)) Оставил чекбоксы, чтобы было видно, что происходит. Можно было не трогать четверку ...
6 голосов

Как бы вы сверстали следующий блок?

Использована технология SVG, иконки от font-awesome Смотреть на весь экран Вот здесь доделанная версия: https://codepen.io/topicstarter/pen/MWaeGjV * { text-decoration: none; box-...
5 голосов
Принятый

Сделать выбор между less и sass

Синтаксис у фич в препроцессорах очень схож между собой, поэтому, изучив их в LESS, и перейдя потом на SASS, у вас не возникнет проблем со старыми знаниями. В этом плане изучать можно любые фреймворки ...
5 голосов
Принятый

Как создать переменные, которые будут видимы в SASS, JavaScript и Jade(Pug)

создаете файл .env и в нем переменную SOME_ENV_VAR к примеру SASS_ENV=blabla читаем переменную в компиляторе SASS или JS: var ENV = process.env.SOME_ENV_VAR || 'default'; асайним переменную для Jade:...
  • 427
5 голосов
Принятый

Каким образом в Sass работают псевдоклассы?

Вы правильно написали, для hover, focus и active. Стили для псевдоклассов работают также: div position: relative &:before content: 'la-la-la' Единственное, для child элементов нужно ...
  • 9,293
5 голосов
Принятый

Логика работы SASS SCSS и LESS?

Браузер не читает напрямую данные из .sass (например) файла, нужно вначале скомпилировать .sass > .css? Браузер может работать только с CSS и для этого sass компилируется в CSS Т.е. получается, ...
5 голосов
Принятый

Селектор любого элемента, окончание которого на "__class" (SCSS)?

Вот так: [class$="__class"] { background: blue; } <div class="col"></div> <div class="col"></div> <div class="col"></div> <div class="col"></div> &...
5 голосов
Принятый

Как увеличить сочность цвета (scss)?

Можно обратиться к цветовой схемеhsl При этом максимальная сочность цвета будет при значении 50% для l компоненты и минимальная (белый цвет) - при значении 100%. В SASS есть функция получения l ...
  • 79.6k
5 голосов

Ошибки в песочнице jsfiddle

Подключение библиотеки jQuery осуществляется через селектор во "вьюпорте" с кодом JS. Далее открывается блок с выбором различных надстроек. Нас интересует раздел "Frameworks & Extensions", там ...
  • 22.7k
5 голосов
Принятый

Не работает свойство border в scss

border - это универсальное свойство, которое позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке. Разделять их необходимо пробелом. ...
  • 27.7k
4 голоса

node-sass не устанавливается

Вот и нашла ответ на свой вопрос. На XP есть проблема со входом в библиотеку msvcrt.dll для Ruby. Хотя похожие проблемы с установкой node-sass есть и на 10 версии OS. На старых версиях проблема ...
4 голоса

Как создать такие треугольники с помощью псевдоэлементов?

Сам треугольник можно получить задавая различные цвета границам разных сторон элемента, а добавить к элементу - используя псевдоэлементы :before :after .block { background: green; ...
  • 301
4 голоса
Принятый

Организация таска компиляции sass в Gulp

В идеале сборка должна быть такая, чтобы скомпилированный файлы, которые будут отдаваться пользователю, лежали отдельно от исходников и их можно было спокойно удалить при необходимости. К тому же, это ...
  • 7,241
4 голоса

Вложенные селекторы влияют на скорость загрузки сайта?

#header .top .logo img {} Браузер читает селекторы справа налево. Т.е. браузер выберет все картинки, потом узнает у которых у них есть родитель с классом .logo, потом с классом .top... Ну вы поняли. ...
  • 749
4 голоса

SCSS Как прописать цикл, который бы расставлял правильные отступы?

Код sass: .block display: inline-block height: 100px width: 20px margin: 2px background-color: #333 .block @for $i from 1 through 20 &:nth-child(#{$i}) margin-bottom: sin($...
4 голоса
Принятый

Цвет для псевдоэлемента

Цвет границы можно наследовать. body { margin: 50px 20px; } .main__item_logo { width: 132px; height: 100px; position: relative; background:...
  • 120k
4 голоса
Принятый

Как в SASS правильно расписать вложенный тег?

Sass ругается скорее всего из-за того, что вы не соблюдаете отступы и путаете их с табами. Можно писать например так(display:block - для примера): .list{ display:block; &-child{ display:...
  • 9,293
4 голоса
Принятый

Как на css сделать такой грид из картинок?

Вот такой шаблон на Flex. Вертикальные и горизонтальные размеры элементов надо будет подобрать вручную или вычислить математически. Что бы сохранялась пропорция вертикальных и горизонтальных размеров ...
4 голоса
Принятый

Последовательная задержка на Sass для дочерних элементов?

В Sass существует директива управления - @for. Её можно использовать для таких задач. (Рабочий пример на Codepen.io). Sass: //Создаём переменные для управления значениями $items: 4 $transition: ...
  • 4,562
4 голоса
Принятый

Как сверстать это?

Для позиционирования с помощью absolute, желательно иметь какие-то элементы с position: relative;- именно от них будете отталкиваться. .steps-block { display: flex; justify-content: space-...
  • 30.9k

Only top scored, non community-wiki answers of a minimum length are eligible