Do you know any possibility to combine a heaxadecimal css variable with an alpha value to create a simple "shine through effect"?
e.g. as css variable:
--my-color-red: #ff0000;
Now we want in our scss implementation to add this alpha value as a background and following code snippet doesn't work:
background: rgba(var(--my-color-red), 0.5);
Without a css variable it works:
background: rgba(#ff0000, 0.5);
I think maybe the problem is that sass do the rgba implementation at compile time and the css variable is added at runtime afterwards.
Do you know any solution to solve this problem?
You could use a Sass function which converts hexadecimal to RGB:
#function hexToRGB($hex) {
#return red($hex), green($hex), blue($hex);
}
Then store another version of your CSS variable as RGB:
--my-color-red: #ff0000;
--my-color-red-rgb: #{hexToRGB(#ff0000)};
This will give you the RGB values which you can then tack the alpha value onto within the rgba function:
rgba(var(--my-color-red-rgb), 0.5)
Taken from this article.
Related
We know the advantages of using CSS4 variables but what if we need to get these values from a SASS function like so?:
:root {
--gap-l: toRem(10);
}
toRem is a Sass function that I call to get the sizes dynamically:
$fontSize: 16;
#function toRem($val) {
#return $val / $fontSize * 1.6 + 0rem;
}
This won't fail but won't work either. To have this working we can just have the value directly on --gap-l or keep using SASS vars.
If I try something like --gap-l: #{toRem(10)}; this is the error I get:
It doesn't call the SASS function
You can definitely do that: what you're missing is simply using string interpolation, i.e.:
:root {
--gap-l: #{toRem(10)};
}
The reason is highlighted in their "breaking changes" documentation with regards to CSS variables:
To provide maximum compatibility with plain CSS, more recent versions of Sass require SassScript expressions in custom property values to be written within interpolation. Interpolation will also work for older Sass versions, and so is recommended for all stylesheets.
Try this --gap-l: #{toRem(10)};, the #{} syntax is called interpolation. In the experience of heading bugs myself, when you want to use a SASS expression's raw value along with normal CSS, if you can't use the concise syntax like just toRem(10), try adding interpolation to see if it works.
Another example:
$padding: 5px;
.element {
width: calc(100% - $padding); // will not work, it must be:
width: calc(100% - #{$padding});
}
Here is the code with the updated question: https://jsfiddle.net/bcw763en/.
Notice that if you put :root above the #function, it'll not work.
In my LESS file, I have this:
:root{
--base-color: red;
}
In my project --base-color may change "on the fly" from a user input so every instance of red may become for example green.
The problem is I have some LESS functions for applying tint, shadow or saturations so I'm trying to do something like this:
.tint{
color: tint(var(--base-color), 80%);
}
But I receive this error:
Error: error evaluating function tint: color2.toHSL is not a
function
Obviously I can't store --base-color in a less variables because I would lose the instance of the variable, so color: tint(#base-color, 80%) is not an acceptable answer.
Is there a way to keep the instance of --base-color in my css minified field?
Thanks.
We have a LESS based stylesheet for which we would like to generate multiple color variations. We have defined an include file which contains the color variations (for now blue.less) and would like to generate and use green and red variations of this include file.
What we would like to do is to somehow parametrize less via the command line to include one of these specific color files. Does anybody know how this can be done?
Put the color definitions into variables in a separate file, eg. blue.less:
#baseColor: #0000ff; // blue
#accentColor: #00ffff; // yellow?
then create a separate theme file, eg. theme.less, where you define how the base color should be changed to achieve your theme:
#link-color: #baseColor;
#link-hover-color: darken(#link-color, 15%);
#panel-header-highlight-color: darken(#accentColor, 15%);
...
then in a third file, e.g. layout.less, you define
a {
color: #link-color;
&:hover {
color: #link-hover-color;
}
}
...
finally, create your blue-master.less:
#import "blue.less";
#import "theme.less";
#import "layout.less";
To create a red-master.less you should only need to write a color file and change one line in the above.
You can call the color-file color.less, and e.g. have a blue/color.less and a red/color.less, and use the --include-path=.. parameter to lessc to make it generate different files based on command line parameters, but I would advise against it (it becomes much more arduous to work with in my experience).
I have been using SASS for a month, love it.
However, when I create a variable such as:
$darkgrey:rgb(82,81,83);
Then decide re-use the variables, say in a specific p tag? In the body:
body{
p.ahh-whatever{
color:$darkgrey;
}
}
However it always seems to come up as a HEX in all browsers. Is there a reason for this? Do I need to use RGBA with 1 Opacity...
Software Being Used:
I also use Foundation 3 inline with Compass-Style. In addition to CodeKit to compile my code, and Sublime Text 2 for my editor. Operating System is OSX 10.8 (New IMac 27").
Any help would be great!
SASS will output hex whenever possible, because almost all browsers will understand it.
(Not all browsers will "get" RGB values or RGBA values.)
if you do specify a an rgba value, SASS will output it as such
for instance :
rgba(blue, 0.2)
will output :
rgba(0, 0, 255, 0.2)
see : Sass RGBA instances documentation
I have been searching in Google etc., but I couldnt find what I was looking for (I hope I didnt overlook something).. So I thought my best bet is to ask you guys :)
I am playing around with LESS-JS for the first time and I really like it. However I have a little problem now.
I am using the #arguments variable like this:
.basicBorder(#width:1px, #type:solid, #color:#black){
border:#arguments;
}
Which works as expected. Now when I want the border to be red, I am adding this to the element in my css:
.basicBorder(1px, solid, #red);
Which also works as expected. However I would like to avoid writing 1px, solid,, since these are my default values already, but when I try this:
.basicBorder(#red);
Or this:
.basicBorder(,,#red);
It doesnt work.
So I was wondering if any1 knows how I could "skip" the first 2 variables so that I can just input the color in case I dont want the border-width and type to be changed.
I hope you get what I am trying to say!
Regards!
You actually can name later parameters and skip the first ones. The syntax for your question is:
.basicBorder(#color:#red);
You can also use normal ordered arguments at the beginning and pluck out named arguments from the rest of the parameters:
.basicBorder(2px, #color:#red);
This sets #width to 2px, #type to the default, and #color to #red. Really nice if you have more seldom used arguments.
The parametric mixins in LESS works sorta like javascript functions, you can't skip the first parameters. So if you want to only change the color, you could rewrite the mixin like this:
.basicBorder(#color:#black, #width:1px, #type:solid){
border:#width #type #color;
}
Then you'd be able to call it like this:
.basicBorder(#red);
.basicBorder(#red, 2px, dotted);
edit
Using your original mixin, you could also create these
.basicBorderType(#type) {
.basicBorder(1px, #type, #black);
}
.basicBorderColor(#color) {
.basicBorder(1px, solid, #color);
}
Now you could overwrite any of the styles:
.basicBorderType(dotted); //1px dotted black;
.basicBorderColor(#red); //1px solid red;
.basicBorder(2px); //2px solid black;
A bit of a hack, but it's the only thing I can think of to help you out...