Популярные вопросы по тегу 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 ...