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;
}
Related
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;
}
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 would like to use the value of one root variable (which is defined by javascript) within a mixin as a condition of a #if. I think the example below is more clear than my explanation actually... Thanks for the help.
:root {
--bu:A;
}
#mixin varCheck() {
$var: var(--bu);
#if ($var == A) {
header {
background-color: blue !important;
}
}
#if ($var == B) {
header {
background-color: black !important;
}
}
}
#include varCheck();
I have a set of LESS variables with colors:
#blue: #0e9bd0;
#green: #009646;
#red: #f81010;
I use class names like this:
.color-blue {
color: #blue;
}
.border-blue {
border-color: #blue;
}
.bg-blue {
background: #blue;
}
Is it possible to generate rules automatically for each color?
Something like below?
.color-#{name} {
color: ##name;
}
.border-#{name} {
border-color: ##name;
}
.bg-#{name} {
background: ##name;
}
// define colours
#blue: #0e9bd0;
#green: #009646;
#red: #f81010;
// import loop helper
#import "https://raw.githubusercontent.com/seven-phases-max/less.curious/master/src/for.less";
// define colour array
#colors: 'green', 'red', 'blue';
.for(#colors); .-each(#color) {
#name: e(#color);
.color-#{name} {
color: ##name;
}
.border-#{name} {
border-color: ##name;
}
.bg-#{name} {
background: ##name;
}
}
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;
}