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

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

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

Как настроить vs code для работы с sass(не конвертор!)

Подскажите пожалуйста, как настроить Visual Studio Code для работы с Sass. Мне не нужно конвертировать код, а именно подсказки как в стоке с Css, подсветка синтаксиса и тд. Пробовал плагин "Sass (...
Ivan Kachula's user avatar
0 голосов
0 ответов
20 показов

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

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

При завершения Event (События), фон события не перерисовывается

Всем здравствуйте. Никак не могу понять, что не так. При создании события появляется данный фон #EF5350, а когда фон завершается, то фон становится #18FFFF. А должно быть наоборот, почему так ...
Andrew Phoenix's user avatar
0 голосов
1 ответ
8 показов

SASS не работает один класс

Делаю сайт, в header есть вот такой текст, разбитый на два класса main и secondary. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &...
Илья's user avatar
0 голосов
0 ответов
22 показа

При запуске gulp в терминале появляется ошибка: Error in plugin 'sass'.Error: Argument $file-formats was passed both by position and by name

Пожалуйста, помогите разобраться: При запуске gulp в терминале появляется ошибка: Error in plugin "sass" Message: catalog\view\theme\olivia\stylesheet\_fonts.sass Error: Argument $file-...
GHOST's user avatar
  • 1
0 голосов
1 ответ
20 показов

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

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

Как стилизовать отдельные элементы в json файле?

Всем привет, подскажите, как можно стилизовать отдельные элементы в json файле? Вот например у меня есть json файл, там такие элементы (прикрепил меньше, так как их гораздо больше): [ { ...
Andrew Phoenix's user avatar
0 голосов
0 ответов
15 показов

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

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

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

В зависимости от состояния, блок должен менять цвет. Все нечетные блоки имеют цвет $smoky-white, а блоки в состоянии open должны иметь цвет $platinum. Проблема в то, что у &:nth-child(odd) блоков ...
Vadim Mokrushin'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 голосов
1 ответ
37 показов

Не подключается шрифт через @font-face

Создаю веб-приложение на React'e и столкнулся с такой проблемой, что не могу подключить шрифт через @font-face. Как это можно исправить помогите пожалуйста, внизу привёл код и скрины расположения ...
Ruslan Makhmatov's user avatar
0 голосов
1 ответ
37 показов

Как сделать анимацию аккордиону через JS

Помогите пожалуйста мне нужна анимация для аккордиона. Сам аккордион взял с интернета, а JS я пока что не знаю. Вот сам аккордион, я под себя уже переделал, но мне нужна анимация через JS, чтобы доп. ...
LowTree's user avatar
  • 21
0 голосов
0 ответов
29 показов

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

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

Почему не работает миксин, который управляет адаптивом

У меня есть миксин для sass, который адаптивно уменьшает размер в пикселях, он принимает в себя :свойство, размер в макете, размер на 320, режим, и автоматически уменьшает размер при уменьшении экрана:...
Matvey Androsyuk's user avatar
0 голосов
1 ответ
47 показов

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

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

Как отключить overflow-x

Всем привет! Я сейчас делаю сайт и столкнулся с такой проблемой, что в мобильной версии не могу отключить overflow-x, точнее в коде он отключен, но на практике всё равно работает. Ссылка на веб-сайт: ...
Ruslan Makhmatov's user avatar
0 голосов
1 ответ
28 показов

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

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

Ошибка компиляции sass

Столкнулся с такой проблемой, решил подключить библиотеку carbon ui, но она работает только вместе с sass. По проекту node 16v , react 16v , использовал CRA. Все сделал как написано в доках, но ...
Student's user avatar
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 голосов
0 ответов
14 показов

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

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

Popup не появляется при клике, хотя класс успешно меняется

При клике на кнопку элемент получает нужный класс, но с блоком ничего не происходит const button1 = document.querySelector('#pop-up-like') const bag1 = document.querySelector('#pop-up-like-...
Malfan's user avatar
  • 125
1 голос
1 ответ
66 показов

Ошибка компиляции React

Через npm install sass установила sass, запускаю проект и он выдает такую ошибку, не могу ее решить. Что делать? Failed to compile. ./src/components/Button/Button.module.scss (./node_modules/css-...
Ника Волкова's user avatar
0 голосов
0 ответов
89 показов

Ломаются пути при использовании SCSS и сборщика (Vite)

Один и тот же код прекрастно работает на CSS, но отказывается работать на SCSS. CSS @import url("bootstrap/dist/css/bootstrap.min.css"); @import url("bootstrap-icons/font/bootstrap-...
Object417's user avatar
  • 1,139
0 голосов
2 ответа
45 показов

При подключении шрифтов отображается только один шрифт

Файл fonts.sass @font-face font-family: 'ABC Monument Grotesk Mono' src: url('./fonts/ABCMonumentGroteskMono-Regular.eot') src: url('./fonts/ABCMonumentGroteskMono-Regular.eot?#iefix') format('...
C0nen's user avatar
  • 1
0 голосов
0 ответов
52 показа

В SASS не работают подсказки(autocopmlete)

Я уже все мозги себе вы**** простите)). В sass приходится писать все в ручную, без выпадающих подсказок(autocopmlete, вроде называются, не суть =) ). После того как пишу вложенность допустим, &...
Ametist's user avatar
  • 13
0 голосов
0 ответов
15 показов

Какой смысл от sass и scss?

Читаю статью и там пишут о том, что он ускоряет написание css, так же имеются переменные. Эмм... И что? У css тоже есть переменные (:root). Расскажите пожалуйста, какой от них смысл, так же, ...
GGGG's user avatar
  • 5
0 голосов
0 ответов
21 показ

Не пойму почему двигается border SCSS?

В общем есть кнопка загрузка , при клике не нее происходит загрузка ( анимация ) и потом возвращается в обычную кнопку зеленую. Суть в том что при загрузке border крутится но его чуть чуть кидает то ...
Артем Мишуровский's user avatar
0 голосов
0 ответов
24 показа

отменить действие sass :not

Не понимаю почему не работает, кто подскажет? при уменьшении экрана хочу убрать бордер и отступ, который задал через &:not(:last-child), а ничего не срабатывает, как правильно прописать? $...
Дмитрий's user avatar
1 голос
0 ответов
18 показов

Упрощение стилей

Имеются элементы такого вида: <Typography className={styles.element} sx={{ color: `${getColor(status)}` }}> {state} </Typography> Возможно ли упростить данную ...
alexander's user avatar
0 голосов
1 ответ
44 показа

Обращение к первому элементу в колонке html

Подскажите пожалуйста, как мне установить контент у первого элемента в колонке? Я имею следующий html код: <div class="all"> <div class="column"> <div ...
Fa4stik's user avatar
  • 83
0 голосов
0 ответов
13 показов

Некорректная работа @extend на псевдоклассе :focus

В проекте стала использовать наследование/расширение Sass - @extend (в данном случае - для стилизации интерактивных состояний), но столкнулась со следующей проблемой. Сами шаблоны наследования я ...
IrinK's user avatar
  • 21
0 голосов
1 ответ
16 показов

Почему файл _general.sass не видит переменные и миксины?

Файл general.sass не видит миксины в файле _mixins.sass и переменные в файле _variables.sass, но при этом медиа файлы в _media.sass он видит. Как это исправить?
Eleonora Erokhina's user avatar
0 голосов
0 ответов
14 показов

Не работают стили для pug

В папке server главный файл: import express from "express"; import cors from "cors"; import indexRoute from "./routes/index.js"; import path from "path"; import { fileURLToPath } from "url"; ...
Алексей Яковлев's user avatar
0 голосов
0 ответов
25 показов

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

во время написания адаптива сайта столкнулся с такой проблемой, у меня есть data file в котором я храню данные navbar-а. Само меню делиться на две части: левую и правую. С помощью "display: flex; ...
Сергей Миронин's user avatar
0 голосов
0 ответов
14 показов

Как поменять цвет mat-spinner внутри div'a?

html: <div> <div class="message">{{Message}} <mat-spinner [diameter]="30" class="spinner"></mat-spinner> </div> </div> sass: ....
Zeee's user avatar
  • 35
0 голосов
2 ответа
322 показа

Error: Node Sass version 7.0.3 is incompatible with ^4.0.0

Установил node-sass версии 7.0.3 Версия node js - 17.0.9 Версия npm -8.5.5 Пытался ограничиться модулем sass вместо node-sass, но пишет To import Sass files, you first need to install node-sass. ...
muerewaa's user avatar
  • 100
0 голосов
0 ответов
37 показов

Как определить состояние hover у родителя из дочки?

Есть следующий стиль: .card-container { // ... .card { // ... .card-icon { // ... &.org { // ... } } } } И следующее использование: <div class="...
Виктория Шатилова's user avatar
0 голосов
1 ответ
37 показов

Позиционирование несколько картинок как фон, чтобы не разъезжались

Нужно сделать на фоне три картинки(коробочки), чтобы они стояли вместе и уменьшались от масштабирования браузера. Делал через абсолют, лефт, топ и размер картинок прописывал в rem и процентах. Они ...
user avatar
1 голос
1 ответ
133 показа

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

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

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

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

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

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

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

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

Изменить background у ColorPicker react.js

Как поменять цвет background у ColorPicker? Библиотека import styled from "styled-components"; Можно отредактировать тут import React, {useState} from 'react'; import styled from "...
gorden's user avatar
  • 237
0 голосов
2 ответа
52 показа

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

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

Как перекрыть стили UI фреймворка

Всем привет. Воспрос несколько глупый, но все же :) У меня есть проект Vue с Quasar. Соответственно при верстке я использую элементы Quasar. Если я пишу стили внутри компонента, то вроде как все ...
Vadim Tregubenko's user avatar
0 голосов
0 ответов
50 показов

Не видимый padding

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

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

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

Не видит файл с mixins_all.sass

После запуска Gulp вот такая ошибка Я не знаю как пофиксить. Уже раза 3 файл переписывал и вс без толку. вот пример что содержится в файле: // функция для перевода в rem - пример перевода padding-...
Roman Honchar's user avatar
0 голосов
1 ответ
43 показа

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

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