I have several SASS color maps for the template:
$map-black: (
$primary-color: black,
$secondary-color: grey
)
$map-white: (
$primary-color: white,
$secondary-color: grey
)
Can I bind specific map on body attribute value or class?
<body data-color="white">
<h1>Title</h1>
</body>
body[data-color="white"] {
#use $map-white;
}
body[data-color="black"] {
#use $map-black;
}
Your syntax is a bit off. You can define two maps this way:
$red: (
primary-color: red,
secondary-color: orange
);
$blue: (
primary-color: blue,
secondary-color: green
);
Then you can access the values in the maps using map-get($map, key):
div[data-color="red"] h1 {
color: map-get($red, primary-color);
}
div[data-color="red"] .desc {
color: map-get($red, secondary-color);
}
div[data-color="blue"] h1 {
color: map-get($blue, primary-color);
}
div[data-color="blue"] .desc {
color: map-get($blue, secondary-color);
}
This will apply to an HTML structure like this:
<div data-color="red">
<h1>Title</h1>
<p class="desc">Description</p>
</div>
<div data-color="blue">
<h1>Title</h1>
<p class="desc">Description</p>
</div>
You can test it in this fiddle
Plain HTML5: not that I know of. But you can write yourself a mixin, which produces this kind of output as simple css-classnames with a for-loop over your maps.
you can test the following on sass-meister (https://www.sassmeister.com/)
$map-black: (
primary-color: '#fff',
secondary-color: '#ccc'
);
$map-white: (
primary-color: '#fff',
secondary-color: '#ccc'
);
$themes: (
white: $map-white,
black: $map-black
);
#each $theme, $colors in $themes {
.#{$theme} {
background: map-get($colors, primary-color);
color: map-get($colors, secondary-color);
}
h1.#{$theme} {
color: map-get($colors, secondary-color);
}
.#{$theme} > p {
color: map-get($colors, secondary-color);
}
}
Related
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 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;
}
}
Is it possible to create a function inside a nested variable with scss/sass?
I was using this article to help guide me but I did not find anything on whether it would work inside a nested color variable.
Article working-with-lists-and-each-loops-in-sass-with-the-index-and-nth-function
I want to create a function to automate the creation of these variables
$oranges: #af5422;
$oranges2: #FFCA28;
$oranges3: #FFA000;
$fish: (
orange: (
"goldfish-1": $oranges,
"goldfish-2": $oranges2,
"goldfish-3": $oranges3,
)
) !default;
h1 {
color: map-get(map-get($fish, orange), "goldfish-1");
}
h2 {
color: map-get(map-get($fish, orange), "goldfish-2");
}
h3 {
color: map-get(map-get($fish, orange), "goldfish-3");
}
codepen
I am looking to do something like this but I can't figure it out.
$oranges: #af5422 #FFCA28 #FFA000;
$fish: (
orange:
#each $current-color in $oranges {
$i: index($oranges, $current-color);
"goldfish-#{$i}": $current-color,
}
)
) !default;
h1 {
color: map-get(map-get($fish, orange), "goldfish-1");
}
h2 {
color: map-get(map-get($fish, orange), "goldfish-2");
}
h3 {
color: map-get(map-get($fish, orange), "goldfish-3");
}
codepen 2
Is it even possible or is there a similar way to execute this?
I don't think it's possible to loop inside a map
However this is how you can achieve what you want easily. I am using the sass syntax
$oranges: #af5422 #FFCA28 #FFA000
$orange: ()
#each $current-colour in $oranges
$i: index($oranges, $current-colour)
$orange: map-merge($orange, ("goldfish-#{$i}": $current-colour))
$fish: (orange: $orange) !default
h1
color: map-get(map-get($fish, orange), "goldfish-1")
h2
color: map-get(map-get($fish, orange), "goldfish-2")
h3
color: map-get(map-get($fish, orange), "goldfish-3")
This is the scss syntax
$oranges: #af5422 #FFCA28 #FFA000;
$orange: ();
#each $current-colour in $oranges {
$i: index($oranges, $current-colour);
$orange: map-merge($orange, ("goldfish-#{$i}": $current-colour));
}
$fish: (orange: $orange) !default;
h1 {
color: map-get(map-get($fish, orange), "goldfish-1");
}
h2 {
color: map-get(map-get($fish, orange), "goldfish-2");
}
h3 {
color: map-get(map-get($fish, orange), "goldfish-3");
}
They both compile to the following css
h1 {
color: #af5422; }
h2 {
color: #FFCA28; }
h3 {
color: #FFA000; }
UPDATED ANSWER FOR EXTENSION
Based on what you want to achieve in the link in your comment
This is the code using sass indented style
$oranges: #af5422 #FFCA28 #FFA000
$newvar: car plane truck
$shaded: 5% 15%
$orange: ()
$vehicle: ()
#each $current-colour in $oranges
$i: index($oranges, $current-colour)
$orange: map-merge($orange, ($i*100:$current-colour))
$fish: ( orange: $orange) !default
#each $automobile in $newvar
$i: index($newvar, $automobile)
#for $count from 1 through 5
$new_map: ()
#if $count == 1
$new_map: map-merge($new_map, ($count *100: lighten(nth($oranges, $i), nth($shaded, 2))))
#else if $count == 2
$new_map: map-merge($new_map, ($count *100: lighten(nth($oranges, $i), nth($shaded, 1))))
#else if $count == 3
$new_map: map-merge($new_map, ($count *100: nth($oranges, $i)))
#else
$new_map: map-merge($new_map, ($count *100: darken(nth($oranges, $i), nth($shaded, 1))))
$vehicle: map-merge($vehicle, $new-map)
$fish: map-merge($fish, ($automobile: $vehicle))
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;
}