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();
Related
I have a task to write 100 styles for every of 10 columns in Less.
Code looks like this at the moment:
.loopingCellWidth (#index) when (#index > 0){
&[data-1-column-width="#{index}"] {
.exercise-table-row {
.exercise-table-row-part {
&:nth-child(1) {
width: percentage(#index * 0.01) !important;
}
}
}
}
&[data-2-column-width="#{index}"] {
.exercise-table-row {
.exercise-table-row-part {
&:nth-child(2) {
width: percentage(#index * 0.01) !important;
}
}
}
}
// ..... up to 10
.loopingCellWidth(#index - 1);
}
.loopingCellWidth(100);
I would like to create a variable #numberOfColumn and place it in the attribute selector, like this:
&[data-#{#numberOfColumn}-column-width="#{index}"] {
But this solution doesn't work.
Any ideas how it should be done? Of course if it's even possible.
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;
}
How to properly declare the sass statement to produce the output css in comment ?
.formModal{
.modal-body{
.inputTextWrap{
/*
.modal-body > .inputTextWrap:first-child {
background:violet;
}
*/
}
}
}
Try this:
.formModal{
.modal-body{
.inputTextWrap{
#at-root .modal-body > .inputTextWrap:first-child{
background: violet; //Remember you need a space after the:
};
}
}
}
You can check stuff like this on sassmeister
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;
}
I have the following code to target buttons that are in a disable state:
.btn-default[disabled] {
background-color: lighten(#btn-default-bg, 30%)
}
Is it possible to use nested rules to target the disabled attribute? something similar to &:Hover
You can indeed, like this:
.btn-default {
&[disabled] {
background-color: lighten(#btn-default-bg, 30%)
}
}
http://jsbin.com/aKuLire/1/edit
You can even do further nesting:
input {
&[type="submit"] {
&[disabled] {
background: #blue;
}
}
}