HTML & CSS How to extract colours from SCSS file

[meetdilip]

I would like to have the colours from this SCSS file.

bootstrap/scss/_variables.scss at main · twbs/bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web. - twbs/bootstrap

github.com

Is there any method so that I can actually have the hex codes as we see in here

 

[Malcolm]

I would like to have the colours from this SCSS file.

bootstrap/scss/_variables.scss at main · twbs/bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web. - twbs/bootstrap

github.com

Is there any method so that I can actually have the hex codes as we see in here

Hi @meetdilip,

Do you have Photoshop or affinity?

 

[meetdilip]

Yes, I have. Why ?

 

[Malcolm]

Are you familiar with this tool?


Using this tool will give you the HEX code.

 

[meetdilip]

Yes. I am aware of it. But picking colours from an image is less accurate. Since we have the _variables.scss and the whole source library, it will be better if I can compile _variable.scss into CSS. Sadly, when I compile it after adding missing mixins, I get a blank file.

I just need to compile one file, that's all.

Thanks for your tip though.

 

[Malcolm]

Yes. I am aware of it. But picking colours from an image is less accurate. Since we have the _variables.scss and the whole source library, it will be better if I can compile _variable.scss into CSS. Sadly, when I compile it after adding missing mixins, I get a blank file.

I just need to compile one file, that's all.

Thanks for your tip though.

Ahh okay, sorry I couldn't be of help.

@Ghost any idea?

 

[meetdilip]

I have done this before. _variables.scss need 2 mixins added to it. And when we compile, it will be through. It worked in the previous version. But this time, it is not giving proper output, only plain file. Thanks.

 

[Malcolm]

I have done this before. _variables.scss need 2 mixins added to it. And when we compile, it will be through. It worked in the previous version. But this time, it is not giving proper output, only plain file. Thanks.

Yeah, I'm getting the same message and plain file.

 

[meetdilip]

I hope I will be able to fix it here.

 

[meetdilip]

Dug it out from an old file pack. We need an output file which imports from _variables.scss .

 

[Malcolm]

Dug it out from an old file pack. We need an output file which imports from _variables.scss .

What file was it and so you figured it out?

 

[meetdilip]

You need an output file, any name. Say yoda.scss. Then import _variables.scss to it and call the classes to it. ie,

.blue { background: $blue; }

Now when you process the SCSS file, there will be a yoda.css which has the hex code for $blue in it.

 

[Malcolm]

You need an output file, any name. Say yoda.scss. Then import _variables.scss to it and call the classes to it. ie,

.blue { background: $blue; }

Now when you process the SCSS file, there will be a yoda.css which has the hex code for $blue in it.

And by importing how is this done with .css? Is it like #include _variables.scss?

 

[meetdilip]

@import "variables";

as the first line in yoda.scss

 

[Malcolm]

@import "variables";

as the first line in yoda.scss

So I add this at the top of my yoda.css file?, Does the scss file have to be in same folder?

 

[meetdilip]

Yes. Both _variables.scss and yoda.scss should be in the same folder. That is how I did. It is possible that there are other methods.

 

[Malcolm]

Yes. Both _variables.scss and yoda.scss should be in the same folder. That is how I did. It is possible that there are other methods.

Can you please show a code example and explanation of how you found it so it can be marked as solution? It will help many others who have the same problem