Вопросы с меткой [sass]
Sass (Syntactically Awesome StyleSheets) — расширение CSS, которое добавляет мощь и элегантность основному языку. Оно позволяет использовать переменные, вложенные правила, примеси, импорт и прочее, обеспечивая полностью CSS-совместимый синтаксис. Sass помогает упорядочить содержимое больших файлов, а малым обеспечивает лучшую скорость работы, частично с помощью библиотеки Compass.
461
вопрос
3
голоса
3ответа
58 показов
Тень накладывается на кнопку, а не на картинку внутри
div class="main__show-video">
<button class="main__show-video_button">
<img src="./img/play.png" alt="">
&...
0
голосов
0ответов
28 показов
Как и на чем написать свою сетку?
В общем верстают люди сайты на бустрапе удобно вроде в общем спасибо, но вот что делать если сетка макета не соответствует бутстрапу? Я знаю, что в таких случаях либо кастомизируют бутстрап, либо ...
3
голоса
1ответ
26 показов
Не работает свойство border в scss
Учусь прогать на css:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href=&...
1
голос
2ответа
39 показов
Как это реализовать для кнопки?
Не могу понять как это реализовать? outline должен оставаться none!
при клике появляется фиолетовый бордер, при отпускании кнопки мыши он растягивается и остается в таком положении
0
голосов
0ответов
11 показов
Проблемы c sass
Возникают следующие проблемы при использовании sass
При автодописывании кода в конце строки добавляется символ ";", приходится его постоянно убирать, что слегка неудобно
В sass не работает ...
0
голосов
1ответ
92 показа
Emmet Sass в VSCode
При использовании Emmet в коде Sass (в VSCode) ставит точку запятую в конце как будто это Css код. Синтаксис стоит Sass. Такое стало происходить после последнего патча, кто то знает в чем проблема?
0
голосов
0ответов
18 показов
Не запускается анимация SCSS
Пытаюсь кастомизировать Swiper слайдер. Мне нужно, чтобы активный bullet из пагинации заполнялся бэкграундом, для эффекта timeline. Типо, как в инстаграме. Но анимация не запускается
SCSS:
:global {
...
0
голосов
0ответов
15 показов
Помощь с синтаксисом Gulp
ситуация такая, изучаю немного Gulp и проблема в том что курс который я смотрю немного старый и там старый синтаксис версии 3, а сейчас 4+ уже. Я все делаю по примеру, но выскакивает ошибка в ...
0
голосов
0ответов
17 показов
Проблема с SCSS и сохранение в файле стилей
Два-три месяца назад начал работать в программе Visual Code. Как говорится только начинающий пользователь. На днях сам подключил scss и компиляцию. Также узнал, что можно создавать отдельно файлы ...
0
голосов
0ответов
25 показов
Модульные стили. Связь классов в разных компонентах
Есть проект на React.js в котором используются модульные стили.
Структура для этого примера:
разметка в column.js:
<div className={styles.column}>
<Item/>
</div>
и стили для ...
0
голосов
1ответ
24 показа
Webpack 5 проблема импорта scss
Доброго времени суток коллеги!
Имеется файл ../src/sass/style.scss, внутри которого, я использую импорты на файлы находящиеся в дочерних папках.
Выглядит содержание файла style.scss примерно так, но ...
0
голосов
1ответ
12 показов
Почему Live SASS compiler выводит style.css и style.min.css в папку sass? Хотя в настройках четко указано папка css
Получается у меня генерируется и в папку css и в папку sass. Что очень странно( А я хочу токо в одну папку.
Настройка: (по-моему все правильно)
"liveSassCompile.settings.generateMap": true,
...
0
голосов
0ответов
14 показов
Как получить props в sass
<Component width='2rem' />
-- styled-components
const Component = styled.div`
width: ${props => props.width}
`
Как в sass сделать тоже самое ?
0
голосов
1ответ
46 показов
как в каждый scss файл записать строчку @import “mixins”
В файл index.js подключается файл mixins.scss и index.scss. В mixins.scss такой код:
@mixin colorRed {
color: red;
}
в index.scss такой код:
body {
@include colorRed;
}
есть такой webpack....
0
голосов
0ответов
43 показа
Sass-компилятор не обрабатывает background: url()
Всем добрый вечер.Подскажите,поставил SASS
Но компилируются все свойства кроме Background: Url
Отказывается обрабатывать
В чем может быть проблема?
Заранее благодарю за ответ
0
голосов
2ответа
33 показа
Код одного цвета в файле sass в Visual Studio Code
Весь код одного цвета и не работает подстановка кода, например при написании tac после нажатия enter вместо text-align: center останется tac. В html и css всё работает, сам код написанный в sass ...
0
голосов
1ответ
23 показа
Адаптация страницы (проблема с картинкой)
Есть вот такая картинка, после всех манипуляций по изменению размера, фокус её сместился ровно на центр, можно ли этот фокус как-то подвинуть вверх? К примеру top 0 при уменьшении размера, есть ли что-...
0
голосов
1ответ
78 показов
не могу установить sass через npm
Не могу установить sass через Npm
Вводя npm i gulp-sass --save-dev получаю ошибку:
'node' is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
...
0
голосов
0ответов
13 показов
В редакторе VS Code при повторном запуске проекта с использованием препроцессора Sass не подключается файл стилей style.css
В проекте, написанном в редакторе VS Code используется препроцессор Sass. При самом первом
запуске проекта все работает. При повторном же запуске VS Code файл style.css не подключается.
Ссылка на ...
3
голоса
2ответа
30 показов
Как создать форму леденца на палочке, складывая блоки по кругу?
Как складывать div по кругу, при этом последний div должен располагаться ниже первого div, но выше второго последнего div. Возможно ли это с помощью CSS?
Любая помощь будет оценена.
Найдите Codepen. ...
0
голосов
0ответов
10 показов
Как сделать так, чтоб плагин Live Sass Compiler (в VS Code) игнорировал некоторые файлы, например header.scss, footer.scss и т.д
Как сделать так, чтоб плагин Live Sass Compiler (в VS Code) игнорировал некоторые файлы, например header.scss, footer.scss и т.д. Чтоб он не компелировал их в Scss
0
голосов
0ответов
16 показов
Как поставить выезжающий блок под header, и оставить его при этом кликабельным?
https://codepen.io/ithater/pen/zYKNeOv?editors=1100
const $burger = document.querySelector('.header-burger');
const $menu = document.querySelector('.header__menu');
const toggleMenu = evt => {
...
0
голосов
0ответов
32 показа
Подставить количество значений в соответствии с переменной
Здравствуйте уважаемые пользователи. Подскажите, возможно ли реализовать следующее:
Есть что-то похожее
$fr:1fr;
$value:12;
@for $i from 1 to $value {
.test-#{$i} {
asd: auto $...
0
голосов
1ответ
38 показов
Выезжающий блок
Хотел бы узнать, как сделать так, чтобы при нажатии на некую кнопку(или любой другой элемент) один из двух блоков(которые находятся внутри другого) уезжал за экран, после чего второй блок занимал бы ...
0
голосов
0ответов
28 показов
webpack не собирает css вместе с pug
Есть простая сборка проекта. css и sass перестаёт подключаться, если вместо html использую pug. В ином случае все работает но вместе с pug выдает ошибку:
css ./node_modules/css-loader/dist/cjs.js!./...
0
голосов
0ответов
9 показов
Laravel Mix (Copy Directory) Можно ли скомпилировать scss,less… в css при копировании файлов
Есть скрипт который копирует все ассеты из основной папки в паблик , но там есть scss,less файлы стилей, которые нужно скомпилировать в css и оставить в той же папке
mix.copyDirectory('public/themes/...
0
голосов
0ответов
13 показов
Как создать css-модули из scss файлов (пакет для Gulp)?
Коллеги, приветствую ) возник вопрос по сборке проекта с помощью Gulp. Используется препроцессор sass и стоит задача сделать файл со стилями css-модулями. Возможно в этой теме еще слабо разбираюсь, ...
2
голоса
1ответ
34 показа
Применить новые стили если checkbox:checked
Имеется вот такая разметка:
<div class="tickets-transplants">
<span class="tickets-transplants__text">КОЛИЧЕСТВО ПЕРЕСАДОК</span>
<label>&...
-2
голоса
1ответ
53 показа
Всем привет, помогите с установкой node-sass
https://webdesign-master.ru/blog/tools/2016-06-04-sass.html
Пошла по этому гайду и выполнила все пункты, но вылазит ошибка при выполнении gulp
Error: Node Sass does not yet support your current ...
0
голосов
0ответов
28 показов
Не выходит отзывчивая верстка
Размер psd макета 1920px, при уменьшении размера экрана к моему (1600px) кнопка ломается.
html
<!-- HEADER -->
<header class="header">
<!-- LOGO -->
<div class=&...
0
голосов
0ответов
16 показов
При запуске localhost скелет сайта прописанный в HTML отображается, а вот стили - нет
в html файле подключал css файл через команду Link. Так же тестировал связь между css и html файлами через плагин VScode "Live Server" , все работает. Пробую сам через Terminal командой gulp ...
0
голосов
0ответов
140 показов
Ошибка при установке GULP SASS
Открываю cmd, пишу
npm i --save-dev gulp gulp-sass
в ответ же получаю:
PS F:\Projects\Programming\Web\gulptest> npm i --save-dev gulp gulp-sass
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will ...
0
голосов
0ответов
57 показов
Ошибка npm i gulp-sass --save-dev
подскажите, пожалуйста, что делать. или как установить sass
E:\test>npm i gulp-sass --save-dev
npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/...
0
голосов
1ответ
82 показа
Можно ли заставить Chrome сохранять изменения в SCSS также, как он их сохраняет в CSS?
Вопрос для экспертов SASS/SCSS.
Если в Google Chrome в инструментах разработчика на вкладке Sources добавить в Filesystem папку со скриптами (рис 1), то все изменения CSS вносимые на вкладке Elements (...
0
голосов
1ответ
19 показов
Как скомпилить несколько .sass файлов с mix.sass()?
Есть такая структура папки ./src/scss/:
--> scss
----> root.scss
----> header.scss
----> body.scss
----> footer.scss
т.е. в папке scss лежат 4 .scss файла. И я пытаюсь сделать из них ...
0
голосов
1ответ
21 показ
Vuetify при подключение ломается
Только подключил vuetify к проекту и он выбивает такую ошибку
Если надо вот Git проекта
Раньше на проекте использовался materialize. Подключен в файле index.html, так как в npm 1.0.2 версии не было, ...
0
голосов
1ответ
19 показов
Как отменить создание дополнительной картинки в webpack 5?
Всем привет.
У меня такая история: взял я одну сборку webpack и начал переписывать под себя как тут выскочила но не ошибка,баг - одним словом: в новой версии webpack вместо url-loader, raw-loader и ...
0
голосов
0ответов
14 показов
Не компилируются импортируемые sass без сохранения основного файла style.sass
Стоит в VS Code расширение Live Sass Compiler, имеется основной файл style.sass и импортируемые в него файлы типа "_media.sass". Вношу изменения в импортируемых файлах sass, но чтобы ...
0
голосов
0ответов
24 показа
Как во Vue подключить стили, которие я получаю из api?
Мне нужно тянуть стили из api и подключать их в компоненте.
Я получаю с бека минифициривание стили одной огромной строкой.
Использую Vuex, передаю их в сам компонент, но как их подключить?
0
голосов
1ответ
24 показа
Ошибка при установке sass
Добавил sass все работает нормально, когда пытаюсь установить проект повторно, делаю команду npm install , выходят ошибки
npm WARN sass-loader@10.0.3 requires a peer of webpack@^4.36.0 || ^5.0.0 but ...
0
голосов
0ответов
8 показов
Stylelint .sass файлов возможен?
Использую плагины для gulp'а stylelint и stylelint-scss для литинга .scss файлов, хочется также линтить .sass файлы, но он ругается на отсутствие "{}" и ";". Можно ли его как-...
0
голосов
0ответов
6 показов
Ошибка компиляции SASS - Undefined variable
Файл main.scss выглядит так
@import "config"; //_config.scss - основные переменные и сброс стилей;
/*
* Основные стили
*/
@import "blocks"; //_blocks.scss - Сюда собираются все ...
0
голосов
0ответов
24 показа
Как настроить подсказки scss в webstorm по BEM?
подскажите пожалуйста, как настроить в scss подсказки по БЭМу, наподобие такого:
&__ и далее он бы давал подсказку дописать название класса?
0
голосов
0ответов
24 показа
Почему я получаю ошибку, когда пытаюсь подключить шрифт через @import?
Пользуюсь scss. Хочу подключить шрифт PT Sans из google fonts. На сайте получил такую ссылку:
@import url('https://fonts.googleapis.com/css2?family=PT+Sans:ital,wght@0,400;0,700;1,400&display=swap'...
0
голосов
0ответов
8 показов
Ошибка при использовании --watch. LoadError: cannot load such file
Когда команда выполняется, файл SCSS обновляется, но вместе с ошибкой перекомпиляция файла не происходит при изменении файла. Что можно попробовать?
0
голосов
0ответов
9 показов
Ошибка при использовании --watch. LoadError: cannot load such file [дубликат]
Когда команда выполняется, файл SCSS обновляется, но вместе с ошибкой перекомпиляция файла не происходит при изменении файла. Что можно попробовать?
2
голоса
1ответ
42 показа
В чем отличие миксинов от шаблоных селекторов SASS?
Подскажите правильно ли я понял, что отличие миксинов от шаблонных классов в Sass заключается только в том, что в миксин можно передать параметр. Т.е. нет необходимости использовать миксин если ты не ...
0
голосов
1ответ
48 показов
Не работает скрипт по стрельбе в canvas
var game = {
sprites: {
battleship: undefined,
enemyShip: undefined,
//Пуля
bullet: undefined
},
init: function() {
var canvas = document.getElementById('myCanvas');
...
0
голосов
0ответов
19 показов
Как выровнять заголовок по середине клетки контейнера, чтобы он при этом занимал его полностью?
Странная штука. Пытаюсь выровнять заголовок по середине контейнера, уже все перепробовал. Отключил марджин, включал паддинг и все равно фигня какая-то. Либо фон идет только строкой, а не ...
0
голосов
1ответ
18 показов
Миксина не видит переменную
Столкнулся с ошибкой: миксина не видит переменную в внешнем окружении, куда была включена.
Пример вставки миксины:
button.endBurger {
$color: rgba(247, 181, 82, $opacity-bg_conf); // переменная, ...