wondering if it is possible to use an array with Sass as I find my self repeating the following sort of thing:
.donkey
h2
background-color= !donkey
.giraffe
h2
background-color= !giraffe
.iguana
h2
background-color= !iguana
Absolutely.
$animals: "donkey", "giraffe", "iguana"
#foreach $animal in $animals
.#{$animal}
h2
background-color: !#{$animal}
No, this isn't possible. The best way to do it is to define a mixin:
+animal-h2(!name, !color)
.#{name} h2
background-color= !color
Then you can have one line per style, rather than three:
+animal-h2("donkey", !donkey)
+animal-h2("giraffe", !giraffe)
+animal-h2("iguana", !iguana)
nex3's answer is correct. To get this working with SASS on Rails 3.1 I needed to have the following in a css.scss file:
$donkey: #CC4499;
#mixin animal-h2($name, $color) {
.#{$name} h2 {
background-color: $color;
}
}
#include animal-h2("donkey", $donkey);
#include animal-h2("horse", #000);
Which output:
.donkey h2 {
background-color: #CC4499;
}
.horse h2 {
background-color: black;
}
Related
I am making a theme editor for WordPress, and would like to use less to build the CSS file.
I have put a string in a variable like this:
#banner-separation-style: 'thick_border';
Then I'm trying to use when() like this:
when (#banner-separation-style = 'thick_border') {
header {
... some style
}
... and some css selectors
}
I've also tried combinations without quoting the variable.
How do I properly create something similar to if-blocks with less?
Guards (when statement) can only be used along with a mixin or a CSS selector. We can't write a when statement without using one of those. So, either write it with a mixin like below:
#banner-separation-style: 'thick_border';
.border-styles() when (#banner-separation-style = 'thick_border') {
header { border: 2px solid red; }
nav { border: 2px solid green; }
}
.border-styles;
or directly with the CSS selector like below:
#banner-separation-style: 'thick_border';
header when (#banner-separation-style = 'thick_border') {
border: 2px solid red;
}
nav when (#banner-separation-style = 'thick_border') {
border: 2px solid green;
}
or atleast using an unnamed selector (&) like below:
#banner-separation-style: 'thick_border';
& when (#banner-separation-style = 'thick_border') {
header { border: 2px solid red; }
nav { border: 2px solid green; }
}
The first version (with mixin) is the one that I prefer because (a) you don't have to repeat the condition multiple times like in the CSS selector version and (b) giving the mixin a name makes it more readable than using an unnamed selector. It is just my choice and some other user could actually prefer the last because it doesn't need that extra mixin call statement.
Is it possible in Less to setup mixin informations that can read phpStorm?
I write a Mixin like this:
.action-btn(#size: 32px, #color: #fff, #bgColor: #overlayStyleBlack, #bgColorHover: #red) {
a {
width: #size;
display: block;
color: #color;
text-align: center;
line-height: #size;
background-color: #bgColor;
&:hover {
cursor: pointer;
background-color: #bgColorHover;
}
}
}
What i want now is, that when i use this mixin in another less file: ".action-btn();" then i want to see that i have in this Mixin 4 Settings that i can Setup. In php Classes i can do this with:
/**
* #param string $xxx
* function to check and change user is_online flag in sphinx and in mysql
*/
But this dont work in the Less Mixin File.
And how can i Skip some settings? Here a example to explain what i mean. (This ry dont worked)
.action-btn(64px, , , #fff);
Is there a way to use property names as variables in LESS?
For example:
h1 {
font-size: 16px;
line-height: font-size * 2;
}
The above snippet doesn't work, and I wonder how to get this effect?
I don't think it's possible.
A workaround is creating a variable and assign the font-size to it. Then you can use this to multiply the value:
#fontsize: 16px;
h1 {
font-size: #fontsize;
line-height: #fontsize * 2;
}
Can I add a mixin to a variable in LESS?
Something like this
#input-border-radius: .rounded();
or
#h1: .font-size(46) // This pulls from the rem calculator mixin.
Looked at the LESS Docs but can't see a way to do it.
There is a way.
You can define properties of a (possibly immaginary) class and recall the properties of that class in the style of a different class. For example:
.fontstyling {
font-weight: bold;
color: black;
}
h1 {
font-size: 46px;
.fontstyling;
}
h2 {
font-size: 38px;
.fontstyling;
}
(thats not the best way to format the headings - but for other exemples it is really useful!)
I really want to quit typing:
#media (min-width: #min-tablet-width) and (max-width: #max-tablet-width) {
// styles for tablets
}
all over my LESS files.
As far as I know, there's no way in LESS to move this into a function, like:
.tablet() {
// styles for tablets
}
Are there other solutions?
Look at this : https://github.com/dalou/bootstrap3-less-mixins
ex :
h2 {
font-size: 20px;
.phone-only({
font-size: 14px;
})
}
The answer at this point in time is: no.
EDIT: see Dalou's answer above.