I want to define and use css variables in sass. My solution is wrong. Why?
:root {
--color-main: #79abbc;
}
$primary: #{var(--color-main)};
Related
I am just wondering can I define primary color in App.css and then use it in component css files?
For example:
App.css
:root {
--primary-color: blue;
}
And then use it in component
Nav.css
background-color: --primary-color
Yes, as long as the file where you defined the variable is imported in the child or the parent component. I think it would even work if any of the rendered component is using that file but i am not sure about that one.
I want to remove pb-x and pm-x classes from there:
<div class="my-title pb-4 pm-4"> ... </div>
and include them to my-title defined in my scss that imports bootsrap's functions, variables, mixins:
Something like:
.my-title{
#include pb-4;
#include mb-4;
}
But the problem is that there are no such mixins (BS publish some classes as mixins but not this time).
Spacings pb-x pm-x are created there: https://github.com/twbs/bootstrap/blob/master/scss/utilities/_spacing.scss
And it looks like I need to access $spacers array and reference 4th element? How can I do this?
Since $spacers was conveniently defined in bs _variables.css I've found that my goal can be achieved using:
.my-title {
// ...
padding-bottom: map-get($spacers, 3); // .pb-3
margin-bottom: map-get($spacers, 4); // .pm-4
}
Additionally custom mixins (pb-3) or placeholders (%pb-3) classes could be created using this way. I like to extend bs with missing classes that publish theirs variables (e.g. input color is missed) but this time I stay with simple map-get($spacers, 3)
Did you try #extend ? Not sure if the below code serves your purpose.
.my-title{
#extend .pb-4;
#extend .pm-4;
}
How have you imported bootstrap in the scss file where you define .my-title ?
Suppose you define .my-title in index.scss file.
You can then import bootstrap at the top of index.scss file using
#import "path/to/bootstrap.css";
If including .css file do not work, try renaming bootstrap.css to bootstrap.scss. This will surely work. Now you can ommit the .scss extension from import, if you want.
#import "path/to/bootstrap";
You need to use #extend instead of #import. There is no pm-4 class in Bootstrap. Did you mean mb-4?
.my-title{
#extend .pb-4;
#extend .mb-4;
}
https://www.codeply.com/go/4jpl7TRudJ
I have created an angular component MyComponent that has a sass and the theme file.
mycomponent.component.scss
#import "../styles/common";
#import 'mycomponent.theme';
.element {
color:$primary
}
in the common.scss, I have imported other files likes variables.scss that contain $primary with predefined or default colour and other theme variables.
and in the mycomponent.theme.scss, I defined the #mixin to update the primary variable
#mixin mycomponent-theme() {
$primary: green ;
}
Now the theme file that creates the final theme.css call this #mixin
#include mycomponent-theme();
but the element class's color is not getting updated to the green color as mixin is updating the $primary variable.
Am I making any mistake? Or what is the other way to achieve this?
Update
Here is the codepen https://codepen.io/ermarkar/pen/wygwYp?page=1&
Your issue has to do with scoping.
The $primary variable that you set to the value green in the mixin mycomponent-theme() is a local variable, therefore, it is only visible to the code that is inside that mixin.
Even though it has the same name as another global variable (I assume it is global), they are different variables.
When you wrote:
.element {
color:$primary
}
Sass used the global variable called $primary, whose value your mixin did not change, the mixin created a local variable with the same name.
There is a very good resource that I recommend you to read that helps understand variable scoping in Sass, much better than I can explain here.
UPDATE:
One thing you could do that I just thought of, is use !global. This keyword lets you manipulate variables in the global scope from within function or mixin blocks.
In your case, if you change your mixin to this:
#mixin mycomponent-theme() {
$primary: green !global;
}
Then the mycomponent-theme() mixin will change the global $primary variable.
I want to define CSS variables like in Sass.
Something like:
.someClass {
background-image: $imageLink;
color: $someColor;
}
And i Want to define $imageLink and $someColor in my class or in json file.
Can i do this without Sass or Less? (Or without css variables, because it does not supported in IE.)
I an using angular2 and webpack in my project.
Of course you cannot set SASS variables at run-time, because by that time the SASS has already been compiled.
A classic approach is to instead think in terms of "themes", and select a theme by a class on a higher-level element (such as body). So you could have
.darktheme .someClass { color: white; }
.lighttheme .someClass { color: black; }
Now from your JS you can change the theme with
document.body.classList.add('darktheme');
In my style.less I'd like to define, that all elements with the class .element nested within an element of the class .group have the same properties of the bootstrap-class .col-sm-6.
Unfortunately I can't directly add the class .col-sm-6 to the elements.
In that project, bootstrap is available in the folder tapestry5/bootstrap/css/bootstrap-darkly.css releative to my style.less. (How) Can I also use CSS-classes as mixins within my style.css? I tried:
#import (reference) "tapestry5/bootstrap/css/bootstrap-darkly.css";
.group .element {
.col-sm-6;
}
Unformtunately I get a Less4J Exception:
Could not find mixin named ".col-sm-6". - line 4 - position 3
Is it impossible to use CSS as mixins, or is something wrong with my syntax?
If you change the css file you have available to less file ending and import it (as all CSS is valid LESS). The less compiler will be able to find and use .col-sm-6 as a mixin.
#import (reference) "tapestry5/bootstrap/css/bootstrap-darkly.less";
.group .element {
.col-sm-6;
}
If you're going to be using the Bootstrap LESS, you may as well make use of their mixins instead of their CSS. As seven-phases-max suggested in his comment, you can use make-*-column instead of using the CSS classes.
You'd do this instead:
.group .element {
.make-sm-column(6);
}