11
голосов
Принятый
Сложный polygon на препроцессорах
Необходимые координаты в path:
120 — радиус круга; если надо уменьшить, то уменьшать обе координаты
240 — высота блока
1000 — длина блока
При необходимости повернуть вырез, воспользуйтесь атрибутом ...
- 12.7k
10
голосов
Как по клику изменить текст, используя css?
Хоть и не в тему, но вот подобное на z-index, без javascript:
Изначальный вариант был длиннее и неинтереснее, ищите его в истории правок, если угодно.
Новый, улучшенный вариант:
button:focus + ...
- 55.8k
8
голосов
Зачем ставят _ перед именем файла с расширением scss?
Это стандартное соглашение по именованию файлов-составляющих - они служат частями других файлов. Обычно в них хранят общие mixin'ы, функции, константы и прочее.
SASS не позволяет независимо ...
- 8,470
8
голосов
Принятый
Зачем ставят _ перед именем файла с расширением scss?
_ пишется перед именем частичных файлов, которые не должны отдельно компилироваться в css, а вложены в какой-то другой scss файл
- 1,232
8
голосов
Принятый
Calc и переменные в SASS
Что б использовать переменную в значении обычного CSS нужно заключить переменную в #{}, Например:
top: calc(#{$border_padding} - 3px);
Вот ссылка на документацию
- 480
8
голосов
Чем глобально отличается текстовый редактор от IDE?
В текстовых редакторах нет понятия "проект". Что даёт это понятие:
Радикальное ускорение поиска по коду, с помощью индексации текста проекта - это очень важно для больших проектов. На практике это ...
- 5,179
8
голосов
Нужно ли корректировать верстку так, чтобы при масштабировании нигде ничего не выпирало?
нужно ли вообще корректировать верстку так, чтоб при масштабировании
нигде ничего не выпирало и тд?
Отвечаю на ваш вопрос. Если вы хотите, чтобы все пользователи видели качественно выполненную вами ...
- 27.7k
7
голосов
Дополнительный header элемент непонятно откуда
Судя по коду, который вы оставили, Вы не закрыли тег <header> (у Вас в коде их два).
<main class="main__wrapper">
<header>
...
<header>
</main>
7
голосов
Принятый
Как по клику изменить текст, используя css?
Такое можно вытворять ради спортивного интереса, но это издевательство над CSS, в реальном коде не надо так!))
Оставил чекбоксы, чтобы было видно, что происходит. Можно было не трогать четверку ...
- 27.1k
6
голосов
Как бы вы сверстали следующий блок?
Использована технология SVG, иконки от font-awesome
Смотреть на весь экран
Вот здесь доделанная версия: https://codepen.io/topicstarter/pen/MWaeGjV
* {
text-decoration: none;
box-...
- 13.9k
5
голосов
Принятый
Сделать выбор между less и sass
Синтаксис у фич в препроцессорах очень схож между собой, поэтому, изучив их в LESS, и перейдя потом на SASS, у вас не возникнет проблем со старыми знаниями. В этом плане изучать можно любые фреймворки ...
- 5,788
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>
&...
- 1,393
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. На старых версиях проблема ...
- 695
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($...
- 1,272
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. Вертикальные и горизонтальные размеры элементов надо будет подобрать вручную или вычислить математически.
Что бы сохранялась пропорция вертикальных и горизонтальных размеров ...
- 13.6k
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
Связанные метки
sass × 522css × 286
scss × 149
html × 132
gulp × 74
javascript × 54
css3 × 36
вёрстка × 35
bootstrap × 27
less × 25
node.js × 22
webpack × 22
frontend × 19
reactjs × 18
gulp-sass × 18
html5 × 14
npm × 14
веб-программирование × 13
phpstorm × 13
visual-studio-code × 12
препроцессор × 10
sublime-text × 9
бэм × 9
compass × 9
ruby × 8