Вопросы с меткой [sass]

Sass (Syntactically Awesome StyleSheets) — расширение CSS, которое добавляет мощь и элегантность основному языку. Оно позволяет использовать переменные, вложенные правила, примеси, импорт и прочее, обеспечивая полностью CSS-совместимый синтаксис. Sass помогает упорядочить содержимое больших файлов, а малым обеспечивает лучшую скорость работы, частично с помощью библиотеки Compass.

Фильтрация
Сортировка
Метки
1 голос
1 ответ
331 показ

Терминал открывается каждый раз после компиляции SCSS

Подскажите пожалуйста, как сделать так, чтобы терминал не открывался при каждом изменении в scss коде? То есть, я буквально ставлю пробел в коде или делаю любое другое изменение кода и тут же ...
jenya1995's user avatar
0 голосов
1 ответ
74 показа

CSS: Как нарисовать такой гексагон?

Как нарисовать такой гексагон через CSS? Нарисовать нужно сейчас, а тему псевдоселекторов я так и не понял, если вы имеете, какие-то хорошие источники, где объясняют сложное по простому будет ...
Iangyl's user avatar
  • 87
0 голосов
1 ответ
29 показов

Помогите создать 'Выпадающий' блок поиска по сайту

`Ребят, написал код, при котором выпадающая строка поиска по сайту скрывается и появляется при помощи visability. Теперь вопрос остался, а как всё-таки это чудо анимировать? Подскажите, в каком ...
user avatar
1 голос
0 ответов
28 показов

Миксин для отзывчивого свойства

p { font-size: 15px; } @media screen and (min-width: 850px) { p { font-size: calc(15px + 3 * ((100vw - 850px) / 270)); } ...
novikov433's user avatar
0 голосов
2 ответа
53 показа

Как правильно сверстать данный блок

Подскажите пожалуйста как правильно сверстать данный title новичку? Думал обернуть каждое слово в отдельный div и через margin прописать, но для адаптива это не лучшее решение думаю
russianBoy's user avatar
0 голосов
0 ответов
55 показов

Не видимый padding

Во всех браузерах кроме Firefox у блока появляется не заданный padding. Обнуления отступов не работает даже с максимальным приоритетом.Изменения длины не помогло. Важно у блока свойство overflow: ...
UserNameUnknow's user avatar
0 голосов
1 ответ
120 показов

Запись hover вместе в before в препроцессоре

Мне нужно чтобы hover срабатывал на before Интересует как это реализовать используя именно свойства препроцессора sass. То есть я навожу мышкой на слово и появляется мой псевдоэлемент .menu { ...
Максим's user avatar
0 голосов
1 ответ
81 показ

Вызов анимации несколько раз в css @animation

Такой вопрос, есть такая разметка: <div class="line"></div> <div class="line1"></div> <div class="line2"></div> <div class="...
StZD's user avatar
  • 5
0 голосов
0 ответов
144 показа

Почему перестал компилироваться scss?

Здраствуйте, в один момент программа VS Code с помощью плагина Live Sass Compiler перестала проводить компиляцию в обычный CSS. Программу уже переустанавливал и перенастраивал заного по видео-роликам -...
user avatar
0 голосов
1 ответ
106 показов

Отступы в шапке слайдера. Задание width в процентах в scss. Задание max-width в процентах

Верстаю слайдер Фигмовский слайдер. Наверстал следующее /* Обнуление */ *, *::before, *::after { padding: 0; margin: 0; border: 0; box-sizing: border-box; } a { text-decoration: none; }...
wfamilyweb's user avatar
0 голосов
5 ответов
1k показов

Live sass compiler не отображается в vscode

При установке этого расширения снизу должно быть написано whatch sass, как на скрине1, а у меня2 этого нет. Пробовала устанавливать другие версии (из доступных самая ранняя - 4.0). В курсах которые я ...
Sat's user avatar
  • 1
0 голосов
1 ответ
331 показ

Как добавить JS скрипт в React

Хочу добавить JS скрипт, который будет менять анимации при наведении на кнопку, но не знаю как правильно это сделать, index.html файла нет. React 18.2 // Сам JS Код let contactMeBtn = document....
Ruslan Makhmatov's user avatar
0 голосов
1 ответ
81 показ

Проблема с приоритетностью в scss. Как ее решить?

Столкнулся с проблемой. Прописал код для header в scss. Нас тут интересует селектор .menu__sub-list с медиазапросом. .wrapper { min-height: 100%; .header { position: fixed; top: 0; ...
Rogalik's user avatar
  • 11
0 голосов
0 ответов
34 показа

Новый CSS в медиа запросах отображается не верно на хостинге

Проблема такая, на локальной машине и на гитхабе сайт выглядит как надо, но как только я заливаю сайт на хостинг, некоторые css стили не срабатывают, пути указываю так <link rel="stylesheet&...
Mako Rona's user avatar
0 голосов
0 ответов
790 показов

Live Sass Compiler не создаёт компилированный и минифицированный файлы в папке СSS, хотя адрес указан

При редактировании файла main.scss создаются файлы main.css и main.css.map в той же папке, в папке css ничего не появляется. Путь к созданию прописан верно, компилятор вроде бы постоянно "смотрит&...
Егор's user avatar
0 голосов
0 ответов
49 показов

Как изменять скорость transition css или scss в зависимости от ширены элемента?

Чем больше элемент тем медленнее анимация. Я использую React и scss. Варианты были разные функция calc(), transition-timing-function, даже через React пробовал. Если описывать проблему подробней то ...
Pr Andrey's user avatar
0 голосов
0 ответов
1k показов

Не могу подключить sass к React

Всем привет! Не могу подключить Sass к React. Делаю все по видео-уроку. Открываю консоль в папке с app.css и задаю команду npm install node-sass --save. React у меня не самая последняя версия, но ...
Vladislav4488's user avatar
0 голосов
0 ответов
77 показов

нужна помощь с sass mixin

Проблема в следующем, я пытаюсь добавить mixin с помощью = и подключить с помощью +. Пытался с помощью @mixin @include (такой функции даже не видит) при создании @mixin все компилируется как надо, но ...
KasperPirs's user avatar
0 голосов
1 ответ
58 показов

Приоритет css файлов [дубликат]

Верстал сайт через sass, получился файл style.min.css, залил его на сервер и нужно внести изменения, для этого создаю файл style.css подключаю его после style.min.css и не работает, все перепробовал, ...
Vlad's user avatar
  • 11
0 голосов
2 ответа
1k показов

Как устранить ошибку gulp Error: Cannot find module 'sass'?

Не могу исправить ошибку связанную с ошибкой Error: Cannot find module 'sass', я уже и переустанавливал const gulp = require('gulp'); const browserSync = require('browser-sync'); const sass = ...
KUPUELEL's user avatar
0 голосов
1 ответ
34 показа

Как расположить элементы grid по линии. Подробнее на скриншотах

Первый скрин как это выглядит у меня: Второй как это должно выглядеть на самом деле: Проблема в том, что контент разный и поэтому всё идет неправильно(не по линии) .services{ &...
Natig Agharzayev's user avatar
0 голосов
0 ответов
91 показ

почему в css не работает position:fixed

Почему при адаптации меню проскроливается ? * { font-family: "Roboto", sans-serif; } header { position: relative; height: 50px; width: 100%; } nav { position: fixed; width: 100%; ...
KUPUELEL's user avatar
2 голоса
1 ответ
856 показов

Почему emmet в vscode не работает с sass?

Почему emmet в vscode не работает с sass? С scss работает все прекрасно, а вот с sass нет. Все приходится писать вручную. Весь текст белый, т.е. не разделен по цветам, как должно быть. Читал на ...
White Rabbit's user avatar
0 голосов
1 ответ
54 показа

Не применяется медиазапрос

Написал разметку страницы, сделал для неё стили, начал адаптировать и медиазапросы не срабатывают. Не понимаю в чём дело, буду очень благодарен, если ответите что тут не так @media screen and (max-...
Pavel Antonov's user avatar
0 голосов
1 ответ
59 показов

Как можно конвертировать "padding" в padding в миксинах scss?

Разбираюсь с миксинами. Как я понял я могу передать туда переменную и что-то с ней сделать: $var: "padding" @mixin exemple($var){ ... } А можно ли сделать вызов такого миксина @include ...
Konstantin_SH's user avatar
1 голос
0 ответов
16 показов

Является ли map-getter лишней сущностью?

Есть такой SCSS код: $font-weights: ( "font-weight-thin": 100, "font-weight-light": 300, "font-weight-regular": 400, "font-weight-medium": 500, "...
Mikhail Krivosheev's user avatar
0 голосов
1 ответ
1k показов

Не работает подгрузка scss переменных в модуль

Такой вопрос: Почему в этом модуле(странице) импорт scss стилей работает А в вот этом модуле нет: Как это вылечить? Ошибка выглядит следующим образом: WAIT Compiling... ...
Mikhail Krivosheev's user avatar
0 голосов
1 ответ
49 показов

Аккордион на HTML и CSS/SASS/SCSS

Хотел сделать простой аккордион на HTML (через checkbox) и CSS/SASS/SCSS, но где-то допускаю ошибку, думаю, в CSS, из-за которой, при нажатии на "Заголовок" (см. в коде) не становится ...
user9988899's user avatar
0 голосов
1 ответ
50 показов

Полноэкранное меню исключительно на HTML и CSS/SCSS/SASS

Хотел создать полноэкранное меню исключительно на HTML и CSS/SCSS/SASS. Принцип понимаю, но где-то ошибаюсь в реализации: совершенно не работает checkbox, регулирующий отображение блока полноэкранного ...
user9988899's user avatar
0 голосов
1 ответ
567 показов

Не работает vue3 и переменные scss

В глобальном файле VUE3 проекта прописываю SCSS переменную. Далее в одном из модулей пытаюсь ее использовать: Получаю ошибку. 98% after emitting CopyPlugin ERROR Failed to compile with 1 error ...
Mikhail Krivosheev's user avatar
0 голосов
1 ответ
182 показа

как использовать @use c переменными в sass/scss файле?

Есть файл: // _variables.scss // COLORS $dark-gray: #222222; который я помещаю в: // index.scss @use './modules/variables' as v; div{ background: v.$dark_gray; width: 50px; ...
максим огуенко's user avatar
0 голосов
1 ответ
317 показов

Подключить свою библиотеку React-компонентов к приложению Next

Есть библиотека с компонентами написанными на TypeScript+SASS. Сборка выполняется вебпаком (конфиг ниже). Подключаем в основной проект на Next через npm link. Всё работает хорошо, пока не подключаю ...
Евгений's user avatar
0 голосов
1 ответ
1k показов

Как удалить scss с компьютера?

Как мне решить такую проблему. В общем я делаю маленький проект на react, typescript и scss. Установил в самой папке проекта sass(scss) с помощью команды "npm i node-sass". После были ...
fron321's user avatar
  • 159
0 голосов
0 ответов
118 показов

live sass compiler не получается настроить

я новичок и учу sass по видеоуроку. дело в том что у меня не получается подключить live sass compiler так что бы он обновлял данные которые я пишу в файле main.scss. я скачал архив с уроком что бы ...
Dima's user avatar
  • 21
0 голосов
0 ответов
21 показ

Ошибка .jpg после загрузке на WordPress

.slide:after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: transparent; background: -webkit-gradient(linear, left top, ...
Павел's user avatar
-2 голоса
1 ответ
50 показов

игнорировать фолбеки css-переменных

стили написаны на scss. После прогонки через postcss накидываются фолбеки на css-переменные. На входе: Стили: :root { --white: #ffffff; --white-1: #E2E6E8; --white-2: #F3F5F5; ...
ndjs19's user avatar
  • 11
0 голосов
0 ответов
55 показов

Не могу установить и настроить SASS

Я не знаю ничего про Node.js но хотел установить SASS. вот фото. Должно было компилировать SASS на style.min.css. Пробовал и через терминал Гит
Altybaev's user avatar
0 голосов
1 ответ
44 показа

Вопрос по gulp-sass

При использовании плагина gulp-sass, обнаружил что сжатия выходного файла css, а именно compact и nested, перестали поддерживаться? Почему? Это связано с обновлениями?
Blondguy's user avatar
  • 105
0 голосов
1 ответ
290 показов

Установка SASS на Mac OS Big sure

Подскажите как установить компилятор Sass на MacBook на M1
Артём Архипов's user avatar
0 голосов
1 ответ
272 показа

ошибка в работе плагина gulp-sass

пробовал устанавливать node-sass, не помогло в коде вроде бы все верно, в гугле не нашел ничего путного, пробовал делать по видео делал все точь в точь все работало, но в моменте конвертации sass в ...
panthamima's user avatar
0 голосов
0 ответов
100 показов

Подскажите, какие есть особенности верстки под mac устройства? Может есть какая нибуть спецификация?

Дело в том что на винде верстка отображается нормально, а на маке нет.
Дастин Гольцов's user avatar
0 голосов
0 ответов
22 показа

В БЭМ директива @extend не нужна?

Здесь описывается директива @extend которая "расширяет класс" чтобы не забыть использовать вместе с определённым классом другой класс(модификатор в БЭМ). Но модификатор в БЭМ не может ...
Александр Д.'s user avatar
-1 голос
2 ответа
135 показов

Как написать собственный скрипт для сборки front-end'а используя команды вместо готовых модулей

В процессе обучения у меня появилась необходимость оптимизировать процесс сборки моих проектов. Препроцессоры, сжатие картинок, pugjs и т.п. Начал смотреть в сторону webpack и gulp но столкнулся с ...
MrShnaider's user avatar
0 голосов
0 ответов
77 показов

Не работает деление в LESS

Вот такой миксин: .grid(@columns, @i: 1) when (@i <= @columns) { .col-@{i} { max-width: percentage(@i / @columns); padding: 0 @15px; flex: 1; } .grid(@columns, @i + 1); } .grid(@...
GreedyWizards's user avatar
0 голосов
1 ответ
133 показа

Не работает псевдоэлемент before

не могу понять, почему не работает before, препроцессор sass &__image position: relative transform: translate(50%, -50%) &::before content: "" position: ...
Hamanivork's user avatar
0 голосов
1 ответ
590 показов

Верстка карточек разного размера

Стоит задача заверстать карточки. Все бы ничего, но оттого, что первая карточка больше остальных, не получается заверстать ее во флексе. Подскажите, каким образом верстать такие карточки на флексе?
Akaev Dzhalal's user avatar
1 голос
1 ответ
79 показов

Как сделать такую кнопку с цветом? HTML, SASS

Пытаюсь сделать вот такую кнопку с выделенным цветом (как на картинке): /* SASS */ @import 'reset.scss'; @import '../fonts/fonts.scss'; @import 'colors.scss'; .container { max-width: 1200px; ...
CatException's user avatar
0 голосов
1 ответ
557 показов

(HTML / SASS) Как сверстать вертикальный сайдбар?

Проблема состоит в том, что у меня никак не выходит адекватно сверстать такую менюшку, которая распологается ровно слева, прямо как на этой картинке: Во время бесконечных попыток и запросов в гугл ...
David Anisimov's user avatar
1 голос
0 ответов
97 показов

Что за ошибка с установкой плагина gulp-sass?

` <pre> npm WARN deprecated [email protected]: this library is no longer supported npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/...
arrov199gmailcom's user avatar
0 голосов
1 ответ
587 показов

Количество дочерних элементов SCSS

Есть div с некоторым количеством вложенных элементов p: <div> <p>...</p> <p>...</p> <p>...</p> </div> Можно ли используя только SCSS/SASS ...
Dan Sazonov's user avatar