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;
}
}
Related
I have some code that controls a charity area on a site. The charity area has many different charity sectors and these all have their own colours. I have attached my SCSS below but wondered if there is a better way to write and apply this. So far I just need each charity colour to be applied as a 'background-color' but be able to have a tint of each. My code works fine but I'm sure there is a better way of writing this.
Thank you for any help in advanced.
/**************************************
Charity Colours
****************************************/
$color-animals: #a9efea;
$color-babies: #fae08c;
$color-cancer: #f4c9c8;
$color-community: #b3ddf2;
$color-deaf: #9FC279;
$color-mental: #CB89D5;
$color-elderly: #CCDCD4;
$color-rescue: #F4BD88;
$color-medical: #D0879C;
$color-hospice: #F0D3FA;
$color-human: #D3E0AD;
$color-military: #CBC3AD;
$color-overseas: #96C0E5;
$color-sports: #939393;
.animals-bg {
background:$color-animals;
}
.babies-bg {
background:$color-babies;
}
.cancer-bg {
background:$color-cancer;
}
.community-bg {
background:$color-community;
}
.deaf-bg {
background:$color-deaf;
}
.mental-bg {
background:$color-mental;
}
.elderly-bg {
background:$color-elderly;
}
.rescue-bg {
background: $color-rescue;
}
.medical-bg {
background:$color-medical;
}
.hospice-bg {
background:$color-hospice;
}
.human-bg {
background:$color-human;
}
.military-bg {
background:$color-military;
}
.overseas-bg {
background:$color-overseas;
}
.sports-bg {
background:$color-sports;
}
// Colour Tint for Lighter Background
$color-tint: 0.3;
.animals-bg--tint {
background: rgba($color-animals, $color-tint);
}
.babies-bg--tint {
background: rgba($color-babies, $color-tint);
}
.cancer-bg--tint {
background: rgba($color-cancer, $color-tint);
}
.community-bg--tint {
background: rgba($color-community, $color-tint);
}
.deaf-bg--tint {
background: rgba($color-deaf, $color-tint);
}
.mental-bg--tint {
background: rgba($color-mental, $color-tint);
}
.elderly-bg--tint {
background: rgba($color-elderly, $color-tint);
}
.rescue-bg--tint {
background: rgba($color-rescue, $color-tint);
}
.medical-bg--tint {
background: rgba($color-medical, $color-tint);
}
.hospice-bg--tint {
background: rgba($color-hospice, $color-tint);
}
.human-bg--tint {
background: rgba($color-human, $color-tint);
}
.military-bg--tint {
background: rgba($color-military, $color-tint);
}
.overseas-bg--tint {
background: rgba($color-overseas, $color-tint);
}
.sports-bg--tint {
background: rgba($color-sports, $color-tint);
}
Modified SCSS:
$charity-colors: (
animals: #a9efea,
babies: #fae08c,
cancer: #f4c9c8,
community: #b3ddf2,
deaf: #9FC279,
mental: #CB89D5,
elderly: #CCDCD4,
rescue: #F4BD88,
medical: #D0879C,
hospice: #F0D3FA,
human: #D3E0AD,
military: #CBC3AD,
overseas: #96C0E5,
sports: #939393
);
#each $sector, $color in $charity-colors {
.#{$sector}-bg {
background: $color;
}
.#{$sector}-bg--tint {
background: rgba($color, $color-tint);
}
}
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;
}
I want to style paper-dropdown-menu, specifically for example the paper-input components of the element. I guess I need to learn/understand how mixins work.
I probably need to combine the mixins of paper-dropdown-menu with the mixins/custom properties of paper-input-container, am I right about this?
https://elements.polymer-project.org/elements/paper-dropdown-menu
https://elements.polymer-project.org/elements/paper-input?active=paper-input-container
I don't even know where to start. The doc suggets something in curly braces as a default in a mixin, so the first step is probably something like:
paper-dropdown-menu {
--paper-dropdown-menu: {
something here?
}
}
I barely understand this stuff myself, but I think after much struggle I might be able to shed enough insight to get you started.
You can define variables at the ":root" level that you want to use over and over again. (Yes you actually type ":root".) Consider:
<style is="custom-style">
:root{
--main-color: rgb(244,67,54);
--dark-color: rgba(0, 0, 0, 0.258824);
--light-color: rgb(153, 153, 153);
--app-header-background-front-layer-background-image: url(../../img/ConcertChoirSATour.jpg);
--app-header-background-front-layer-height: 400px;
}
</style>
Maybe you're using the Polymer appheader element, and you see in the docs that you can set the backgrounds with:
app-header {
--app-header-background-front-layer: {
/*something or other*/
};
--app-header-background-rear-layer: {
/*something or other*/
};
}
Here's where you use the variables you assigned in your :root level using the var() keyword:
app-header {
--app-header-background-front-layer: {
background-image: var(--app-header-background-front-layer-background-image);
};
--app-header-background-rear-layer: {
/* The header is blue when condensed */
background-color: var(--main-color);
};
}
Here's some sample code:
<style is="custom-style">
:root{
--main-color: rgb(244,67,54);
--dark-color: rgba(0, 0, 0, 0.258824);
--light-color: rgb(153, 153, 153);
--app-header-background-front-layer-background-image: url(../../img/ConcertChoirSATour.jpg);
--app-header-background-front-layer-height: 400px;
}
app-header {
--app-header-background-front-layer: {
background-image: var(--app-header-background-front-layer-background-image);
};
--app-header-background-rear-layer: {
/* The header is blue when condensed */
background-color: var(--main-color);
};
}
paper-icon-button {
--paper-icon-button-ink-color: white;
}
paper-dropdown-menu {
--paper-input-container-focus:{
color: var(--main-color);
};
--paper-input-container: {
color: var(--dark-color);
};
--paper-input-container-input: {
color: var(--light-color);
};
--paper-input-container-label: {
color: var(--main-color);
};
}
</style>
You can find some examples here:
https://www.polymer-project.org/1.0/docs/devguide/styling.html
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;
}