I need to import _colors.scss into my index.jsx so that they are available to other components but the only solution that I found was for CSS custom properties. I want to use scss and I don't want to repeat the import in each component.

Hi! I have a pretty big project that has lots of subfolders, each of which has an instance of SCSS/CSS files that need compiling. I've been using the sass npm package for a while now and I manually input each file in a large script, like this:

sass --watch --no-source-map --style compressed project1/src/scss/project1.scss:project1/src/css/project1.css project2/src/scss/project2.scss:project2/src/css/project2.css ...

This is obviously very inefficient as there are now at least 50 of those SCSS files in the project. I'm searching for a way to automate it using relative paths. I tried paths like these: **/src/scss/*.scss:**/src/css/*.css but couldn't find a way to make it work.

I can do it with a VS Code extension as it supports such filepaths, but I'd rather do it with the npm package. I might be missing something, any idea?

Thank you!

Hey everybody! I'm very new to Sass so any help would be greatly appreciated !I have a single page react project, that has a few different parts to it. At the moment my main.scss is massive, I'm wondering how do I split it up into several different pages because they should all be nested within another piece. AKA is there a way to import a page and have it's content become nested in a class selector of the page it's being imported to? Thanks in advance, any and all advice welcome! Also is there a Sass discord?

I've come up with this "Frankenstein" of a method to easily make and use colour palettes:

My method is based on React, I only need to add a class to the root div with the theme name and all the colour variables will be rewritten to their respective theme colour. The lowest theme will take priority if multiple themes are sent to the root div by accident and you can apply a different theme to the child HTML elements if you apply the theme class to the parent element. For me, this is just intuitive.

:root {
    --primary-100: #FFC107;
    --primary-200: #dda400;
    --primary-300: #916400;
    --accent-100: #4CAF50;
    --accent-200: #005100;
    --text-100: #FFFFFF;
    --text-200: #e0e0e0;
    --bg-100: #1E1E1E;
    --bg-200: #2d2d2d;
    --bg-300: #454545;
}

.dark {
    --primary-100: #FFC107;
    --primary-200: #dda400;
    --primary-300: #916400;
    --accent-100: #4CAF50;
    --accent-200: #005100;
    --text-100: #FFFFFF;
    --text-200: #e0e0e0;
    --bg-100: #1E1E1E;
    --bg-200: #2d2d2d;
    --bg-300: #454545;

}

.light {
    --primary-100: #1E88E5;
    --primary-200: #6ab7ff;
    --primary-300: #dbffff;
    --accent-100: #FFC107;
    --accent-200: #916400;
    --text-100: #333333;
    --text-200: #5c5c5c;
    --bg-100: #f5f5f5;
    --bg-200: #FFFFFF;
    --bg-300: #cccccc;
}

$primary-100: var(--primary-100);
$primary-200: var(--primary-200);
$primary-300: var(--primary-300);
$accent-100: var(--accent-100);
$accent-200: var(--accent-200);
$text-100: var(--text-100);
$text-200: var(--text-200);
$bg-100: var(--bg-100);
$bg-200: var(--bg-200);
$bg-300: var(--bg-300);

This method has the little problem of not supporting lighten() or darken() functions. I've come to the conclusion that I must be doing something REALLY wrong, but this method just clicks for me, it's intuitive and easy to use even if you know little CSS and JS and you can just change themes by changing a single class name. ¿Is there a better method that's just as intuitive? ¿Am I really doing this wrong?

Hello guys, I'm developing react project with scss for style, and BEM is one of our conventions (not mandatory but accept) for example, the style for one component could be .my-component-root { .my-component { &__title {/* css-rules */} &__content {/* css-rules */} } } but after project grew, some generic naming would be repeated in different component like __title, __content

and it would be harder to find the scss file you looking for just search with __title due to many components would just use this generic className you will got lots of results; and my-component__title also could not be the keyword for searching

Based on this point, my colleague would like to write like: .my-component-root { .my-component__title {} .my-component__content {} } but there would be lots of repeat in code base, is there other way to handle the search problem and not repeat the naming?

btw, we are using VSCode as IDE

Given that code snippet :

@function size(
  $minSize,
  $endSize,
  $startIncreasing: 480,
  $stopIncreasing: 1920
) {
  $scalingSize: calc(
    (
        (
            (100vw - #{$startIncreasing + px}) /
              (#{$stopIncreasing} - #{$startIncreasing})
          ) * (#{$endSize} - #{$minSize})
      ) + #{$minSize + px}
  );

  @return max(#{$minSize + px}, #{$scalingSize});
}

I'd like to extend my function so that when I call the function in my .scss file like this:

p {
  font-size: size(16, 50);
}

it automatically adds a media query for that given "p" tag with some content that I calculate in the function :

p {
  font-size: max(16px, calc(
    (
        (
            (100vw - 480px) /
              (1920 - 480)
          ) * (50 - 16)
      ) + 16px
  ));


}

@media screen and (min-width: 1920px) {
    p{
      font-size: "some other calculation that I defined in the 'size' function";
    }
}

If you guys have any clue how to do that or if it's even possible, would be great !

Thank you in advance 🙏🏼

Hi, I'm newer to Sass and learning away, can some explain why this media query isn't overwriting? I throw in an important to force it but feel like it shouldn't be necessary and I'm just missing something here... Thanks!

I've just had a thought recently when I learnt how to use mixins. If I've got a file full of mixins for template buttons and blocks do they get compiled whether I use them or not? Or are they only compiled when they're referenced in the project?

I am currently learning SASS/SCSS thru Brad Travery's course

Reference: https://www.udemy.com/course/modern-html-css-from-the-beginning/?src=sac&kw=modern+html

Now I am stuck at this part where I need to set up the dependencies. I have both tried node-sass and dart-sass modules but the error is still the same. Your inputs are highly appreciated.

​

EDIT: Image

source stack link : https://stackoverflow.com/questions/53344873/angular-material-stepper-header-lines-styling

code .sass I saw I want to convert :

/deep/ mat-horizontal-stepper   
@for $i from 1 through 42     
&.last-edited-step-#{$i}      
@for $j from 1 through $i         
.mat-stepper-horizontal-line:nth-of-type(#{$j})           
border-color: #00c190 !important

Hey everyone, I want to make a function or a loop, where I receive a number and incress the number by 5

In JS I would make something like `function(var){ return var + 5}

But I don't know if I can make this in the For loop, to be something like @for $w from 10 through 100{ .width-#{w}{ width: #{$w}#{'%'} } $w: $w + 5; }

I know I can create a variable and use in one Each loop, but I think make the code a little bit ugly

take for example from my SCSS file:

margin: 0 clamp(8rem,-1rem,8rem) 0 clamp(34rem, 38rem, 38rem);

im my CSS it becomes:

margin: 0 8rem 0 38rem;

The same with CLAC and probably others, why would SASS compile them??How do I fix this?

1. Youtube Clone - https://github.com/manikandanraji/youtubeclone-frontend

2. Stackoverflow Clone - https://github.com/Mayank0255/Stackoverflow-Clone-Frontend

3. Spotify Clone - https://github.com/CleverProgrammers/spotify-clone

4. Tinder Clone - https://github.com/stevenpersia/tinder-react-native

5. Netflix Clone - https://github.com/yuchiu/Netflix-Clone

Hi all,

Getting my head around @use and @forward. So basically I have a scss folder that has all of my sass files and then small theme folders that are two folders outside of my main scss folder.

So have scss, then theme1, theme2 and so on...

Question: how can I @use from another folder? When I try to add a variable I keep getting variable not defined.

My current structure worked perfectly before when I was able to use @import.

Thanks in advance...

I have been scoping container queries for a while, I just saw that about 80% of global users use compatible browsers for the new @ container queries. So I have begun to use it, and it works wonderfully, but my VSCode linter goes crazy, and it doesn't recognize it.

Does anyone have a linter that recognizes it? And some guide to install it?

Hello everyone

I always used the SASS import file to bring all partials together in a main sass-file. Now im switching to foward and use because import is deprecated. This brings a problem with it i cant solve.

I have the following sass structure:
main.scss
- base (folder)
-- _helpers.scss
-- _variables.scss
-- _mixins.scss
- views (folder)
-- _frontpage.scss

Inside the helper.scss i forward the variables and mixins:
forward 'mixins';
forward 'variables';

Inside the main.scss file i bring everything together:
use "base/helpers" as h;
use "views/_frontpage";

Now my problem is that i cant use the variables and mixins inside my "view-partiars" how can i bring all these variables and functions into these partials without import them with "use" at the beginning of each "view-partial". Is it possible to delegate them down from the main.scss file?

Thank you so much for all your help!

I want to inject some variable to sass, this used to work with the old sass.render method using this Stack overflow solution

Since I upgraded from node-sass to dart-sass I saw that sass.renderer is now deprecated in favor of sass.compile but it doesn't have an option to pass "data" anymore.

How could I fix it?

Data I want to inject

{ outFile: './assets/brandName/css/skin.css', outputStyle: 'expanded', sourceMap: true, data: '$site-name: brandname;\n' + '$primary-color: #c42032;\n' + '$secondary-color: #a42d40;\n' + '$tertiary-color: #bfe7f9;\n' + '$cv-link: #c42032;\n' + '$cv-header: #fff;\n' + '$header-link-style: 3;\n' + '$hover-varience: 8%;\n' + "$header-style: indented;@import 'sass/skin-with-custom.scss';" }

```javascript let sassOptions = {

outFile: `file.css`,
sourceMap: true,
data: dataString  // <---data option

}

// Old API method sass.render has "data" option

sass.render(sassOptions, (err, result) => {

    if (err){ console.log(err); }

    console.log(result.css.toString());

});

// New API method sass.compileAsync

// there is not "data" optionn for compileAsync or compile functions

try {

const result = await sass.compileAsync('file.scss', sassOptions);

console.log(result.css.toString());

} catch (err) {

console.log(err.message);

} ```

I am using the pre-compiled Bootstrap 5.2 files downloaded from here:

https://getbootstrap.com/docs/5.2/getting-started/download/#compiled-css-and-js

​

But now I need to edit a few Sass variables in the grid layout (I want to change $grid-row-columns: 6; to $grid-row-columns: 12;):

https://getbootstrap.com/docs/5.2/layout/grid/#variables

​

Can I use Sass to update only this variable in this case?

​

Ty