Популярные вопросы по тегу SASS

В чем разница между SCSS и Sass?

... менных и математики. В чем разница с 1 SCSS? Это должен быть один и то ...

Загрузчик Webpack sass не распознает файл глобальных переменных

... @import './vars'; В 3 другом файле js у меня есть: require('./some-module-sass-file'); //some-module-sass-file.scss .container { width: $base-container; } Проблема 2 в том, что у меня глобальные переменные 1 в файле vars, а some-modul ...

Типография Angular Material установлена ​​неправильно

... казывает, что 25 у нас есть 3 способа использовать типографику 24 в приложении: // Override typography CSS classes (e.g., mat-h1, mat-display-1, mat-typography, etc.). @include mat-base-typography($custom-typography); // Override typography for a specific Angular ...

Компас и Сасс мертвы?

... понял, что код, который он генерирует, не 12 включает -ms- и -o-. Вот почему я хотел бы 11 попросить профессионалов дать советы и информацию, которую 10 я не могу найти здесь, в Stack, и в Интернете. Компас 9 мертв? Если да, то что мне использовать 8 вместо него? (чтобы быть уверенным, что 7 он добавит -ms-, -o- и ...

sass смотрит несколько каталогов

... сценария оболочки? У меня есть 5 следующий сценарий оболочки: sass --style compressed --watch branches/mysite/assets/css/sass:branches/mysite/assets/css & sass --style compressed --watch branches/mysit ...

Написание цикла, который увеличивается на значение, отличное от 1, в Sass

... 1 through 100 { //stuff } Это даст 1, 2, 3, 4 3 ... вплоть до 100. Как сделать так, чтобы 2 петля проходила с интервалом в две единицы? @for $i fro ...

Переключить темы в угловом материале 5

... рет на себя "styles": [ "styles.scss", "custom-theme.scss", "light-custom-theme.scss" ], У меня есть 9 следующий код в одном из моих компонентов 8 для обработки переключаемых тем toggleTheme(): void { if (this.overlay.classList.contains("custom-theme")) { this.overlay.classList.remove("custom-theme"); this.ov ...

Импортировать файл scss с помощью Storybook

... }, module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, include: __dirname }, { test: /\.scss$/, use: [ {loader: "style-loader"}, {loader: "css-loader"}, {loader: "sass-loader", options: { includePaths: [__dirname] } }] }, У ...

Vue.js: недопустимые параметры в vue.config.js: "плагины" не разрешены

... это в vue.config.js: plugins: [ new StylelintPlugin({ files: '**/*.s?(a|c)ss' }) ], И когда 3 я запускаю сервер, я получаю следующее: Invalid options in vue.config.js: "plugins" is not allowed Я 2 искал везде, но ничего не нашел. Любая помощь 1 будет принята с благодарностью. Вот vue.config.js: const StylelintPlugin = require('stylelint-webpack-plugin') module.exports = { plugins: [ new Styleli ...

Целевые компоненты стиля первого ребенка css

... ponent return( <div> <p>I am just regular text</p> <p>Me too</p> <Text>Hello Joe</Text> // this should have the margin bottom <Text>Goodbye</Tex ...

Создание миксина Sass с необязательными аргументами

... такой миксин: @mixin box-shadow($top, $left, $blur, $color, $inset:"") { -webkit-box-shadow: $top $left $blur $color $inset; -moz-box-shadow: $top $left $blur $color $inset; box-shadow: $top $left $blur $color $inset; } При вызове я действительно 4 хочу, чтобы если не было передано значение 3 $inset, ничего не выводилось, а не компилирова ...

Не удается установить переменную SCSS в переменную CSS?

... --color: $color-black; } Когда он компилируется 9 с помощью node-sass версии 4.7.2, он создает следующий 8 CSS: body { --color: #000000; } Когда я компилирую тот же SCSS с версией 7 4.8.3 или выше, он дает следующее: body { --color: $color-black; } Что мне не хватает? Я провери ...

Как написать переменную с несколькими свойствами css в Sass

... 00; $border-radius: -webkit-border-radius:25px; -moz-border-radius:25px; border-radius:25px; h5 { font-size: 12px; padding: 20px ...

Измените файл на месте (тот же адрес назначения), используя Gulp.js и шаблон подстановки

... og(fileLocation); })) .pipe(gulp.dest(fileLocation)); }); Судя по выводам console.log(fileLocation), этот код должен 6 работать нормально. Однако полученные файлы 5 CSS, похоже, помещены на один каталог выше, чем 4 я ожидал. Там, где это должно быть project/sass/partials, результирующий 3 путь к файлу будет просто project/partials. Если есть более 2 простой способ сделать это, я определ ...

SassError: не удается найти таблицу стилей для импорта. @ использовать '~ @ angular / material' как mat;

... ser", "options": { "baseHref" : "/app/", "deployUrl": "/app/", "outputPath": "dist/myapp", "index": "src/index.html", "main": "src/main.ts", ...

Переход на стилизованные компоненты с глобальными переменными SASS в React

... ылаться на переменные SCSS? Следующее 1 не работает: import React from 'react'; import styled from 'styled-components'; const Button = styled.button` background-color: $color-blue; `; e ...

Как использовать модули Sass и CSS с приложением create-react-app?

... , SideDrawer, Backdrop</div> <main className={classes.Content}> {props.children} </main> </Aux> ); export default layout; Это 2 мой SCSS: .Content { margin-top: 72px; color:red; } Я не знаю почему, ...

Новичок в sass, ожидается ожидаемый селектор

... $margin / 2 border-color: $blue Но теперь 3 в моем приложении rails я получаю эту ошибку: Invalid CSS after "$margin": expected selector or at-rule, was ": 16px" Что 2 не так? Теперь я кое-что попробовал с zurb: .your-class-name { @include button; @include dropdown ...

Как включить @mixin из одного файла sass в другой файл sass в другой папке.

... erve получил ошибку. Ошибка: "Ошибка 7 Sass Недействительный CSS после "@include": ожидаемый 6 идентификатор, был '"../../../theme/mai'" Код: из 5 файла, куда я импортирую миксин action-sheet-layout-1 { @include '../../../theme/main.scss' @include "settingAnimationHeader"; >>> this is imported mixin define in main.scss [button-action-shit] { z-index: 99999; right: 16px; top: 56px; ... } Код микси ...

Вложение имени тега в стиль класса в SCSS

... a class="class-name" href="#">World!</a> Я пробовал два разных способа в 2 SCSS, используя & родительский селектор # successfully transpiled but no change .class-name { font-size: 40px; &a { color: #ff6666; } } # Got an error trying to transpile .class-n ...

Как использовать абсолютный путь для импорта пользовательского scss при использовании react + webpack?

... зовать общий миксин. Допустим, я 7 создаю MyAdminButton и хочу импортировать 6 scss-файл, который касается всех кнопок 5 проекта. (Это пользовательский scss, а не 4 поставщик / внешний). Это будет выглядеть 3 так: //this actually works but it is a code smell : wh ...

Карта исходников gulp sass

... навливать модуль 3 gulp-sourcemaps в gulpfile.js, но я не мог знать успеха 2 привязать sourcemaps.write как gulp.task. Любая помощь приветствуется 1 :) var gulp = require('gulp'); var sass = require('gulp-sass'); var sourcemaps = require('gulp-sourcemaps'); var bs = require('browser-sync').create(); gulp.task('browser-sync', ['sass'], function() { bs.init({ server: { ba ...

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

... Я хочу заменить панель 8 навигации Bootstrap <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> с <nav class="header__navbar" role="navigation"> Я знаю, что могу использовать 7 jQuery для процедурной обработки, но я бы 6 предпочел этого не делать. Я пробовал несколько 5 подходов с использованием имен переменных, синтаксиса 4 интерполяции # {}, миксинов, @ext ...

Можно ли включить родительские свойства в расширенный класс Sass?

... й результат, просто 5 ссылаясь на класс-модификатор в разметке? <div class="container-featured"> <!-- has margin, background, and border styles via just modifier class --> </div> Я 4 пробовал использовать для этого миксины, но все 3 очень быстро становится подробным и повторяющимся: @mixins container { margin: 10%; background: #eee; } .container { @include container; &-featured { @include container; ...

Глобальные переменные scss для компонентов Angular без их постоянного импорта

... все же эти 10 переменные доступны не для каждого отдельного 9 компонента. Есть ли способ создать глобальный 8 файл, содержащий все переменные SCSS для 7 остальных моих компонентов? Поскольку писать 6 @import в каждом файле .scss каждого отдельного компонента, это 5 о ...

Проблема с node-sass и Docker

... " depends_on: - db Когда я запускаю 5 docker-compose up, я все равно получаю следующую 4 ошибку: web_1 | [nodemon] 1.11.0 web_1 | [nodemon] to restart at any time, enter `rs` web_1 | [nodemon] watching: *.* web_1 | [nodemon] starting `node ./bin/www` web_1 | /my_app/node_modules/node-sass/lib/binding.js:15 web_1 | ...

Кнопка Material UI удалить рамку фокуса

... Но 2 это не сработает, если я установлю его в 1 класс .focusframe: @import "~bootstrap/scss/bootstrap"; @import "_colors.scss"; body { background-color: $body-color-base; color: $body-color-font; ...

Как добавить компиляцию Sass в Angular CLI 6: angular.json?

... мой проект уже создан, и работа сделана. Новый 14 файл конфигурации, который создается с помощью 13 нового интерфейса командной строки Angular, теперь 12 называется angular.json, а не angular-cli.json. Схема для файла также 11 другая, с новыми свойствами. В старом angular-cli.json есть 10 раздел, в котором вы можете установить stylExt так, "defaults": { "styleExt": "scss" } но 9 я не уверен, где именно э ...

Установка переменной на @mixin в Sass?

... t($positionX $positionY, $from $from-percent, $to $to-percent); background: #{$type}-gradient($positionX $positionY, $from $from-percent, $to $to-percent); } $navBg: @include bg-gradient(#eee, radial, top, center, #999, 0%, #555, 100%); body { $navBg; } // ...

Sass / Compass - преобразование шестнадцатеричного, RGB или именованного цвета в RGBA

... енял 1 прозрачность: @include set-alpha( red, 0.5 ); //prints rgba(255, 0, 0, 0.5); @include set-alpha( #ff0000, 0.5 ); //prints rgba(255, 0, 0, 0.5); @include set-alpha( rgb(255,0,0), 0.5 ); //pr ...

Использование переменных Sass с медиа-запросами CSS3

... енный 8 выше код создает макет размером 1160 пикселей 7 независимо от ширины экрана. Если я переверну 6 операторы @media следующим образом: @media screen and (min-width: 1171px) {$base_width: 1160px;} @media screen and (max-width: 1170px) {$base_width: 960px;} Он создает 5 макет размером 960 пикселей, опять же независимо 4 от ширины экрана. Также обратите внимание, что 3 е ...

Sass - В чем разница между map-get и простой переменной?

... #009CDC, ); Затем 7 вы используете его в своем классе следующим 6 образом: .my-class { color: map-get($colors, dark); } А другой способ - использовать: $color-black: #000000; Тогда 5 вы используете это так: .my-class { color: $color-black; } У меня вопрос: какой 4 вариант лучше? или функция map-get имеет другое 3 назначение? Есть ли в Sass шаблон для этого 2 или это зависит от каждого веб-разработчи ...

Как установить синтаксис scss в Sublime 3?

... CTRL + Shift + P и 4 набираю sass или scss, у меня нет выбора. Мне пришлось 3 установить синтаксис в CSS. Есть ли способ 2 установить ...

Нет такого файла или каталога - getcwd

... Раньше 7 приложение работало. Я считаю, что проблема 6 связана с тем, что я добавил SASS в свое 5 приложение, но я не уверен. В моем config.ru у меня 4 есть следующий код, связанный с SASS ...

Переменные SCSS как класс @extend

... color: white; border: 1px solid darken($button-color, 20%); &:hover { @include transition; background-color: darken($button-color, 10%); } } @mixin input($type) { margin-bottom: 1.5em; margin-left: 0; outline: none; @extend $type; ...

Что означает! Default в значении свойства css?

... default? ОБНОВЛЕНИЕ Плохо, что я не пояснил. Я использую часть 1 SASS в Boot ...

Стили ClassName не работают в React

... ;Hello</h1> </div> ) } } export default Temp При этой настройке мои стили не передаются, однако, если 4 это сработает, если я заменю помеченную 3 звездочкой строку на <div className='testStyle'>, поэтому кажется, что 2 стили импортируются правильно. Может кто-нибудь 1 п ...

Как скомпилировать или преобразовать sass / scss в css с помощью node-sass (без Ruby)?

... новить libsass? использовать его из командной строки? использовать его с исполнителями задач, такими как gulp и grunt? У 2 ...

Sass: печать на терминал

... соб заставить Sass распечатат ...

Использование Storybook / vue с SCSS

... ack setup. ERR! ReferenceError: path is not defined ERR! at Object.webpackFinal (/Users/dcaine/Documents/webdev/test/scss-loader-example/.storybook/main.js:13:16) ERR! at accumulationPromise.then.newConfig (/Users/dcaine/Documents/webdev/test/scss-loader-example/node_modules/@storybook/core/dist/server/presets.js:261:72) ERR! at <anonymous> ERR! { ReferenceError: path is not defined ERR! at Object.webpackFinal ( ...

Замените Node-Sass на Dart-Sass в приложении Create React v3.x

... н node-sass, и 6 я пытаюсь заменить его на dart-sass, но испытываю 5 трудности, потому что вывод ошибки CRA сообщает 4 мне, что мне нужно установить node-sass. Есть ли 3 способ сообщить базовой конфигурации CRA 2 о ...

Как разобрать файлы .css как PostCSS в vscode?

... о ничего не помогло. Если 8 я изменю расширение на .scss, оно будет работать 7 нормально, но я не использую SASS. Что мне 6 делать, чтобы удалить ошибки синтаксического 5 анализа в файлах .css? Обновление: Пример файла с расширением 4 PostCSS: вы видите плохую окраску и отсутствие 3 выделенных ошибок Если я изменю расширение 2 файла на .scss: Обновление 2: Я пробовал использовать этот 1 плагин, ...

Node + React - имена классов CSS с переносом через дефис

... едомление»), я 8 могу использовать его без каких-либо проблем, но 7 я не могу понять, как использовать классы 6 css с дефисом: render() { return ( <div className={s.header-inner}> </div> ); } Это, очевидно, вызывает ошибку: 'inner 5 is undefined'. Я изменил header-inner на header_inner и то же самое 4 в моем компоненте, и он работает нормально, но 3 я не могу этого сд ...

Ионный изменить шрифт по умолчанию

... ты по ссылкам 6 ниже. Я хочу изменить шрифт по умолчанию, не 5 добавляя его в каждый CSS. Что я пробовал: Изменение файла .tff, .eot, .woff, .svg напрямую для объединения моих шрифтов и ионных значков. Пытался реализовать шрифт, указав его в файлах html и css (он работает, но я хочу, чтобы он был по умолчанию) Замените www / lib / ionic / fonts шрифтом open-sans (ионные ...

Bootstrap 4 Изменить точки останова

... d-breakpoints: ( // Extra small screen / phone xs: 0, // Small screen / phone sm: 576px, // Medium screen / tablet md: 768px, // Large screen / desktop lg: 992px, // Extra large screen / wide desktop xl: 1280px ); $container-max-widths: ( sm: 540px, md: 720px, lg: 960px, xl: 1220px ); Однако глобально с точкой 3 останова для xl ничего не изменилось, вместо 2 этого она ...

Стиль ориентации коробки webkit исчезает из стиля

... дующий 5 код CSS в Sass. .ellipsis { -webkit-box-orient: vertical; display: block; display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis; } По какой-то причине линия 4 ориентации прямоугольника просто удаляется 3 из стиля транспилем, в результате ...

Что делает includePaths в Gulp?

... /dist/styles')); }); gulp.task('default', function () { gulp.start('styles'); }); Затем в основном файле 5 .scss я помещаю импорты: @import "bourbon"; @import "base/base"; @import "neat"; Эта задача выполняется 4 правильно. Что меня озадачивает, так это 3 то, что именно делает includePaths? На основе приведенного 2 выше примера может кто-нибудь объяснить 1 мне, какова роль includePath? ...

Какие файлы игнорировать при использовании SASS с Git и как?

... t, где 5 у меня есть несколько папок .sass-cache. Например, я 4 мог бы это /project/-/-/one/.sass-cache И это /project/-/-/two/.sass-cache И это /project/three/.sass-cache И я хочу добавить все 3 в .gitignore. Я пробовал это: # Sass # ########### *.sass-c ...

Проблема с доступом к переменным scss в реагирующих компонентах

... /_variables.scss'; import _variables from '../scss/_variables.scss'; здесь 5 _variables.scss - имя файла, содержащего // variables.scss $white-color: #fcf5ed; :export { whitecolor: $white-color; } Я 4 ломаю голову, чтобы получить переменную 3 whitecolor, доступную в компоненте реакции. Также 2 я использую ...

Показывать кнопку только при наведении

... 00%); /* Chrome 19+ & Safari 6+ */ -o-transition:.5s; -ms-transition:.5s; -moz-transition:.5s; -webkit-transition:.5s; transition:.5s; } img:hover { filter: none; -webkit-filter: grayscale(0%); .button:hover { display: inline-block; } } } ПРИМЕЧАНИЕ. Я 2 ...