Вопросы с меткой [sass]
Sass (Syntactically Awesome StyleSheets) — расширение CSS, которое добавляет мощь и элегантность основному языку. Оно позволяет использовать переменные, вложенные правила, примеси, импорт и прочее, обеспечивая полностью CSS-совместимый синтаксис. Sass помогает упорядочить содержимое больших файлов, а малым обеспечивает лучшую скорость работы, частично с помощью библиотеки Compass.
535
вопросов
0
голосов
0
ответов
16
показов
Как настроить vs code для работы с sass(не конвертор!)
Подскажите пожалуйста, как настроить Visual Studio Code для работы с Sass. Мне не нужно конвертировать код, а именно подсказки как в стоке с Css, подсветка синтаксиса и тд. Пробовал плагин "Sass (...
0
голосов
0
ответов
20
показов
Справка по команде @include sсss
Видел в коде
@include font('Work Sans', 400);
Искал в интернете @include sсss, но хорошей справки по этой команде не нашел. Приведите хорошую справку по этой команде.
1
голос
1
ответ
18
показов
При завершения Event (События), фон события не перерисовывается
Всем здравствуйте. Никак не могу понять, что не так. При создании события появляется данный фон #EF5350, а когда фон завершается, то фон становится #18FFFF. А должно быть наоборот, почему так ...
0
голосов
1
ответ
8
показов
SASS не работает один класс
Делаю сайт, в header есть вот такой текст, разбитый на два класса main и secondary.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
&...
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-...
0
голосов
1
ответ
20
показов
Не получается подгрузить стили через WebPack
Я пытаюсь подключить шрифты на WebPack но он их не видит. Скачал шрифты, настроил sass и css, но шрифты не подгружает. не могу понять в чем проблема
вот конфиг моего WebPack
const HtmlWebpackPlugin = ...
0
голосов
0
ответов
33
показа
Как стилизовать отдельные элементы в json файле?
Всем привет, подскажите, как можно стилизовать отдельные элементы в json файле? Вот например у меня есть json файл, там такие элементы (прикрепил меньше, так как их гораздо больше):
[
{
...
0
голосов
0
ответов
15
показов
Как применять тот или иной стиль в SCSS в зависимости от значения переменной, которое должно присваиваться при клике на кнопку
Подскажите пожалуйста как я могу прописать некоторую логику в SCSS. У меня есть кнопка, при нажатии на которую мой главный div контейнер либо растягивается, либо сужается со всем своим содержимым. У ...
0
голосов
0
ответов
26
показов
Почему не получается переопределить background-color
В зависимости от состояния, блок должен менять цвет. Все нечетные блоки имеют цвет $smoky-white, а блоки в состоянии open должны иметь цвет $platinum.
Проблема в то, что у &:nth-child(odd) блоков ...
0
голосов
1
ответ
24
показа
Кастомный select не видит img
<div class="select">
<div class="select__header">
<span class="select__current"> <img src="./img/rus.jpg" alt=""> +...
0
голосов
1
ответ
37
показов
Не подключается шрифт через @font-face
Создаю веб-приложение на React'e и столкнулся с такой проблемой, что не могу подключить шрифт через @font-face. Как это можно исправить помогите пожалуйста, внизу привёл код и скрины расположения ...
0
голосов
1
ответ
37
показов
Как сделать анимацию аккордиону через JS
Помогите пожалуйста мне нужна анимация для аккордиона. Сам аккордион взял с интернета, а JS я пока что не знаю.
Вот сам аккордион, я под себя уже переделал, но мне нужна анимация через JS, чтобы доп. ...
0
голосов
0
ответов
29
показов
Как правильно убрать / отключить тег br в медиа правил?
Нужно в медиа правил после разрешение 576px убрать тег br где он был, в scss убираю через свойство display:none, как убирается перенос текста, то нету пробела между словами "стилизованные 3D-...
0
голосов
0
ответов
9
показов
Почему не работает миксин, который управляет адаптивом
У меня есть миксин для sass, который адаптивно уменьшает размер в пикселях, он принимает в себя :свойство, размер в макете, размер на 320, режим, и автоматически уменьшает размер при уменьшении экрана:...
0
голосов
1
ответ
47
показов
Как сделать цветную дугу поверх окружности HTML [дубликат]
я новичок у верстке, практикуюсь на макете.
Мой код HTML
КОД В SCSS:
От что получается у меня, если по логике делать. Подскажите пожалуйста как правильно мне сделать эти кусочки дуги?:)
0
голосов
0
ответов
12
показов
Как отключить overflow-x
Всем привет! Я сейчас делаю сайт и столкнулся с такой проблемой, что в мобильной версии не могу отключить overflow-x, точнее в коде он отключен, но на практике всё равно работает.
Ссылка на веб-сайт:
...
0
голосов
1
ответ
28
показов
Как указать прямого потомка в SCSS?
В css это можно сделать так:
div {
color: grey;
}
div>span {
color: blue;
}
Как это сделать в SCSS?
Типа:
div {
color: grey;
>span { color: blue; }
}
0
голосов
0
ответов
24
показа
Ошибка компиляции sass
Столкнулся с такой проблемой, решил подключить библиотеку carbon ui, но она работает только вместе с sass. По проекту node 16v , react 16v , использовал CRA. Все сделал как написано в доках, но ...
0
голосов
0
ответов
19
показов
Отличие @mixin от @function? [дубликат]
Подскажите пожалуйста, какое отличие @mixin от @function? Покажите пожалуйста наглядным примером. Когда использовать @mixin, а когда @function?
0
голосов
0
ответов
21
показ
Как правильно разметить или под моб сверстать?
Сверстал такую вот шапку, но как его сверстать под мобильность? Не могу понять, помогите пожалуйста
<header class="header">
<div class="header__container __container"&...
0
голосов
0
ответов
14
показов
Допустима ли большая вложенность в SCSS как в SASS, или в SCSS принято придерживаться другого стиля?
прохожу курс, сейчас на теме препроцессоров и возник такой вопрос. допустима ли большая вложенность в SCSS, или нужен какой-то другой подход к написанию селекторов? просто препод показывает все на ...
0
голосов
0
ответов
30
показов
Popup не появляется при клике, хотя класс успешно меняется
При клике на кнопку элемент получает нужный класс, но с блоком ничего не происходит
const button1 = document.querySelector('#pop-up-like')
const bag1 = document.querySelector('#pop-up-like-...
1
голос
1
ответ
66
показов
Ошибка компиляции React
Через npm install sass установила sass, запускаю проект и он выдает такую ошибку, не могу ее решить. Что делать?
Failed to compile.
./src/components/Button/Button.module.scss (./node_modules/css-...
0
голосов
0
ответов
89
показов
Ломаются пути при использовании SCSS и сборщика (Vite)
Один и тот же код прекрастно работает на CSS, но отказывается работать на SCSS.
CSS
@import url("bootstrap/dist/css/bootstrap.min.css");
@import url("bootstrap-icons/font/bootstrap-...
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('...
0
голосов
0
ответов
52
показа
В SASS не работают подсказки(autocopmlete)
Я уже все мозги себе вы**** простите)). В sass приходится писать все в ручную, без выпадающих подсказок(autocopmlete, вроде называются, не суть =) ). После того как пишу вложенность допустим, &...
0
голосов
0
ответов
15
показов
Какой смысл от sass и scss?
Читаю статью и там пишут о том, что он ускоряет написание css, так же имеются переменные. Эмм... И что? У css тоже есть переменные (:root). Расскажите пожалуйста, какой от них смысл, так же, ...
0
голосов
0
ответов
21
показ
Не пойму почему двигается border SCSS?
В общем есть кнопка загрузка , при клике не нее происходит загрузка ( анимация ) и потом возвращается в обычную кнопку зеленую.
Суть в том что при загрузке border крутится но его чуть чуть кидает то ...
0
голосов
0
ответов
24
показа
отменить действие sass :not
Не понимаю почему не работает, кто подскажет? при уменьшении экрана хочу убрать бордер и отступ, который задал через &:not(:last-child), а ничего не срабатывает, как правильно прописать?
$...
1
голос
0
ответов
18
показов
Упрощение стилей
Имеются элементы такого вида:
<Typography
className={styles.element}
sx={{ color: `${getColor(status)}` }}>
{state}
</Typography>
Возможно ли упростить данную ...
0
голосов
1
ответ
44
показа
Обращение к первому элементу в колонке html
Подскажите пожалуйста, как мне установить контент у первого элемента в колонке?
Я имею следующий html код:
<div class="all">
<div class="column">
<div ...
0
голосов
0
ответов
13
показов
Некорректная работа @extend на псевдоклассе :focus
В проекте стала использовать наследование/расширение Sass - @extend (в данном случае - для стилизации интерактивных состояний), но столкнулась со следующей проблемой.
Сами шаблоны наследования я ...
0
голосов
1
ответ
16
показов
Почему файл _general.sass не видит переменные и миксины?
Файл general.sass не видит миксины в файле _mixins.sass и переменные в файле _variables.sass, но при этом медиа файлы в _media.sass он видит. Как это исправить?
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";
...
0
голосов
0
ответов
25
показов
Как расположить два дива с одинаковыми классами вертикально друг под другом?
во время написания адаптива сайта столкнулся с такой проблемой, у меня есть data file в котором я храню данные navbar-а. Само меню делиться на две части: левую и правую. С помощью "display: flex; ...
0
голосов
0
ответов
14
показов
Как поменять цвет mat-spinner внутри div'a?
html:
<div>
<div class="message">{{Message}}
<mat-spinner [diameter]="30" class="spinner"></mat-spinner>
</div>
</div>
sass:
....
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.
...
0
голосов
0
ответов
37
показов
Как определить состояние hover у родителя из дочки?
Есть следующий стиль:
.card-container {
// ...
.card {
// ...
.card-icon {
// ...
&.org {
// ...
}
}
}
}
И следующее использование:
<div class="...
0
голосов
1
ответ
37
показов
Позиционирование несколько картинок как фон, чтобы не разъезжались
Нужно сделать на фоне три картинки(коробочки), чтобы они стояли вместе и уменьшались от масштабирования браузера. Делал через абсолют, лефт, топ и размер картинок прописывал в rem и процентах. Они ...
1
голос
1
ответ
133
показа
Терминал открывается каждый раз после компиляции SCSS
Подскажите пожалуйста, как сделать так, чтобы терминал не открывался при каждом изменении в scss коде?
То есть, я буквально ставлю пробел в коде или делаю любое другое изменение кода и тут же ...
0
голосов
1
ответ
61
показ
CSS: Как нарисовать такой гексагон?
Как нарисовать такой гексагон через CSS? Нарисовать нужно сейчас, а тему псевдоселекторов я так и не понял, если вы имеете, какие-то хорошие источники, где объясняют сложное по простому будет ...
0
голосов
1
ответ
25
показов
Помогите создать 'Выпадающий' блок поиска по сайту
`Ребят, написал код, при котором выпадающая строка поиска по сайту скрывается и появляется при помощи visability.
Теперь вопрос остался, а как всё-таки это чудо анимировать?
Подскажите, в каком ...
1
голос
0
ответов
26
показов
Миксин для отзывчивого свойства
p {
font-size: 15px;
}
@media screen and (min-width: 850px) {
p {
font-size: calc(15px + 3 * ((100vw - 850px) / 270));
}
...
0
голосов
0
ответов
48
показов
Изменить background у ColorPicker react.js
Как поменять цвет background у ColorPicker?
Библиотека import styled from "styled-components"; Можно отредактировать тут
import React, {useState} from 'react';
import styled from "...
0
голосов
2
ответа
52
показа
Как правильно сверстать данный блок
Подскажите пожалуйста как правильно сверстать данный title новичку? Думал обернуть каждое слово в отдельный div и через margin прописать, но для адаптива это не лучшее решение думаю
0
голосов
0
ответов
16
показов
Как перекрыть стили UI фреймворка
Всем привет.
Воспрос несколько глупый, но все же :)
У меня есть проект Vue с Quasar. Соответственно при верстке я использую элементы Quasar.
Если я пишу стили внутри компонента, то вроде как все ...
0
голосов
0
ответов
50
показов
Не видимый padding
Во всех браузерах кроме Firefox у блока появляется не заданный padding.
Обнуления отступов не работает даже с максимальным приоритетом.Изменения длины не помогло.
Важно у блока свойство overflow: ...
0
голосов
1
ответ
67
показов
Запись hover вместе в before в препроцессоре
Мне нужно чтобы hover срабатывал на before
Интересует как это реализовать используя именно свойства препроцессора sass.
То есть я навожу мышкой на слово и появляется мой псевдоэлемент
.menu {
...
0
голосов
0
ответов
34
показа
Не видит файл с mixins_all.sass
После запуска Gulp
вот такая ошибка
Я не знаю как пофиксить. Уже раза 3 файл переписывал и вс без толку.
вот пример что содержится в файле:
// функция для перевода в rem - пример перевода padding-...
0
голосов
1
ответ
43
показа
Вызов анимации несколько раз в css @animation
Такой вопрос, есть такая разметка:
<div class="line"></div>
<div class="line1"></div>
<div class="line2"></div>
<div class="...