The root of my problem is using CSS4 variables with css functions that is overridden by SASS mixins.
SASS overrides rgb and rgba to help with passing hex to them, for instance. Problem is I am using the new CSS4 spec which allows for variables.
What I want to do is:
background-color: rgba(var(--theme-color, 0.5)
Now this would work fine if SASS hadn't taken over and expect a different input.
So is it possible to override this mixin somehow, so I just get it output as a normal css value?
Thanks to Justinas who led me in the right direction on this question.
Although it could be argued that this is a duplicate of
Named CSS grid lines with SCSS, I still want to share the solution that is more spesific to what I tried to solve.
Here is a codepen of a rather ok solution: https://codepen.io/anon/pen/LydWMd
Basically just creating a mixin that either overrides(as pointed out, not necessarely what you want unless you know you will never use the built-in sass functionality in your project) or an addition:
#function native-rgba($string, $opacity) {
#return #{"rgba(#{$string}, #{$opacity})"};
}
Related
I am gonna use css global variables in scss file so that I can change the button colour in any time.
I want to do like this:
:root {
--button-color: #FF0000;
}
$button-color: var(--button-color);
...
But this makes the issue now.
SASS variables are compile time and final value depends on all files were #import in line. CSS variables are run-time and are calculated based on cascade(say if any parent element redeclares variable - it will be applied to children).
Also take a look into docs section on difference between
You can use css-vars to compile SASS variables into CSS custom properties. But you still cannot use CSS custom properties in SASS code, say, to calculate some value - since CSS property is not initialized yet.
Even with css-vars plugins, things are rather messy, because SASS files does not describe how component tree looks like finally so we cannot see cascade.
TL;DR; don't mix SASS variables and CSS custom properties. Use first for compile-time variables/calculation only and use latest one for run-time/cascade-based styling. Probably prefer using CSS custom properties only.
So, let's say I have a SASS module _module.scss that declares some css variables aka custom properties. When I now load this module in another SASS styleshee, let's call it main.scss, I have access to all SASS-variables, mixins and also rules, but not the custom properties inside of it? Am I missing something?
Example files:
//_module.scss
:root {
--some-variable: red;
}
// main.scss
#use 'module';
div {
background-color: var(module.--some-variable); // won't work, private property because of leading '-'
background-color: module.var(--some-variable); // won't work, would have been horrible syntax as well
}
I could use #import but that is discouraged and deprecated (see SASS Documentation). I've tried including the variables in a pure css file module.css, which compiled but didn't declare any custom properties at runtime as it directly translates the #use 'module' from my SASS file to the exact same in CSS - which browsers don't understand obviously. It should just more or less copy the content of a pure css file but it doesn't. Sure, I could try writing mixins in my modules that set the variables but that's just a workaround.
Am I missing something? Do I really need to write a mixin, that sets the variables and needs to be loaded? This makes the use of custom properties within modules pretty cumbersome.
EDIT
Forgot to mention, that background-color: var(--some-variable) doesn't work either even though it should according to the documentation, since rules should just be applied directly without scoping.
Ugh. The issue is most definitely the fact that my VS Code extension uses LibSass and not Dart Sass. Therefore #use is not yet supported in most environments. The documentation should most definitely be more explicit about this especially when warning about the use of #import.
Since I know it works with #import the issue is resolved though I'd love to see the module system being included in LibSass as well.
tl;dr
Do no use #use if you're not absolutely certain that you use Dart Sass!
I'm using SASS as my CSS preprocessor.
I would like to use a feature that is not available in SASS - for example, I want to create a function that accepts a reference to an image and will return its width in pixels.
Something like this:
get-image-width('src/images/logo.png')
And the same for the image height.
This is just an example. Obviously it can't be done with CSS, so I'm looking for a way to extend SASS and add functionality.
P.S.
I know that Compass supports this feature, but I don't want to use Compass as it's not supported anymore.
Does anyone knows if this is achievable?
I think the short answer is no, there isn't an easy way.
If you find a module/plugin that works with your current Sass compilation workflow, you could theoretically be able to get the pixel dimensions of an image source and then use certain values somewhere before compiling the final CSS file.
For example, if you are using Gulp, there's the image-size package that returns the width/height dimensions. So in a custom Gulp function, you could read the contents of the Sass file, get the dimensions for the image sources you need, use them in whatever context you need, and finally compile the stylesheet.
(Probably no single answer can tell the whole truth regarding your question, so think of this as an extended comment.)
I'm working on a react component-based web application and am looking for any strategies for avoiding z-index issues.
Traditionally I've always grouped my indexes using shared SCSS variables, but with fully encapsulated js components this is a bit tricky.
There are different ways of doing this depending on how your project is set up. Do you use sass/sass-files in your build step or are you using a css in js solution (styled-components, emotion, etc.) for this?
If you use sass you can still use your shared variables. Just make sure to expose those variables to your component's scss file by importing the file that holds the scss variable declaration.
If you use css-in-js then the library that you're using probably has a solution for exactly this. You can also go for a more or less custom solution like this guy did: https://fatfisz.com/blog/solving-z-index-with-styled-components
If you use vanilla css you can always use css custom properties and add your z-index layers:
:root {
--overlay-layer: 2;
--sidebar-layer: 3;
--modal-layer: 4;
}
these are just a couople of pointers to how one could fix the issue. Wihtout more context it is difficult to have a more specific answer.
The question pretty much says it all.
For instance, if I were using, say, Twitter Bootstrap, could I define classes in my own SASS stylesheet that inherit from Bootstrap's CSS classes? Or does inheritance in SASS only work within the scope of a single file?
YES! its possible.
If you want all <button> elements to inherit the .btn class from Twitter Bootstrap's Default buttons
In your styles.scss file you would have to first import _bootstrap.scss:
#import "_bootstrap.scss";
Then below the import:
button { #extend .btn; }
**I might be mistaken, but if I get what you're trying to do, can't you just use the #extend .classname; command inside the element that you'd want to extend? Naturally, you should only modify your own code to preserve updatability.
To my knowledge, you have to use #import of the file containing the classes you want to use into your SASS file in order to utilize them in that file. However, I am not a SASS/SCSS expert, so someone may know of another way to remotely use them that I am not aware of.
Just as the accepted answer has shown this is possible with #import, however #import has been deprecated by sass
The Sass team discourages the continued use of the #import rule. Sass will gradually phase it out over the next few years, and eventually remove it from the language entirely. Prefer the #use rule instead.
The #use rule is better suited for use now, since it does not pollute the scope of the importing (user) module. unfortunately at the time of writing the use rule is only implemented in Dart sass.