Questions tagged [sass-variables]
14 questions
1
vote
1 answer
Dynamic inline style on vue by sass variables
Here I have code of one block into mySlide
Aleks_Andr_19
- 27
- 4
1
vote
2 answers
How to use bslib/sass to change label layout in R shiny
In the following R shiny program I use 2 labels "Enter text:" and "Enter choice:".
library(shiny)
library(bslib)
ui <- fluidPage(
theme = bs_theme(version = 5,
bootswatch = "litera",
base_font = "Arial",…
Gerben
- 61
- 3
1
vote
0 answers
How to use CSS variables in SCSS?
I use SCSS code in my Laravel 8 project with webpack. I want to handle switching dark mode and light mode and manually overwrite the browser settings too.
I search a while to find solution for this problem, and I checked this question and many more,…
netdjw
- 5,419
- 21
- 88
- 162
1
vote
1 answer
Vuetify SassError Expected identifier. .v-application .orange.#f77925{
I am trying to manage sass variables of vuetify theme, according to doc here: https://vuetifyjs.com/en/features/sass-variables/
Here is package.json
{
"scripts": {
...
},
"dependencies": {
"@vue-stripe/vue-stripe": "^4.2.5",
…
efirat
- 3,679
- 2
- 39
- 43
0
votes
0 answers
Use next imported fonts on scss variables
I'm working with Next13 and I'm having problems when I try to use Next font variable on my scss files.
This is my font declaration on app/layout.tsx:
const montserrat = Montserrat({
weight: ['400'],
style: ['normal'],
subsets: ['latin'],
…
Nuno Costa
- 21
- 4
0
votes
0 answers
How to use in a SASS file a var() in a condition?
I get a data from my HTML and I need to check if this data is inferior to 50, in my SCSS file. But I can't use my var() with a condition.
Later this data will become dynamic, that's why I decided to use variable.
HTML:
0
votes
0 answers
Global (static) number sass variable
We have an Angular application with multiple inner libraries, and some global scss files with styles and variables, which we use in all or multiple of our components's scss files.
I'm currently working on a component where I have the following scss…
Kevin Cruijssen
- 9,153
- 9
- 61
- 135
0
votes
2 answers
Can an SCSS list of variables inherit?
I have some lists of SCSS variables which are used in mixins, can I create a 'master' list which the others inherit?
$vars: (
main-colour-active: #0b8579,
text: #424242,
button-text: $white,
font-family: $font-family-base,
);
$nav: (
…
0
votes
2 answers
SCSS file use of image / url() won't appear in page styles
Two weeks ago I converted all my css to scss files. Everything except the use of a background image is working. I have been researching solutions to no avail because it seems that similar questions have all gone unanswered for several years.
Ideally…
JMM
- 13
- 6
0
votes
0 answers
Changing scss variables in React
so i've got some colors as variables in my scss file
$primary_background: #1E1E1E;
$primary_button: #F2F2F2;
$primary_sharp: #171717;
$primary_button_active: #9D9D9D;
$primary_sharp_active: #2D2D2D;
$bluish_background: #0C002D;
$bluish_button:…
Svygzhryr
- 13
- 3
0
votes
1 answer
Inline scss variable as the name part in the evaluation of another scss variable
Suppose I have the following scss variables:
$until-xs: "(max-width: 377px)";
$until-sm: "(max-width: 640px)";
...
$until-xl: "(max-width: 4000px)";
And based on them the following helper css classes are constructed:
.until-sm {
display: none;
…
Vee6
- 1,527
- 3
- 21
- 40
0
votes
1 answer
Sass compiling and adding spaces between variables
I have some Sass code: margin-top: -($height+40)#{$unit};
that compiles and outputs "-140 vh" and not "-140vh". It's basically adding a space. I think I am using some old code. What should I do instead?
kurrle
- 59
- 1
- 8
0
votes
1 answer
Import file based on condition - scss
I have a site that has 2 themes and I am trying to setup my config based on the theme, which currently is set as the body ID.
Am I able to import file in based on this condition? Something like this:
#theme1 {
@import…
Mr.K
- 67
- 6
0
votes
1 answer
Bootstrap SASS - overriding theme colors
I'm using the Bootstrap 4.6 SASS files, and overriding some of the default values. I'm following the instructions here where it shows an example:
// Required
@import "../node_modules/bootstrap/scss/functions";
@import…
Gary McGill
- 26,400
- 25
- 118
- 202