So I would like to define a global color in my Angular project in the styles.scss stylesheet.
I know I can defined global variables like this
:root {
--blueish: #658bc7;
}
and then in other styles(heets) reference to it
p {
color: var(--blueish);
}
But this is NOT a globally defined color. This is a globally defined variable.
We could for example do
p {
color: aliceblue;
}
and this does work since aliceblue is globally defined along with a lot more preset colors. Is there a way for me to ADD a color to this list using (S)CSS? If not, would it be possible in less or SASS?
You can assign in SCSS vars with $varName. Important note if you like to use dash or underScore in your varnames. For the SASS compiler, $var-name is the same as $var_name. You have to take that into consideration.
SCSS
$blueish: #658bc7;
p {
color: $blueish;
}
Will compile to CSS:
p {
color: #658bc7;
}
You Can Define and Assign Variables in scss/sass Like This
$blueish: #658bc7;
p {
color: $blueish;
}
Notice that in sass/scss files named "blablabla" are globally scope
while files named "_blablabla" are not globally scoped and must be imported by.
You Must Have one globally file in sass/scss for example named "style.scss" that imports all scss/sass files in it for example:
/*
This File is only for imports
*/
#import "./libraries/_variables.scss";
#import "./libraries/_mixins.scss";
#import "./layouts/_header.scss";
#import "./pages/_about.scss";
Also, you can not add "_" and ".scss" in the importing it is not necessary for your editor will understand it for Example :
#import "./libraries/variables";
#import "./libraries/mixins.scss";
#import "./layouts/_header";
They are the same as the above example!
Related
In our app.less file, we import a few variable files, and then the individual component style sheets.
app.less
#import variables.less /* Original app styles/colors */
#import corp-colors.less /* corporate color variables */
#import light-theme.less /* Theme definitions */
#import '../components/style' /* This file contains imports of every component in the app */
The variables.less file defines #link-color...
variables.less
#link-color: #1997CA;
And the light-theme.less redefines it by pulling in the corp color.
light-theme.less
body.light-theme {
#link-color: #corp-blue;
}
corp-colors.less
```less
#corp-blue: #2a60c8;
```
Finally, in my component, I digest the variable for a tab bottom border.
x-component/style.less
li {
&.is-selected {
.tab-label {
border-bottom: 3px solid #link-color;
}
}
}
As the light-theme is imported after variables, I'd expect to see the border color as #2a60c8, but am seeing the original #1997CA instead.
However, if I change the component style to use #corp-blue instead of #link-color, it shows correctly.
Am I overlooking something with import and override ordering?
LESS variables work not like CSS variables, they calculate their values on the compilation stage, not in runtime. It seems like you need to change:
body.light-theme {
#link-color: #corp-blue;
}
to:
#link-color: #corp-blue;
I don't really understand about #import and partial file
But I want to ask for a little understanding.
I have 2 files. file2.scss must use the variable from file1.scss.
File1.scss
/* file1.scss */
$color-1 : #7E3D97;
#font-face{
font-family : AngsanaNew;
src: url(/font/AngsanaNew.TTF);
}
div.test1{
background-color: #222;
}
File2.scss
/* file2.scss */
#import 'file1'
div.content{
background-color : $color-1;
}
When I compile SCSS, It generates 2 files. Which is not what I want. I want it to be
/* file1.css */
#font-face{
font-family : AngsanaNew;
src: url(/font/AngsanaNew.TTF);
}
div.test1{
background-color: #222;
}
AND
/* file2.css */
div.content{
background-color : #7E3D97;
}
Because if I want to create a file file3.css, file4.css. while there is already a file1.css style rule. I will see #font-face and div.test1 contain in file3.css, file4.css.
I don't want that. What should I do?
P.S. Sorry my english. If you edit my text to make it easy to read. I will be very grateful.
If SASS is generating the CSS it does it for every 'normal named' file.scss. To mark a file for SASS that it should not be used to generate a separate css file use an underscore _ as prefix, - i.e. _partial.scss. That files will only be used to be imported to the main scss file.
Now you can organize your project:
// POSSIBLE PROJECT STRUCURE
// variables to whole project
// --> variables only, no classes
_defaults.scss
// partial files
// --> use vairables from _default.scss
// --> or if you want/need to define variables here
// --> use variables with default-flag: '$variable: value !default'
// --> so they will/can be overwritten by same variable set BEFORE in _default.scss
_partial-structure.scss
_partial-element.scss
...
// bring them together in main file
styles.scss
#import 'defaults';
#import 'partial-structure';
#import 'partial-element';
...
Is there any way I can set my color variables depending on what class is on the html element? Or any other way to achieve this same goal?
html {
&.sunrise {
$accent: #37CCBD;
$base: #3E4653;
$flat: #eceef1;
}
&.moonlight {
$accent: #18c;
$base: #2a2a2a;
$flat: #f0f0f0;
}
}
This is basic theming. You would either want to use a mixin or include to do multiple themes in a single CSS file. This is how you would go about it using includes:
_theme.scss
section.accent {
background: $accent;
}
.foo {
border: $base;
}
.bar {
color: $flat;
}
main.scss
html {
&.sunrise {
$accent: #37CCBD;
$base: #3E4653;
$flat: #eceef1;
#import "theme";
}
&.moonlight {
$accent: #18c;
$base: #2a2a2a;
$flat: #f0f0f0;
#import "theme";
}
}
You could just as easily make a mixin that takes 3 colors as its arguments to use in place of the include:
#mixin theme($accent, $base, $flat) {
// .. do stuff ..
}
Unfortunately, Sass/Scss files need to get compiled into Css files, in order to be supported in your web-browser.
Since Css files don't support variables, you can only set a variables value in the Scss template, because the Sass compiler will replace the var. (in every position, the var. has been used), with the given value.
That means, that it does not help to change the color of the variable, depending on what class is included in the Html file, because the Css file won't contain any variables.
The only way you could do such thing, is by:
reading the Html file to find out what class has been used,
than changing the Scss template variables to the right color value
and compiling the Scss template into an Css file
If you like to use JavaScript, you can do this:
You will need an HTML element with an Id and a Class (the one that will decides, what color to use).
<exampleTagg id="Target" class="Sunrise">...</exampleTagg>
Next, you will need to add some JavaSript
var CurrentColor = document.getElementById("Target").className;
if (CurrentColor == "sunrise") {
document.exampleTagg.style.exampleProperty = "#37CCBD";
}
else if (CurrentColor == "moonlight") {
document.exampleTagg.style.exampleProperty = "#18c";
}
(the first line will declare a variable, that contains the value of our exampleTagg element (the one with the "Target" id), then the if statement will find out the name of our class (sunrise or moonlight) and last, we will change the background of our exampleTagg to the color we like to)
To use this example for your own purposes, replace the exampleTagg with some real tagg and change the exampleProperty to an valid Css property.
Notice, that you will not need Scss for this job (u can still use it), because JavaScript will access your compiled Css file.
I have three sass files: a.scss, b.scss, c.scss
a.scss:
#mixin font($size, $color){
font-size: #{$size};
color: #{$color}
}
p{
#include font(10px, blue)
}
b.scss:
#mixin font()
{
..
}
c.scss
#import a.scss
#import b.scss
I think the mixin font() in b.scss override the mixin font($size, $color) in a.scss.
p{
#include font(10px, blue) // use mixin font() in b.scss, error
}
Is it possible to create a local/private sass mixin? Or all mixins in sass are global, I have to give them unique name for each mixin?
Mixins within selectors are local to that selector just like Sass variables are. These two mixins are independent of each other:
.foo{
#mixin my_color(){
color: #ffcc00;
}
#include my_color;
}
.bar{
#mixin my_color(){
color: #00ffcc;
}
#include my_color;
}
So, to answer your final question - only mixins defined at the global level are global, and you can otherwise reuse names safely. In your example, if your a.scss, b.scss and c.scss are structured to define different overarching classes (eg .header, .main, .footer) you can have local font mixins for each.
Related: Localizing/Scoping a sass mixin.
UPDATE: Now with the new #use rule you can add private members just by starting its name with either - or _
More info here:
https://sass-lang.com/documentation/at-rules/use#private-members
You are right. Just as in a typical CSS file, your sass project is compiled top down. So a mixin sharing the same name as a previous one will overwrite it. If you wish to use the original mixin in c.scss you would have to redefine it.
Is there any way I can set my color variables depending on what class is on the html element? Or any other way to achieve this same goal?
html {
&.sunrise {
$accent: #37CCBD;
$base: #3E4653;
$flat: #eceef1;
}
&.moonlight {
$accent: #18c;
$base: #2a2a2a;
$flat: #f0f0f0;
}
}
This is basic theming. You would either want to use a mixin or include to do multiple themes in a single CSS file. This is how you would go about it using includes:
_theme.scss
section.accent {
background: $accent;
}
.foo {
border: $base;
}
.bar {
color: $flat;
}
main.scss
html {
&.sunrise {
$accent: #37CCBD;
$base: #3E4653;
$flat: #eceef1;
#import "theme";
}
&.moonlight {
$accent: #18c;
$base: #2a2a2a;
$flat: #f0f0f0;
#import "theme";
}
}
You could just as easily make a mixin that takes 3 colors as its arguments to use in place of the include:
#mixin theme($accent, $base, $flat) {
// .. do stuff ..
}
Unfortunately, Sass/Scss files need to get compiled into Css files, in order to be supported in your web-browser.
Since Css files don't support variables, you can only set a variables value in the Scss template, because the Sass compiler will replace the var. (in every position, the var. has been used), with the given value.
That means, that it does not help to change the color of the variable, depending on what class is included in the Html file, because the Css file won't contain any variables.
The only way you could do such thing, is by:
reading the Html file to find out what class has been used,
than changing the Scss template variables to the right color value
and compiling the Scss template into an Css file
If you like to use JavaScript, you can do this:
You will need an HTML element with an Id and a Class (the one that will decides, what color to use).
<exampleTagg id="Target" class="Sunrise">...</exampleTagg>
Next, you will need to add some JavaSript
var CurrentColor = document.getElementById("Target").className;
if (CurrentColor == "sunrise") {
document.exampleTagg.style.exampleProperty = "#37CCBD";
}
else if (CurrentColor == "moonlight") {
document.exampleTagg.style.exampleProperty = "#18c";
}
(the first line will declare a variable, that contains the value of our exampleTagg element (the one with the "Target" id), then the if statement will find out the name of our class (sunrise or moonlight) and last, we will change the background of our exampleTagg to the color we like to)
To use this example for your own purposes, replace the exampleTagg with some real tagg and change the exampleProperty to an valid Css property.
Notice, that you will not need Scss for this job (u can still use it), because JavaScript will access your compiled Css file.