Описание тега scss-mixins

Миксины позволяют вам определять стили, которые можно повторно использовать в вашей таблице стилей.
0 ответов

Повторяемые занятия в Ангуляр 6

Когда я делаю пакет классов, я использую mixins и% классы, как это в vars: @mixin margin($value) { margin-top: $value; margin-bottom: $value; &-top { margin-top: $value; } &-bottom { margin-bottom: $value; } } %margin-none { @include margin(…
04 сен '18 в 11:34
0 ответов

SCSS Mixin не загружается в подкомпонент React

Я пытаюсь применить стили к этому компоненту: import React from "react"; export class HeaderItem extends React.Component { render() { return <li className="navLiBtn">{this.props.name}</li>; } } Который является подкомпонентом этого компо…
15 дек '18 в 11:49
1 ответ

Значения переменных в зависимости от класса

Почему я не могу изменить переменную scss в зависимости от класса? Я хочу, чтобы переменная была зеленой, когда в классе темный режим. Css: $test: red; @mixin darkTheme { $test: green; } .theme-dark { @include darkTheme(); .test { background-color: …
01 ноя '18 в 21:44
2 ответа

Sass @each и @if/else фрагмент кода mixin?

Я очень новичок в Sass, и я пытаюсь получить CSS, как это; .heading-lg { font-size: 11.2rem;} .heading-md { font-size: 11.2rem;} .heading-sm { font-size: 11.2rem;} А вот и мой код SCSS. Но все классы heading-xx получают 11.2rem. Может кто-нибудь, по…
16 сен '18 в 22:20
0 ответов

Bootstrap - SCSS - получить сеточные переменные сетки

В файле Bootstraps variables.scss есть некоторые системные значения сетки в переменной, выглядящие так: // Grid breakpoints // // Define the minimum dimensions at which your layout will change, // adapting to different screen sizes, for use in media…
20 ноя '18 в 15:18
2 ответа

Вызов смешанного файла SCSS с использованием Javascript

У меня три файла .. icons.scss -> смешанный код .. main.scss -> здесь я вызываю миксин, используя значок @include (имя) .. main.js Все до сих пор работает отлично, как и ожидалось. Но что если я захочу изменить значение name в mixin из файла JS? Мы …
18 июл '18 в 08:37
2 ответа

Невозможно вернуть все имена ключей моей карты SCSS, используя функцию

У меня есть цветная карта, и мне нужно вернуть только ключи этой карты, используя функцию. Но я могу вернуть только первое ключевое имя. Я попытался взять все названия ключей: цвет сечения, цвет дерева, цвет заголовка таблицы, цвет ячейки таблицы. Н…
21 дек '18 в 19:55
1 ответ

Примените динамический цвет и непрозрачность, используя scss и javascript

У меня есть требование, когда пользователь может изменить тему, установив свои собственные цвета из выпадающего списка. На основе этого цвета я, как разработчик, буду применять разные оттенки ко всем разделам, как показано ниже. Скажем, если пользов…
06 фев '19 в 05:38
0 ответов

SCSS: как использовать внешние каркасные переменные /mixins и классы @extend без дублирования кода?

При создании файла CSS из SASS, как лучше всего ссылаться на внешние библиотеки (и дублировать код), не импортируя их? Например Мне нужно сгенерировать 3 CSS-файла: -framework.css (например, Bootstrap) -vendors.css (например, FontAwesome) -specific-…
15 фев '19 в 14:29
1 ответ

Ionic 4 изменить размер и цвет кнопки вопросов

Я использую следующий код, чтобы позволить мне изменить цвет кнопки, когда я нажимаю кнопку. Работает нормально. Но когда я пытаюсь добавить CSS, чтобы изменить ширину и высоту кнопок. Изменение цвета работало, но размер кнопки не изменился. Вот мой…
14 фев '19 в 23:28
1 ответ

Использовать переменную SASS @each внутри вложенного миксина

Я хочу использовать встроенный в Sass метод @each, чтобы сократить этот код: .svg-circle-full { @include mixinSVG(( 'svg': $svgvar-icn-circle-full, 'isWide': false )...); } .svg-circle-empty { @include mixinSVG(( 'svg': $svgvar-icn-circle-empty, 'is…
19 фев '19 в 23:32
1 ответ

Установить динамические переменные в SCSS с помощью npm

У меня нет большого опыта работы с npm и SCSS, поэтому у меня следующий вопрос: У меня есть один файл SCSS (app.scss), в котором есть много мест, которые я использую один цвет по умолчанию для фона. Моя идея состоит в том, чтобы иметь переменную $ b…
06 дек '18 в 21:36
1 ответ

Как отделить возвращаемые значения функции scss

У меня две карты SCSS $my-map-1 а также $my-map-2, Каждая карта имеет ключи с шестнадцатеричным значением. Я написал функцию для возврата ключа и шестнадцатеричных значений ($key, $value) каждой карты отдельно. После этого я написал @if условие с мо…
22 дек '18 в 09:44
1 ответ

Может ли цикл SCSS @each содержать несколько карт?

Я пытаюсь создать цикл SCSS @each, который вызывает цвет из одной карты и непрозрачность из другой карты. Я обнаружил, что это можно сделать с помощью списков переменных, однако можно ли это сделать с помощью карт? Пример кода: $colors: ( red: red, …
19 фев '19 в 16:17
0 ответов

Получить значение высоты элемента класса - SCSS

Кто -нибудь поможет мне решить мою проблему, мне нужно значение высоты элементов класса, которые включают эту функцию. Мой код: @mixin height-screen-content() { $this: &; height: calc( 100% - #{$this->height} ); } Как я могу получить значение…
17 дек '18 в 04:25
0 ответов

SCSS Margin-top Не работает, если внутри вложенного класса

Я работаю над прототипом, который оформлен с использованием SCSS, По какой-то причине, когда я ставлю margin-top: 0; на родительский элемент он не вступает в силу. Когда я ставлю margin-top внутри вложенных классов это работает. Может кто-нибудь объ…
11 сен '18 в 17:14
1 ответ

Ionic 4: Как импортировать миксины глобально, не импортируя их в определенные файлы?

Я обновляюсь до Ionic 4. Как я могу импортировать миксины глобально, и мне нужно импортировать файл в каждый sass, который использует миксин? Я пробовал редактировать angular.json, global.scss а также variables.scss но не повезло. Стоит добавить имп…
20 авг '18 в 17:40
1 ответ

Как создать псевдонимы Sass mixin с поддержкой блоков контента?

Как определить несколько имен для одного и того же миксина с поддержкой блоков контента? Определение @mixin desktop-breakpoint { @media only screen and (min-width: 769px) { @content; } } @mixin large-breakpoint { @include desktop-breakpoint; } испол…
26 апр '18 в 08:44
0 ответов

Пользовательские файлы SCSS не работают на Bigcommerce Stencil

Я импортировал пользовательские файлы SCSS в theme.scss, но файлы все еще не работают в theme.scss: @import "mixins"; Это должно импортировать мой пользовательский scss-файл с именем: _mixins.scss, который находится в том же каталоге theme.scss, но …
13 окт '18 в 21:12
1 ответ

Динамически создавать глобальные переменные внутри mixin?

Я хотел бы генерировать "цветовые веса" на основе базовых цветов. @include generateColors(#518ef3, 'color-brand-1'); И это создаст следующие переменные: $color-brand-1: #518ef3; //base $color-brand-1-300: lighten(#518ef3, 20%); $color-brand-1-400: l…
19 мар '18 в 00:04