I'm trying to assign different colors to similar items using an SCSS #for loop. Can I append the $i variable used in the #for loop to $color-?
<div>
<h1>Hello</h1>
<h1>World</h1>
<h1>Goodbye</h1>
</div>
$color-1: red;
$color-2: blue;
$color-3: yellow;
#for $i from 1 to 3 {
div>h1:nth-child(#{$i}) {
color: $color-{$i};
}
}
I don't know about dynamic variable names, but the standard way to achieve what you want is SCSS lists, over which you can iterate.
$colors-list: red blue yellow;
#each $current-color in $colors-list {
$i: index($colors-list, $current-color);
div>h1:nth-child(#{$i}) {
color: $current-color;
}
}
which compiles to
div > h1:nth-child(1) {
color: red;
}
div > h1:nth-child(2) {
color: blue;
}
div > h1:nth-child(3) {
color: yellow;
}
Related
What I'm looking to achieve is each child having a diffrent color than the previous one (result would be gradient-like) by multiplying the color value with the child index.
Pseudo-code:
.parent > div:nth-child() {
background-color: rgb(index * 10, 255, 255);
}
As one of the solutions, you can assign values directly from JavaScript. But if you really want to manage this through CSS, then you can force the elements to set indexes using JS and CSS Variables and using calc() the necessary calculations in CSS rules.
Example below:
document.querySelectorAll('.parent > div').forEach((el, index) => el.style.setProperty('--custom-index', index));
.parent > div {
height: 50px;
width: calc(30px + 50px * (var(--custom-index) * 0.5));
margin-top: 5px;
background-color: rgb(calc(var(--custom-index) * 10), calc(var(--custom-index) * 40), calc(var(--custom-index) * 50));
}
<div class="parent">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
But if you delete or add elements, then in this case you will need to re-run the script provided in the JS example to recalculate.
NOTE: This answer does NOT use basic CSS, but rather shows an example of using a SASS #for loop to avoid handwriting each rule. If OP does not have GULP or another way to compile the SASS/SCSS, there are online compilers such as SassMeister or using CodePen, changing the settings on the CSS box to add a preprocessor:
And then viewing the compiled CSS:
#for $i from 1 to 12 {
.parent > div:nth-child( #{$i}) {
background-color: rgb($i * 20, 255, 255);
}
}
You can enter the total number of children as the last value (the 12 in this example. This will output:
.parent > div:nth-child(1) {
background-color: #14ffff;
}
.parent > div:nth-child(2) {
background-color: #28ffff;
}
.parent > div:nth-child(3) {
background-color: #3cffff;
}
.parent > div:nth-child(4) {
background-color: #50ffff;
}
.parent > div:nth-child(5) {
background-color: #64ffff;
}
.parent > div:nth-child(6) {
background-color: #78ffff;
}
.parent > div:nth-child(7) {
background-color: #8cffff;
}
.parent > div:nth-child(8) {
background-color: #a0ffff;
}
.parent > div:nth-child(9) {
background-color: #b4ffff;
}
.parent > div:nth-child(10) {
background-color: #c8ffff;
}
.parent > div:nth-child(11) {
background-color: #dcffff;
}
I am trying to define global colors, and I wrote a scss compiler to compile all color to its respective class names, But when I try to use them in my html div, the color is not applying to it.
scss snippet:
$blue-1: #001233;
$blue-2: #002132;
$blue-3: #004237;
$blue-4: #003027;
$blue-5: #CCCCCC;
$blue-6: #FFFFFF;
$allcolors:$blue-1 $blue-2 $blue-3 $blue-4 $blue-5 $blue-6;
#each $color in $allcolors {
.color-#{nth($color, 1)} {
color: nth($color, 1);
}
}
I am calling this in my html div as
<div class="color-#CCCCCC">TEST</div>
I don't see my style applied & when I tried compiling it, I can see my css style compiled as shown below
.color-#001233 {
color: #001233;
}
.color-#002132 {
color: #002132;
}
.color-#004237 {
color: #004237;
}
.color-#003027 {
color: #003027;
}
.color-#CCCCCC {
color: #CCCCCC;
}
.color-#FFFFFF {
color: #FFFFFF;
}
any help would be appreciated.
You need to escape the # in your CSS file since it's a special character used for ID selector.
.color-\#CCCCCC {
color: #CCCCCC;
}
<div class="color-#CCCCCC">TEST</div>
you can adjust your SCSS accordingly to add \
$blue-1: #001233;
$blue-2: #002132;
$blue-3: #004237;
$blue-4: #003027;
$blue-5: #CCCCCC;
$blue-6: #FFFFFF;
$allcolors:$blue-1 $blue-2 $blue-3 $blue-4 $blue-5 $blue-6;
#each $color in $allcolors {
.color-#{unquote("\\" + $color)} {
color: $color;
}
}
I want generate flexible color classes for another class like this without writing all of them on LESS as variables:
.link.color-green{
color:green;
}
.link.color-red{
color:red;
}
.link.color-cccccc{
color:#cccccc;
}
.link.color-FFF8DC{
color:#FFF8DC;
}
maybe something like this? but compiler say error:
NameError: variable #colorNameOrHexaCode is undefined
.link{
.color-#{colorNameOrHexaCode} {
color: rgb(#colorNameOrHexaCode);
};
}
I'm not sure how make loop or function for this, sorry.
You have to create a list of colors first before creating a loop:
.make-classes(#prefix, #list) {
.iter(length(#list));
.iter(#i) when (#i > 0) {
.iter(#i - 1);
#pair: extract(#list, #i);
#key: extract(#pair, 1);
#value: extract(#pair, 2);
.#{prefix}.color-#{key} {
color: #value;
}
}
}
#colors:
~'blue' #7FB3D4,
~'gray' #767676,
~'green' #8CC079,
~'red' #b35d5d;
.make-classes(link, #colors);
Output:
.link.color-blue {
color: #7fb3d4;
}
.link.color-gray {
color: #767676;
}
.link.color-green {
color: #8cc079;
}
.link.color-red {
color: #b35d5d;
}
This question already has answers here:
Sass - Manipulate inherited property?
(4 answers)
Closed 6 years ago.
I want to darken each button when you hover over them and I have no idea how to refer to the original color value in the :hover attribute.
//buttons.scss
//Define the colors
$tumblr-color: #35455C;
$twitter-color: #5AB6FC;
//Put these colors into classes
.btn-tumblr
{
color: $tumblr-color;
}
.btn-twitter
{
color: $twitter-color;
}
//Add the "darkens when hovered over" attribute
.btn-tumblr,
.btn-twitter
{
&:hover
{
color: darken(/*ATTRIBUTE OF THE ORIGINAL COLOR HERE*/, 20%);
}
}
There doesn't seem to be a way yet as of this writing, but another way to approach organizing your code to achieve the same end result (keeping things DRY) would be:
//buttons.scss
//Define the colors
$tumblr-color: #35455C;
$twitter-color: #5AB6FC;
$colors: $tumblr-color, $twitter-color;
//Mixins
#mixin thedarkening($color) {
color: darken($color, 20%);
}
#for $i from 1 through length($colors) {
.btn-#{$i} {
color: nth($colors, $i);
&:hover {
#include thedarkening(nth($colors, $i));
}
}
}
Demo
Caveat: requires you to change your classes to .btn-1, .btn-2, so on.
You can put the hover style inside each class, like this:
//Define the colors
$tumblr-color: #35455C;
$twitter-color: #5AB6FC;
.btn-tumblr {
color: $tumblr-color;
&:hover {
color: darken($tumblr-color, 20%);
}
}
.btn-twitter {
color: $twitter-color;
&:hover {
color: darken($twitter-color, 20%);
}
}
You can mimic the darken effect using opacity.
// Mimic the darken effect on hover
.btn-tumblr,
.btn-twitter {
opacity: .7;
&:hover {
opacity: 1;
}
}
I've tried to wrap my brain round this, I assume that I need an if statement somewhere along the way.
But I'd like to be able to do this with sass. But this will just take the green colour and ignore the default colour regardless of the class.
SASS
// Default Colours --------------------------------------------------------------
$textColor: #FFF;
.green {
// Base Colours --------------------------------------------------------------
$textColor: green;
}
body {
text: $textColor
}
HTML
<p>jamie</P> //Output is #FFF
<p class="green">jamie</P> //Output is green
Here is a little mixin you could use.
$base-color: green;
#mixin change-var($var: $base_color, $selector: x, $property: color) {
#if $selector == x {
$var: blue;
} #else if $selector == y {
$var: green
} #else {
$var: $var;
}
#{$property}: $var;
}
usage:
.x {
#include change-var($base-color, x, color)
}
.y {
#include change-var($base-color, y, background-color)
}
output:
.x {
color: blue;
}
.y {
background-color: green;
}
Try this
$textColor: #fff;
body {
color: $textColor;
}
.green {
$textColor: green;
color: $textColor;
}