Вопросы с меткой [scss]
SCSS (Sassy CSS) — тип синтаксиса для Sass (Syntactically Awesome Style Sheets). Является расширением языка CSS. Это означает, что любой валидный файл стилей является валидным SCSS файлом. Вдобавок, SCSS понимает большинство CSS хаков и специфических вендорных свойств, таких как свойство filter для старых версий IE. Файлы, использующие этот синтаксис, имеют расширение .scss
583
вопроса
0
голосов
0
ответов
34
показа
Как запускать анимацию только когда она появляется в поле видимости anime.js
Я уже сделал анимацию на anime.js, но она проигрывается после прогрузки страницы, а хочется чтобы только когда я до неё доскроливал.
Я думаю использовать ScrollTrigger, но может кто лучше разбирается ...
0
голосов
0
ответов
19
показов
Справка по команде @include sсss
Видел в коде
@include font('Work Sans', 400);
Искал в интернете @include sсss, но хорошей справки по этой команде не нашел. Приведите хорошую справку по этой команде.
1
голос
0
ответов
22
показа
Как отцентровать блоки в последней строке грида, при условии, что блок динамичный и количество элементов может меняться?
Как отцентровать блоки в последней строке грида, при условии, что блок динамичный и количество элементов может меняться?
Собственно, интересует, есть ли вообще такое решение у грида, не рассматривая ...
0
голосов
0
ответов
16
показов
Swiper slider не переключается слайд в thumbs
Cлева в thumbs, слайды по стрелочкам переключаются только до третьего, но если нажать на сам слайд или на стрелочку которая находиться на главном экране, то все работает. Помогите сделать чтобы в ...
0
голосов
1
ответ
20
показов
Не получается подгрузить стили через WebPack
Я пытаюсь подключить шрифты на WebPack но он их не видит. Скачал шрифты, настроил sass и css, но шрифты не подгружает. не могу понять в чем проблема
вот конфиг моего WebPack
const HtmlWebpackPlugin = ...
0
голосов
0
ответов
15
показов
Как применять тот или иной стиль в SCSS в зависимости от значения переменной, которое должно присваиваться при клике на кнопку
Подскажите пожалуйста как я могу прописать некоторую логику в SCSS. У меня есть кнопка, при нажатии на которую мой главный div контейнер либо растягивается, либо сужается со всем своим содержимым. У ...
0
голосов
0
ответов
25
показов
Почему не получается переопределить background-color
В зависимости от состояния, блок должен менять цвет. Все нечетные блоки имеют цвет $smoky-white, а блоки в состоянии open должны иметь цвет $platinum.
Проблема в то, что у &:nth-child(odd) блоков ...
0
голосов
0
ответов
21
показ
Не работает loop(бесконечный) слайдер swiper
Всем привет! Может кто сможет помочь, почему не работает loop в swiper slider? Ниже код `
const partnersSlider = new Swiper('.partners-slider', {
// Optional parameters
direction: '...
0
голосов
0
ответов
11
показов
Как сделать infinite auto adaptive carousel | html + css + javascript?
Создаю свой сайт и хочу сделать так чтобы под текстом, "каруселились" изображения, не знаю как это на русском, но на английском вот так это называется — infinite auto carousel
Я бы хотел ...
0
голосов
1
ответ
24
показа
Кастомный select не видит img
<div class="select">
<div class="select__header">
<span class="select__current"> <img src="./img/rus.jpg" alt=""> +...
0
голосов
0
ответов
16
показов
Авто отправка готового css кода по FTP
Есть gulp файл для преобразования scss кода в css:
// Основной модуль
import gulp from "gulp";
// Импорт путей
import { path } from "./gulp/config/path.js";
// Импорт общих ...
0
голосов
1
ответ
52
показа
Как сделать блок такого плана [закрыт]
Как грамотно сделать подобные пунктирные линии между блоками?
0
голосов
0
ответов
22
показа
Vue3: Неверное комментирование в <style> в VS Code
Разрабатываю на Vue 3 в VS Code.
Внутри файла Vue есть три тега: <template>, <script>, <style>.
При нажатии на ctrl+/ у меня комментируется код. Внутри тегов <template> и <...
0
голосов
0
ответов
14
показов
В Gulp сборке есть коллекция собственных снипетов, написаны они правильно с точки зрения синтаксиса, но при попытке их вызвать, они не срабатывают
В проекте не получается воспользоваться готовыми сниппетами, подскажите, как исправить это
0
голосов
0
ответов
22
показа
Как сделать, что бы блок с position fixed стоял на месте, а не двигался вниз при заполнении контентом страницу
У меня есть react-компонент, в котором есть блок Ему в scss задан position fixed, дабы он оставался на месте, но он двигается при заполнении контентом страницу. Как это решить?
// LeftMenu
import {
...
0
голосов
0
ответов
26
показов
Как правильно убрать / отключить тег br в медиа правил?
Нужно в медиа правил после разрешение 576px убрать тег br где он был, в scss убираю через свойство display:none, как убирается перенос текста, то нету пробела между словами "стилизованные 3D-...
0
голосов
1
ответ
34
показа
Как сделать такой карусель на swiper
Как сделать такую верстку через swiper
пример карусель
https://art-tehnik.ru/
скрин
http://joxi.ru/BA0okeETqp0XN2
opacity: 0;
transform: translateX(-50%);
пробовал через css, но не так работает, как ...
0
голосов
1
ответ
24
показа
Проблема с переполнением элментов html css
Проблема с переполнением данных, как это исправить?
Разметка компонента ниже
<div className="typed_food_item_container">
<div className="...
0
голосов
0
ответов
22
показа
Лишние стили CSS на проекте
День добрый! Прошу помощи, при запуске проекта на Vue в инспекторе отображаются лишние стили не подходящие к данному блоку. Подскажите в чем проблема может быть? Проект на VUE из препроцессоров юзаю ...
0
голосов
1
ответ
35
показов
Нужна помощь с гридами
Пытаюсь по макету сверстать блок, но у меня криво получается. Надеюсь, вы поможете
Желаемый результат:
То, что есть сейчас:
SCSS-код:
&__right {
display: grid;
align-items: center;
...
1
голос
1
ответ
37
показов
Как сделать одновременную смену цветов у блоков с разными цветами при нажатии на кнопку с возможностью при повторном клике вернуть цвет?
При помощи Jquery сделал переключение на сайте день-ночь. Цель сделать переключение при нажатии на кнопку смены одновременно большого количества цветов у блоков.
(https://github.com/serega467/...
0
голосов
4
ответа
91
показ
Как прикрепить начало одного блока и конец другого к диву?
Есть такой примерный рисунок:
Нужно сделать так, чтобы конец блока black и начало блока white прикрепились к началу блока main. То есть, блок black и white делят страницу на 2 части. Можно сказать, ...
-1
голос
1
ответ
52
показа
Какие есть плагины или готовое решение чтобы сделать аккордеон на подобие как в макете?
:) Подскажите пожалуйста, какие есть плагины или готовое решение, чтобы сделать аккордеон на подобие как в этом макете который ниже на скриншоте?
0
голосов
1
ответ
47
показов
Как сделать цветную дугу поверх окружности HTML [дубликат]
я новичок у верстке, практикуюсь на макете.
Мой код HTML
КОД В SCSS:
От что получается у меня, если по логике делать. Подскажите пожалуйста как правильно мне сделать эти кусочки дуги?:)
0
голосов
0
ответов
31
показ
Как можно переопределить стили и добавить css-классы для готового react комонента?
Есть такой компонент в билиотеке @ap-cx/react-fullpage:
var FullpageNavigation = /*#__PURE__*/function (_PureComponent) {
_inherits(FullpageNavigation, _PureComponent);
var _super = _createSuper$...
1
голос
0
ответов
14
показов
Комбинация mixin-ов, которые передаются через аргумент другого mixin-а и вызываются поочередно
возможно ли что то такое в sass
@mixin combined($options, $mixins) {
@each $value in $mixins {
//value === имя михина из области видимости
// 1:
@include #{$value}($options);
//либо ...
0
голосов
0
ответов
29
показов
Как использовать scroll-snap-type?
У меня есть стили в моем приложении.
.page {
position: relative;
display: flex;
flex: 1 1 auto;
flex-direction: column;
overflow: hidden;
transition: all .5s;
background-...
0
голосов
0
ответов
17
показов
Не корректное отображение главной страницы при адаптиве, а именно планшеты телефоны
Все привет. Ребят не так давно изучаю верстку и возникла проблема с адаптивностью. Не подстраивается высота под размер экрана устройства. На айпадах почему то высота значительно превышает. Не совсем ...
0
голосов
0
ответов
17
показов
Как задать отступ у элементов слайдера?
Мб я что-то не понимаю или другое, но я не знаю как задать отступ у элементов слайдера.
Margin не работает, или я где-то ошибся..
$(function() {
$('.team-slider__items').slick({
infinite: ...
0
голосов
0
ответов
17
показов
Кодогенераторы для Figma?
Подскажите, кто использует какие-то кодогенераторы поверх Figma? Какие-то плагины?
*Раньше верстал psd шаблоны из Avocode и Zeplin, там была возможность контролировать переменные, работа с ...
0
голосов
1
ответ
16
показов
как в css для grid-а плюсануть к fr pixel
(два блока)
вот так не работает
grid-template-columns: calc(2fr + 8px) 1fr;
grid-template-columns: (calc(2fr + 8px)) 1fr;
0
голосов
0
ответов
14
показов
Проблема применения стилей в React приложении
Создаю web-приложение и админ панель к нему используя React. По корневому url localhost:3000 отображается страница приложения, которая выглядит так:
По url localhost:3000/adminpanel открывается ...
0
голосов
0
ответов
22
показа
Как убрать прокрутку если элемент имеет position absolute?
Я делаю проект используя react и scss. При вёрстке сайдбара появилась необходимость задать ему position: absolute; чтобы другие элементы не обращали на него внимания. Вот так выглядит структура.
CSS ...
1
голос
0
ответов
26
показов
Как коректно подключить шрифты к react приложению?
Переношу верстку на react. Возникли проблемы со шрифтами. Есть файл style.css, который был сформирован gulp еще при верстке. В нем есть шрифты:
@font-face {
font-family: "icon-font";
...
0
голосов
1
ответ
27
показов
Текст в input смещается на иконку
Мне нужна ваша помощь. У меня есть input, внутри которого есть иконка svg и placeholder.
Мой код ниже помогает мне начать писать внутри input с отступлением влево 48 px и текст отступлением вправо ...
0
голосов
1
ответ
27
показов
Как указать прямого потомка в SCSS?
В css это можно сделать так:
div {
color: grey;
}
div>span {
color: blue;
}
Как это сделать в SCSS?
Типа:
div {
color: grey;
>span { color: blue; }
}
0
голосов
1
ответ
41
показ
Webpack5 не могу отрисовать изображения из css
Я делаю сборку на webpack для верстки с поддержкой SCSS, Pug при необходимости. Из html я могу отрисовать изображения, а если я пытаюсь отрисовывать из CSS в background-image, то ничего не ...
0
голосов
0
ответов
19
показов
Отличие @mixin от @function? [дубликат]
Подскажите пожалуйста, какое отличие @mixin от @function? Покажите пожалуйста наглядным примером. Когда использовать @mixin, а когда @function?
0
голосов
0
ответов
21
показ
Как правильно разметить или под моб сверстать?
Сверстал такую вот шапку, но как его сверстать под мобильность? Не могу понять, помогите пожалуйста
<header class="header">
<div class="header__container __container"&...
0
голосов
1
ответ
18
показов
Как вставить % в миксинах scss
Не получается вставить % в миксины scss, могу вставит единицы em, rem, а % не знаю как.
Искал информацию, но не нашел, пробовал через #{} не получается`
@mixin adp($property, $max, $min, $...
0
голосов
0
ответов
18
показов
Структура стартового шаблона? [дубликат]
Задавал я вчера вопрос, но задал я его поздно и мне никто и не ответил, к сожалению.
Делаю свой стартовый шаблон для вёрстки на scss.
Имеется сейчас у меня такая структура
sass
- base
-- _global.scss /...
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-...
0
голосов
0
ответов
14
показов
Допустима ли большая вложенность в SCSS как в SASS, или в SCSS принято придерживаться другого стиля?
прохожу курс, сейчас на теме препроцессоров и возник такой вопрос. допустима ли большая вложенность в SCSS, или нужен какой-то другой подход к написанию селекторов? просто препод показывает все на ...
0
голосов
0
ответов
11
показов
Gulp доп. страницы
Подскажите, как в dist добавить папку) pages?
Не понимаю, как доп. страницы генерировать в папке dist
0
голосов
0
ответов
19
показов
Как сверстать подобный блок, чтобы при адаптиве ничего не ломалось?
Как сверстать подобный блок? Не понимаю каким способом разместить вот эти точки на пунктирной линии
0
голосов
0
ответов
23
показа
Как поменять цвет для компонента scss mosules react?
У меня в приложении есть компонент с черным цветом по умолчанию, как его поменять на другой?
Здесь используются scss modules
<Text className={styles.что тут написать?}></Text>
/...
0
голосов
1
ответ
23
показа
Получить градиент картинки
Есть кнопка с градиентом:
Мне нужно ее преобразовать в <button> с css градиентом для удобства работы. Пробовал методом тыка подобрать градиент, но ничего не получилось.
1
голос
1
ответ
24
показа
gulp. style.min.css в product, а style.css в dev
Подскажие по gulp (я не очень разбираюсь). Итак в результате сборки и компиляции sass и в продакт и дев версиях я получаю 2файла сss и min.css. Что если я не хочу в продакт версии получать обычный css ...
0
голосов
0
ответов
15
показов
Стоит ли добавлять scss стили в проект на Github?
Задаю такой вопрос, так как понимаю, что scss не имеет никакой значимости для проекта на Github и просто занимает лишний вес.
0
голосов
0
ответов
25
показов
Баги в анимации css
Можете помочь исправить баг, при плавном прокрутке скролла все работает хорошо, но при резком прокрутке анимация сломается
Исходники на файлы тут - https://github.com/diasgalymbek47/Test.git.
Код ...