I want to have a basic HSL color value which I want to implement as a gradient as follows:
:root {
--hue: 201;
--saturation: 31;
--lightness: 40;
--mainColor: hsl(var(--hue),var(--saturation),var(--lightness));
--difference: 20; /* 0 + --difference < --lightness < 100 - --difference */
--lightnessPlus: calc(var(--lightness) + var(--difference));
--colorFrom: hsl(var(--hue),var(--saturation),var(--lightnessPlus));
--lightnessMinus: calc(var(--lightness) - var(--difference));
--colorTo: hsl(var(--hue),var(--saturation),var(--lightnessMinus));
}
[...]
.class {
background-image: linear-gradient(to right, var(--colorFrom), var(--colorTo));
}
The above code produces a transparent object and I fail to comprehend why, please help!
You are missing percentages. the syntax should be hsl(h, s%, l%) (https://www.w3.org/TR/css-color-3/)
:root {
--hue: 201;
--saturation: 31%; /* here */
--lightness: 40;
--mainColor: hsl(var(--hue),var(--saturation),var(--lightness));
--difference: 20;
--lightnessPlus: calc((var(--lightness) + var(--difference))*1%); /* here */
--colorFrom: hsl(var(--hue),var(--saturation),var(--lightnessPlus));
--lightnessMinus: calc((var(--lightness) - var(--difference))*1%); /* here */
--colorTo: hsl(var(--hue),var(--saturation),var(--lightnessMinus));
}
body {
background-image: linear-gradient(to right, var(--colorFrom), var(--colorTo));
}
Or
:root {
--hue: 201;
--saturation: 31%; /* here */
--lightness: 40%; /* here */
--mainColor: hsl(var(--hue),var(--saturation),var(--lightness));
--difference: 20%; /* here */
--lightnessPlus: calc(var(--lightness) + var(--difference));
--colorFrom: hsl(var(--hue),var(--saturation),var(--lightnessPlus));
--lightnessMinus: calc(var(--lightness) - var(--difference));
--colorTo: hsl(var(--hue),var(--saturation),var(--lightnessMinus));
}
body {
background-image: linear-gradient(to right, var(--colorFrom), var(--colorTo));
}
Related
I am trying to assign block-level css variables with values taken from sass. But the following line color: hsl(3, 75%, var(--main-color-l)); will not output any result. I am using a static site generator with scss pipes. Any reasons why?
.reveal .palette1 {
--main-color-h: $red-h;
--main-color-s: $red-s;
--main-color-l: $red-l;
--main-color-o: $red-o;
h2 {
/**/color: hsl(3, 75%, var(--main-color-l));/**/
}
h4 {
color: hsla($red-h, $red-s, $red-l * 1.3, $red-o);
}
}
This is working for me:
$red-h: 235;
$red-s: 100%;
$red-l: 50%;
$red-o: .5;
:root {
--main-color-h: #{$red-h};
--main-color-s: #{$red-s};
--main-color-l: #{$red-l};
--main-color-o: #{$red-o};
}
h2 {
color: hsl(3, 75%, var(--main-color-l));
}
h4 {
color: hsla($red-h, $red-s, $red-l, $red-o);
}
With this HTML code:
<div class="pie-wrapper pie-wrapper--solid progress" style="--percent: 50; --color: red;"></div>
I wan't to use var(--percent) value as #mixin #include call in a scss file:
#mixin draw-progress--solid($progress, $color) {
background: linear-gradient(to right, $bg-color 50%, $color 50%);
&:before {
#if $progress <= 50 {
background: $bg-color;
transform: rotate((100 - (50 - $progress)) / 100 * 360deg * -1);
} #else {
background: $color;
transform: rotate((100 - $progress) / 100 * 360deg);
}
}
}
.progress {
#include draw-progress--solid(#{var(--percent)}, #8e44ad);
}
Tested and not working:
#include draw-progress--solid(#{var(--percent)}, #8e44ad);
#include draw-progress--solid(var(--percent), #8e44ad);
Thanks :)
I have some blocks with different background-colors (which are set in variables) and if a user hovers one of them, the color shall light/fade a bit.
Therefore I use this one:
.block1:hover,.block2:hover{
background-color:lighten($color1,40%);
}
But this just fades one static color - $color1 - to 40%. How would I do that, if .block1 had $color1 and .block2 had $color2 as background colors set? So the result should be
.block1:hover{
background-color:lighten($color1,40%);
}
.block2:hover{
background-color:lighten($color2,40%);
}
What do I need to use therefore?
Use a mixin, like so:
.block1 {
.backgroundsetup($color1);
}
.block2 {
.backgroundsetup($color2);
}
.backgroundsetup($color, $amt: 40%) {
background-color: $color;
&:hover {
background-color: lighten($color, $amt);
}
}
There's no special way to write the CSS you have in your example in SCSS, that would be the way you do it. But if you want to optimize and write less code, then you could take advantage of SASS' hashmaps and the foreach loop to do this for you.
SASS
$color1: #4e9bac;
$color2: #248cff;
$color3: #3b5998;
$blocks: (
block1: $color1,
block2: $color2,
block3: $color3,
);
#each $block, $color in $blocks {
.#{$block} {
background-color: $color;
&:hover {
background-color: lighten($color, 40%);
}
}
}
CSS Output
.block1 {
background-color: #4e9bac;
}
.block1:hover {
background-color: #d8eaee;
}
.block2 {
background-color: #248cff;
}
.block2:hover {
background-color: #f0f7ff;
}
.block3 {
background-color: #3b5998;
}
.block3:hover {
background-color: #bbc8e4;
}
//call the mixin
.mixin-loop(grey, 7);
//the implementation
.mixin-loop(#str, #count) {
.loop (#i) when (#i > 0) {
.#{str}-#{i} {
div { background: "#{#{str}-#{i}}"; }
}
.loop(#i - 1);
}
.loop (#count);
}
//globals.less
#grey-1: #ccc;
#grey-2: #999;
The output I want is this:
//output
.grey-1 div {
background: #ccc;
}
.grey-2 div {
background: #999;
}
But what I'm getting is this:
.#808080-1 div {
background: "#{#808080-1}";
}
.#808080-2 div {
background: "#{#808080-2}";
}
You can use variable interpolation (~) to help with this:
http://lesscss.org/features/#variables-feature-variable-interpolation
This will prevent grey from being converted into it's hex value, and then will allow "#{#{str}-#{i}}" to be displayed as a hex value instead of a string.
//call the mixin
.mixin-loop(~"grey", 2);
//the implementation
.mixin-loop(#str, #count) {
.loop (#i) when (#i > 0) {
.#{str}-#{i} {
div { background: ~"#{#{str}-#{i}}"; }
}
.loop(#i - 1);
}
.loop (#count);
}
//globals.less
#grey-1: #ccc;
#grey-2: #999;
This question already has answers here:
Sass 3.3.7 - dynamically create list of icons
(4 answers)
Closed 8 years ago.
I have about 600 lines of code that repeats itself to set the background position of an image sprite to display a bunch of images.
#foo-label {
background-position: (1 * -96) + px 0;
&:hover {
background-position: (1 * -96) + px -192px;
}
}
#bar-label {
background-position: (2 * -96) + px 0;
&:hover {
background-position: (2 * -96) + px -192px;
}
}
...
Is it possible using SASS to use something like the :nth-child selector to determine the index of the selected element and set its background position as a multiple of that index? Such as;
#images-parent label:nth-child(index) {
background-position: (index * -96) + px 0;
&:hover {
background-position: (index * -96) + px -192px;
}
}
I just read about mixins, which will cut the code in less than half since I can now do this;
#mixin img-position($index) {
background-position: ($index * -96) + px -96px;
&:hover {
background-position: ($index * -96) + px -96px;
}
}
#foo-label {
#include img-position(1);
}
I still need to set this for each individual label though, so still wondering if there's a better solution.
This is what my solution looks like using mixins. 600+ lines of code down to 90.
$unchecked: 0;
$checked: -96;
$hover: -192;
#mixin img-position($index, $state) {
background-position: ($index * -96) + px $state + px;
&:hover {
background-position: ($index * -96) + px ($hover - $state) + px;
}
}
input[type=checkbox],
input[type=radio] {
&.img-checkbox {
position:absolute;
left:-3000px;
&.checked + #bars-label { #include img-position(0, $checked); }
&.checked + #event_spaces-label { #include img-position(1, $checked); }
&.checked + #night_clubs-label { #include img-position(2, $checked); }
+ label {
background-image:url('img.jpg');
height: 96px;
width: 96px;
display: inline-block;
padding: 0 0 0 0px;
cursor:pointer;
&#bars-label { #include img-position(0, $unchecked); }
&#event_spaces-label { #include img-position(1, $unchecked); }
&#night_clubs-label { #include img-position(2, $unchecked); }
}
}
}
If anyone has any improvements or feedback please let me know!