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

SCSS (Sassy CSS) — тип синтаксиса для Sass (Syntactically Awesome Style Sheets). Является расширением языка CSS. Это означает, что любой валидный файл стилей является валидным SCSS файлом. Вдобавок, SCSS понимает большинство CSS хаков и специфических вендорных свойств, таких как свойство filter для старых версий IE. Файлы, использующие этот синтаксис, имеют расширение .scss

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

Как запускать анимацию только когда она появляется в поле видимости anime.js

Я уже сделал анимацию на anime.js, но она проигрывается после прогрузки страницы, а хочется чтобы только когда я до неё доскроливал. Я думаю использовать ScrollTrigger, но может кто лучше разбирается ...
Серёжа Сучалкин's user avatar
0 голосов
0 ответов
19 показов

Справка по команде @include sсss

Видел в коде @include font('Work Sans', 400); Искал в интернете @include sсss, но хорошей справки по этой команде не нашел. Приведите хорошую справку по этой команде.
Михаил Филиппов's user avatar
1 голос
0 ответов
22 показа

Как отцентровать блоки в последней строке грида, при условии, что блок динамичный и количество элементов может меняться?

Как отцентровать блоки в последней строке грида, при условии, что блок динамичный и количество элементов может меняться? Собственно, интересует, есть ли вообще такое решение у грида, не рассматривая ...
Александра Иванова's user avatar
0 голосов
0 ответов
16 показов

Swiper slider не переключается слайд в thumbs

Cлева в thumbs, слайды по стрелочкам переключаются только до третьего, но если нажать на сам слайд или на стрелочку которая находиться на главном экране, то все работает. Помогите сделать чтобы в ...
whoismatvei's user avatar
0 голосов
1 ответ
20 показов

Не получается подгрузить стили через WebPack

Я пытаюсь подключить шрифты на WebPack но он их не видит. Скачал шрифты, настроил sass и css, но шрифты не подгружает. не могу понять в чем проблема вот конфиг моего WebPack const HtmlWebpackPlugin = ...
Виктор Иванов's user avatar
0 голосов
0 ответов
15 показов

Как применять тот или иной стиль в SCSS в зависимости от значения переменной, которое должно присваиваться при клике на кнопку

Подскажите пожалуйста как я могу прописать некоторую логику в SCSS. У меня есть кнопка, при нажатии на которую мой главный div контейнер либо растягивается, либо сужается со всем своим содержимым. У ...
Витя Гулак's user avatar
0 голосов
0 ответов
25 показов

Почему не получается переопределить background-color

В зависимости от состояния, блок должен менять цвет. Все нечетные блоки имеют цвет $smoky-white, а блоки в состоянии open должны иметь цвет $platinum. Проблема в то, что у &:nth-child(odd) блоков ...
Vadim Mokrushin's user avatar
0 голосов
0 ответов
21 показ

Не работает loop(бесконечный) слайдер swiper

Всем привет! Может кто сможет помочь, почему не работает loop в swiper slider? Ниже код ` const partnersSlider = new Swiper('.partners-slider', { // Optional parameters direction: '...
whoismatvei's user avatar
0 голосов
0 ответов
11 показов

Как сделать infinite auto adaptive carousel | html + css + javascript?

Создаю свой сайт и хочу сделать так чтобы под текстом, "каруселились" изображения, не знаю как это на русском, но на английском вот так это называется — infinite auto carousel Я бы хотел ...
Susoect's user avatar
0 голосов
1 ответ
24 показа

Кастомный select не видит img

<div class="select"> <div class="select__header"> <span class="select__current"> <img src="./img/rus.jpg" alt=""> +...
Fox777's user avatar
  • 1
0 голосов
0 ответов
16 показов

Авто отправка готового css кода по FTP

Есть gulp файл для преобразования scss кода в css: // Основной модуль import gulp from "gulp"; // Импорт путей import { path } from "./gulp/config/path.js"; // Импорт общих ...
mat's user avatar
  • 103
0 голосов
1 ответ
52 показа

Как сделать блок такого плана [закрыт]

Как грамотно сделать подобные пунктирные линии между блоками?
Agebekov Osman's user avatar
0 голосов
0 ответов
22 показа

Vue3: Неверное комментирование в <style> в VS Code

Разрабатываю на Vue 3 в VS Code. Внутри файла Vue есть три тега: <template>, <script>, <style>. При нажатии на ctrl+/ у меня комментируется код. Внутри тегов <template> и <...
catsolike's user avatar
0 голосов
0 ответов
14 показов

В Gulp сборке есть коллекция собственных снипетов, написаны они правильно с точки зрения синтаксиса, но при попытке их вызвать, они не срабатывают

В проекте не получается воспользоваться готовыми сниппетами, подскажите, как исправить это
Serega_88's user avatar
0 голосов
0 ответов
22 показа

Как сделать, что бы блок с position fixed стоял на месте, а не двигался вниз при заполнении контентом страницу

У меня есть react-компонент, в котором есть блок Ему в scss задан position fixed, дабы он оставался на месте, но он двигается при заполнении контентом страницу. Как это решить? // LeftMenu import { ...
Daniil Andreev's user avatar
0 голосов
0 ответов
26 показов

Как правильно убрать / отключить тег br в медиа правил?

Нужно в медиа правил после разрешение 576px убрать тег br где он был, в scss убираю через свойство display:none, как убирается перенос текста, то нету пробела между словами "стилизованные 3D-...
Forest_Ninjago's user avatar
0 голосов
1 ответ
34 показа

Как сделать такой карусель на swiper

Как сделать такую верстку через swiper пример карусель https://art-tehnik.ru/ скрин http://joxi.ru/BA0okeETqp0XN2 opacity: 0; transform: translateX(-50%); пробовал через css, но не так работает, как ...
mat's user avatar
  • 103
0 голосов
1 ответ
24 показа

Проблема с переполнением элментов html css

Проблема с переполнением данных, как это исправить? Разметка компонента ниже <div className="typed_food_item_container"> <div className="...
NewDev666's user avatar
0 голосов
0 ответов
22 показа

Лишние стили CSS на проекте

День добрый! Прошу помощи, при запуске проекта на Vue в инспекторе отображаются лишние стили не подходящие к данному блоку. Подскажите в чем проблема может быть? Проект на VUE из препроцессоров юзаю ...
Азамат Шарафутдинов's user avatar
0 голосов
1 ответ
35 показов

Нужна помощь с гридами

Пытаюсь по макету сверстать блок, но у меня криво получается. Надеюсь, вы поможете Желаемый результат: То, что есть сейчас: SCSS-код: &__right { display: grid; align-items: center; ...
Серёжа Сучалкин's user avatar
1 голос
1 ответ
37 показов

Как сделать одновременную смену цветов у блоков с разными цветами при нажатии на кнопку с возможностью при повторном клике вернуть цвет?

При помощи Jquery сделал переключение на сайте день-ночь. Цель сделать переключение при нажатии на кнопку смены одновременно большого количества цветов у блоков. (https://github.com/serega467/...
Serega_88's user avatar
0 голосов
4 ответа
91 показ

Как прикрепить начало одного блока и конец другого к диву?

Есть такой примерный рисунок: Нужно сделать так, чтобы конец блока black и начало блока white прикрепились к началу блока main. То есть, блок black и white делят страницу на 2 части. Можно сказать, ...
Andrey's user avatar
  • 17
-1 голос
1 ответ
52 показа

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

:) Подскажите пожалуйста, какие есть плагины или готовое решение, чтобы сделать аккордеон на подобие как в этом макете который ниже на скриншоте?
Forest_Ninjago's user avatar
0 голосов
1 ответ
47 показов

Как сделать цветную дугу поверх окружности HTML [дубликат]

я новичок у верстке, практикуюсь на макете. Мой код HTML КОД В SCSS: От что получается у меня, если по логике делать. Подскажите пожалуйста как правильно мне сделать эти кусочки дуги?:)
Forest_Ninjago's user avatar
0 голосов
0 ответов
31 показ

Как можно переопределить стили и добавить css-классы для готового react комонента?

Есть такой компонент в билиотеке @ap-cx/react-fullpage: var FullpageNavigation = /*#__PURE__*/function (_PureComponent) { _inherits(FullpageNavigation, _PureComponent); var _super = _createSuper$...
Konstantin_SH's user avatar
1 голос
0 ответов
14 показов

Комбинация mixin-ов, которые передаются через аргумент другого mixin-а и вызываются поочередно

возможно ли что то такое в sass @mixin combined($options, $mixins) { @each $value in $mixins { //value === имя михина из области видимости // 1: @include #{$value}($options); //либо ...
Armen's user avatar
  • 1,513
0 голосов
0 ответов
29 показов

Как использовать scroll-snap-type?

У меня есть стили в моем приложении. .page { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; overflow: hidden; transition: all .5s; background-...
Konstantin_SH's user avatar
0 голосов
0 ответов
17 показов

Не корректное отображение главной страницы при адаптиве, а именно планшеты телефоны

Все привет. Ребят не так давно изучаю верстку и возникла проблема с адаптивностью. Не подстраивается высота под размер экрана устройства. На айпадах почему то высота значительно превышает. Не совсем ...
MarkovaE's user avatar
0 голосов
0 ответов
17 показов

Как задать отступ у элементов слайдера?

Мб я что-то не понимаю или другое, но я не знаю как задать отступ у элементов слайдера. Margin не работает, или я где-то ошибся.. $(function() { $('.team-slider__items').slick({ infinite: ...
Данил Литвиненко's user avatar
0 голосов
0 ответов
17 показов

Кодогенераторы для Figma?

Подскажите, кто использует какие-то кодогенераторы поверх Figma? Какие-то плагины? *Раньше верстал psd шаблоны из Avocode и Zeplin, там была возможность контролировать переменные, работа с ...
BlackStar1991's user avatar
0 голосов
1 ответ
16 показов

как в css для grid-а плюсануть к fr pixel

(два блока) вот так не работает grid-template-columns: calc(2fr + 8px) 1fr; grid-template-columns: (calc(2fr + 8px)) 1fr;
Armen's user avatar
  • 1,513
0 голосов
0 ответов
14 показов

Проблема применения стилей в React приложении

Создаю web-приложение и админ панель к нему используя React. По корневому url localhost:3000 отображается страница приложения, которая выглядит так: По url localhost:3000/adminpanel открывается ...
Витя Гулак's user avatar
0 голосов
0 ответов
22 показа

Как убрать прокрутку если элемент имеет position absolute?

Я делаю проект используя react и scss. При вёрстке сайдбара появилась необходимость задать ему position: absolute; чтобы другие элементы не обращали на него внимания. Вот так выглядит структура. CSS ...
Витя Гулак's user avatar
1 голос
0 ответов
26 показов

Как коректно подключить шрифты к react приложению?

Переношу верстку на react. Возникли проблемы со шрифтами. Есть файл style.css, который был сформирован gulp еще при верстке. В нем есть шрифты: @font-face { font-family: "icon-font"; ...
Konstantin_SH's user avatar
0 голосов
1 ответ
27 показов

Текст в input смещается на иконку

Мне нужна ваша помощь. У меня есть input, внутри которого есть иконка svg и placeholder. Мой код ниже помогает мне начать писать внутри input с отступлением влево 48 px и текст отступлением вправо ...
Sayori Boy's user avatar
0 голосов
1 ответ
27 показов

Как указать прямого потомка в SCSS?

В css это можно сделать так: div { color: grey; } div>span { color: blue; } Как это сделать в SCSS? Типа: div { color: grey; >span { color: blue; } }
Дмитрий Красилюк's user avatar
0 голосов
1 ответ
41 показ

Webpack5 не могу отрисовать изображения из css

Я делаю сборку на webpack для верстки с поддержкой SCSS, Pug при необходимости. Из html я могу отрисовать изображения, а если я пытаюсь отрисовывать из CSS в background-image, то ничего не ...
Streammer's user avatar
  • 115
0 голосов
0 ответов
19 показов

Отличие @mixin от @function? [дубликат]

Подскажите пожалуйста, какое отличие @mixin от @function? Покажите пожалуйста наглядным примером. Когда использовать @mixin, а когда @function?
Айтишник's user avatar
0 голосов
0 ответов
21 показ

Как правильно разметить или под моб сверстать?

Сверстал такую вот шапку, но как его сверстать под мобильность? Не могу понять, помогите пожалуйста <header class="header"> <div class="header__container __container"&...
KILLER's user avatar
  • 19
0 голосов
1 ответ
18 показов

Как вставить % в миксинах scss

Не получается вставить % в миксины scss, могу вставит единицы em, rem, а % не знаю как. Искал информацию, но не нашел, пробовал через #{} не получается` @mixin adp($property, $max, $min, $...
Vorchun's user avatar
0 голосов
0 ответов
18 показов

Структура стартового шаблона? [дубликат]

Задавал я вчера вопрос, но задал я его поздно и мне никто и не ответил, к сожалению. Делаю свой стартовый шаблон для вёрстки на scss. Имеется сейчас у меня такая структура sass - base -- _global.scss /...
Айтишник's user avatar
0 голосов
0 ответов
26 показов

почему при использовании маски в svg линии светлеют?

.svg-line1 { stroke-width: 1; stroke-dashoffset: 1000; stroke-dasharray: 1000; animation: svg-line1 5s forwards; } .svg-line2 { stroke-width: 1; stroke-dashoffset: 1000; stroke-...
Vorchun's user avatar
0 голосов
0 ответов
14 показов

Допустима ли большая вложенность в SCSS как в SASS, или в SCSS принято придерживаться другого стиля?

прохожу курс, сейчас на теме препроцессоров и возник такой вопрос. допустима ли большая вложенность в SCSS, или нужен какой-то другой подход к написанию селекторов? просто препод показывает все на ...
28 Lucky's user avatar
0 голосов
0 ответов
11 показов

Gulp доп. страницы

Подскажите, как в dist добавить папку) pages? Не понимаю, как доп. страницы генерировать в папке dist
Никита Измаилов's user avatar
0 голосов
0 ответов
19 показов

Как сверстать подобный блок, чтобы при адаптиве ничего не ломалось?

Как сверстать подобный блок? Не понимаю каким способом разместить вот эти точки на пунктирной линии
Оксана Александрова's user avatar
0 голосов
0 ответов
23 показа

Как поменять цвет для компонента scss mosules react?

У меня в приложении есть компонент с черным цветом по умолчанию, как его поменять на другой? Здесь используются scss modules <Text className={styles.что тут написать?}></Text> /...
Marie's user avatar
  • 71
0 голосов
1 ответ
23 показа

Получить градиент картинки

Есть кнопка с градиентом: Мне нужно ее преобразовать в <button> с css градиентом для удобства работы. Пробовал методом тыка подобрать градиент, но ничего не получилось.
Саша Ни's user avatar
1 голос
1 ответ
24 показа

gulp. style.min.css в product, а style.css в dev

Подскажие по gulp (я не очень разбираюсь). Итак в результате сборки и компиляции sass и в продакт и дев версиях я получаю 2файла сss и min.css. Что если я не хочу в продакт версии получать обычный css ...
Alex March's user avatar
0 голосов
0 ответов
15 показов

Стоит ли добавлять scss стили в проект на Github?

Задаю такой вопрос, так как понимаю, что scss не имеет никакой значимости для проекта на Github и просто занимает лишний вес.
daniil_kapatsyna's user avatar
0 голосов
0 ответов
25 показов

Баги в анимации css

Можете помочь исправить баг, при плавном прокрутке скролла все работает хорошо, но при резком прокрутке анимация сломается Исходники на файлы тут - https://github.com/diasgalymbek47/Test.git. Код ...
Dias's user avatar
  • 45