Is it possible with Emmet to shorthand this CSS? Each class corresponds to an image asset and they share an increasing number.
.penguin1 { background-image:url('penguin_pngs/mound_1.png'); }
.penguin2 { background-image:url('penguin_pngs/mound_2.png'); }
.penguin3 { background-image:url('penguin_pngs/mound_3.png'); }
.penguin4 { background-image:url('penguin_pngs/mound_4.png'); }
.penguin5 { background-image:url('penguin_pngs/mound_5.png'); }
.penguin6 { background-image:url('penguin_pngs/mound_6.png'); }
.penguin7 { background-image:url('penguin_pngs/mound_7.png'); }
.penguin8 { background-image:url('penguin_pngs/mound_8.png'); }
I am able to use CSS shorthand such as bgi which expands to background-image: url(); but is it possible to repeat the classname and use a numbering operator such as Emmet's html $ operator?
I made this less loop to generate css code needed to a specific task.
(included at bottom of page).
Is it safe to say that writing less-loops reduce development time but also generates unnecessary code styles?
I can see a lot of benefits of using this technique but none of them include performance optimization aspects.
#items : 12;
#color-base : red;
#slice : 30deg;
.looop (#i) when (#i>0){
.looop(#i - 1);
li:nth-child(#{i}){
transform: rotate((#i*#slice)-30) skewY(-2*#slice);
.text {
background : spin(#color-base, 30);
}
}
}
.looop(#items);
You can optimize it a bit:
#items : 12;
#excluded-items: 1, 2, 5;
#color-base : red;
#slice : 30deg;
.looop (#i) when (#i>0) {
.looop(#i - 1);
li:nth-child(#{i}){
transform: rotate((#i*#slice)-30) skewY(-2*#slice);
}
}
.looop(#items);
li {
.text {
background : spin(#color-base, 30);
}
}
I'm working on converting Unsemantic from SASS to LESS and while I'm building the loop to create my classes:
.populateGridClasses (#index, #interval) when (#index > 0) {
#num: #index * #interval;
(~".eh-grid-#{num}, .eh-mobile-grid-#{num}, .eh-tablet-grid-#{num}") {
.grid();
}
.populateGridClasses(#index - 1, #interval);
}
.populateGridClasses (0, #interval) {}
// Create the grids in an inverval of 5
.populateGridClasses(20, 5);
// Create the grids in thirds
.populateGridClasses(3, 33);
It creates the classes as so:
.eh-grid-100, .eh-mobile-grid-100, .eh-tablet-grid-100 {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 10px;
}
.eh-grid-95, .eh-mobile-grid-95, .eh-tablet-grid-95 {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0 10px;
}
...
Obviously, that could be condesnsed so that all 6 of those classes are defined at once. So my idea is to use the loop to create a giant string that I'll then add the .grid() mixin to:
#test: "";
.populateGridClasses4 (#index, #interval) when (#index > 0) {
#num: #index * #interval;
#ntest: ".eh-grid-#{num}, .eh-mobile-grid-#{num}, .eh-tablet-grid-#{num}";
#test: "#{test}#{ntest}";
.populateGridClasses4(#index - 1, #interval);
}
.populateGridClasses4 (0, #interval) {}
.populateGridClasses4(20, 5);
("#{test}"){
padding-left: 1px;
}
But that gives me a LESS error LESS: Out of stack space. Any idea on how I can create this massive string so I can create 69 classes and only define them once? Programmatically, of course.
You could try passing another attribute to the mixin ... like this, where I added to your code the #t1 to the arguments and define the #t2 in the loop, and pass it on. Now you'll be writing to a variable only in the scope of one loop step, and not trying to overwrite the same variable over again in the recursion (does not agree with less). So this is your code, that should not get the error you mention anymore:
#test: "";
.populateGridClasses4 (#index, #interval, #t1) when (#index > 0) {
#num: #index * #interval;
#ntest: ".eh-grid-#{num}, .eh-mobile-grid-#{num}, .eh-tablet-grid-#{num}";
#t2: ~"#{t1}#{ntest}";
.populateGridClasses4(#index - 1, #interval,#t2);
}
.populateGridClasses4 (0, #interval,#t1) {}
.populateGridClasses4(20, 5, #test);
#{t2} {
padding-left: 1px;
}
Also you need use ~ for class interpolation, not to return the class names between quotation marks.
Edit: The above will only work in 1.3.3, but for your approach to work in 1.4 you need to tweak it a little. Also I noticed that the way you were joining the strings did not add commas between class names of each loop, so I added another step here, this should now do the right thing in1.4 and previous versions of LESS.
.populateGridClasses4(1,#num,#t1) {
#test: ~"#{t1}, .eh-grid-#{num}, .eh-mobile-grid-#{num}, .eh-tablet-grid-#{num}";
}
.populateGridClasses4(#index, #interval, #t1) when (#index > 1) {
#num: (#index * #interval);
#t2: "#{t1}, .eh-grid-#{num}, .eh-mobile-grid-#{num}, .eh-tablet-grid-#{num}";
.populateGridClasses4((#index - 1),#interval,#t2);
}
.populateGridClasses4(#index,#interval) {
#num: (#index * #interval);
#t2: ".eh-grid-#{num}, .eh-mobile-grid-#{num}, .eh-tablet-grid-#{num}";
.populateGridClasses4((#index - 1), #interval, #t2);
}
.populateGridClasses4(20, 5);
#{test} { padding-left: 1px; }
the output CSS is:
.eh-grid-100, .eh-mobile-grid-100, .eh-tablet-grid-100, .eh-grid-95, .eh-mobile-grid-95, .eh-tablet-grid-95, .eh-grid-90, .eh-mobile-grid-90, .eh-tablet-grid-90, .eh-grid-85, .eh-mobile-grid-85, .eh-tablet-grid-85, .eh-grid-80, .eh-mobile-grid-80, .eh-tablet-grid-80, .eh-grid-75, .eh-mobile-grid-75, .eh-tablet-grid-75, .eh-grid-70, .eh-mobile-grid-70, .eh-tablet-grid-70, .eh-grid-65, .eh-mobile-grid-65, .eh-tablet-grid-65, .eh-grid-60, .eh-mobile-grid-60, .eh-tablet-grid-60, .eh-grid-55, .eh-mobile-grid-55, .eh-tablet-grid-55, .eh-grid-50, .eh-mobile-grid-50, .eh-tablet-grid-50, .eh-grid-45, .eh-mobile-grid-45, .eh-tablet-grid-45, .eh-grid-40, .eh-mobile-grid-40, .eh-tablet-grid-40, .eh-grid-35, .eh-mobile-grid-35, .eh-tablet-grid-35, .eh-grid-30, .eh-mobile-grid-30, .eh-tablet-grid-30, .eh-grid-25, .eh-mobile-grid-25, .eh-tablet-grid-25, .eh-grid-20, .eh-mobile-grid-20, .eh-tablet-grid-20, .eh-grid-15, .eh-mobile-grid-15, .eh-tablet-grid-15, .eh-grid-10, .eh-mobile-grid-10, .eh-tablet-grid-10, .eh-grid-5, .eh-mobile-grid-5, .eh-tablet-grid-5 {
padding-left: 1px;
}
I'm trying to declare background image icons for some table rows:
.i(#file:'file.png', #type) {
&.#{type} {
td:first-child {
background-image: url('../img/#{file}');
}
}
}
I'd like to be able to pass in multiple image types at once:
.i('code.png', 'asp, php, rb, py')
and have it effectively do this:
.i(#file:'file.png', #type) {
&.#{type1},
&.#{type2},
&.#{type3},
&.#{type4}, {
td:first-child {
background-image: url('../img/#{file}');
}
}
}
I know the CSS output will be different, the last code example is for illustration purposes.
Any ideas on how to achieve this, short of just declaring a bunch of empty selectors as placeholders?
Updated for LESS 1.5
This code produces the same effect more efficiently in the later versions of LESS, using the newer extract() and length() functions available in LESS 1.5+. Output will be the same as the original example.
.i(#file:'file.png', #types) {
//find length to make the stop point
#stopIndex: length(#types);
//set up our LESS loop (recursive)
.loopTypes (#index) when (#index =< #stopIndex) {
#class: extract(#types,#index);
//print the CSS
&.#{class} {
td:first-child {
background-image: url('../img/#{file}');
}
}
// next iteration
.loopTypes(#index + 1);
}
// "call" the loopingClass the first time getting first item
.loopTypes (1);
}
.myClass {
.i('code.png'; asp, php, rb, py;);
}
With Loops and Inline-Javascript in LESS 1.3.3
This took a few hours to come up with (no, I didn't have a bunch of free time to work on it, I'm just hopelessly addicted...). One of the parts that took the longest was figuring out why my #stopIndex was not being seen as a number by LESS when I was returning the .length of the array, and throwing a type error. I finally discovered I need to explicitly tell it to see it as a number using the unit() function of LESS.
The solution utilizes general concepts from these sources:
The LESS looping
The Javascript functions in LESS
LESS
.i(#file:'file.png', #type) {
//find length to make the stop point
#stopIndex: unit(`(function(){ return #{type}.split(",").length})()`);
//need to get the first item in #type
#firstClass: ~`(function(){
var clsArray = #{type}.replace(/\s+/g, '').split(",");
return clsArray[0];
})()`;
//set up our LESS loop (recursive)
.loopTypes (#index, #captureClass) when (#index < #stopIndex) {
#nextClass: ~`(function(){
var clsArray = #{type}.replace(/\s+/g, '').split(",");
//don't let it try to access past array length
if(#{index} < (#{stopIndex} - 1)) {
return clsArray[#{index} + 1];
}
else { return '' }
})()`;
//print the CSS
&.#{captureClass} {
td:first-child {
background-image: url('../img/#{file}');
}
}
// next iteration
.loopTypes(#index + 1, #nextClass);
}
// define guard expressoin to end the loop when past length
.loopTypes (#stopIndex, #captureClass) {}
// "call" the loopingClass the first time getting first item
.loopTypes (0, #firstClass);
}
.myClass {
.i('code.png', 'asp, php, rb, py');
}
CSS Output
.myClass.asp td:first-child {
background-image: url('../img/code.png');
}
.myClass.php td:first-child {
background-image: url('../img/code.png');
}
.myClass.rb td:first-child {
background-image: url('../img/code.png');
}
.myClass.py td:first-child {
background-image: url('../img/code.png');
}
Say I have three separate color schemes that are used on various pages in a site. Each color has a a light, medium and dark tint defined, and the color scheme is defined by a class in the body. Assume that the "red" color scheme is the default. Like this:
Color Definitions:
#red-lt: #121;
#red-md: #232;
#red-dk: #343;
#green-lt: #454;
#green-md: #565;
#green-dk: #676;
#blue-lt: #787;
#blue-md: #898;
#blue-dk: #909;
Basic Default Style Example
body { background-color: #red-dk;
#container { background-color: #red-md;
p { color: #red-dk; }
}
}
Different Color Scheme Style Example
body.green { background-color: #green-dk;
#container { background-color: #green-md;
p { color: #green-dk; }
}
}
I'd like to use variables so that I don't have to re-write all of the color variations for each scheme, so that I can just write something like this:
body.[color-var] { background-color: #[color-var]-dk;
#container { background-color: #[color-var]-md;
p { color: #[color-var]-dk; }
}
}
…but I can't quite wrap my head around how to accomplish that. Help…?
Use interpolation and escaping, parentheses in the selector and parametric mixins to get the desired effect:
Dynamic variables by interpolation: In a string, "#{variable}" is replaced with the value of the variable. They can also be nested: Given #{#{var}-foo} and #var: bar;, the result is "barfoo".
The resulting value is quoted. To remove these quotes, prefix ~.
Dynamic selectors by Selector interpolation: body.#{var} turns into body.bar.
Example:
#red-md: #232;
#red-dk: #343;
.setColor(#color) {
body.#{color} { background-color: ~"#{#{color}-dk}";
#container { background-color: ~"#{#{color}-md}";
p { color: ~"#{#{color}-md}"; }
}
}
}
.setColor(~"red"); // Escape to prevent "red" turning "#FF0000"
//.setColor(~"blue"); etc..
Turns into:
body.red {
background-color: #334433;
}
body.red #container {
background-color: #223322;
}
body.red #container p {
color: #223322;
}
Note: When the answer was originally written, selector interpolation did not exist. See the previous revision for the solution if you're working with an old LESS compiler (before LESS 1.3.1a). Support for the old method will be dropped in LESS 1.4.0.
If those values really follow a predictable format like that, seems like a perfect case for a parametric mixin:
Less:
#red: #232;
#green: #565;
#blue: #898;
.theme (#color) {
background-color: #color - #111;
#container {
background-color: #color;
p { color: #color + #111; }
}
}
body.red {
.theme(#red);
}
Compiled CSS:
body.red{background-color:#112211;}
body.red #container{background-color:#223322;}
body.red #container p{color:#334433;}
I know this question is pretty old, but for those that come to this post my answer maybe can help
I`m not really sure for what you want to use this, but one of my suggestion is based on #ScottS answer. On my real world, I need to create a web app, where it would show several brands and each brand have their own text color, background and so on... so I started to chase a way to accomplish this in LESS, what I could easily do on SASS and the result is below:
LESS
// Code from Seven Phase Max
// ............................................................
// .for
.for(#i, #n) {.-each(#i)}
.for(#n) when (isnumber(#n)) {.for(1, #n)}
.for(#i, #n) when not (#i = #n) {
.for((#i + (#n - #i) / abs(#n - #i)), #n);
}
// ............................................................
// .for-each
.for(#array) when (default()) {.for-impl_(length(#array))}
.for-impl_(#i) when (#i > 1) {.for-impl_((#i - 1))}
.for-impl_(#i) {.-each(extract(#array, #i))}
// Brands
#dodge : "dodge";
#ford : "ford";
#chev : "chev";
// Colors
#dodge-color : "#fff";
#ford-color : "#000";
#chev-color : "#ff0";
// Setting variables and escaping than
#brands: ~"dodge" ~"ford" ~"chev";
// Define our variable
.define(#var) {
#brand-color: '#{var}-color';
}
// Starting the mixin
.color() {
// Generating the loop to each brand
.for(#brands); .-each(#name) {
// After loop happens, it checks what brand is being called
.define(#name);
// When the brand is found, match the selector and color
.brand-#{name} & {
color: ##brand-color;
}
}
}
.carColor {
.color();
}
Te result will be:
CSS
.brand-dodge .carColor {
color: "#fff";
}
.brand-ford .carColor {
color: "#000";
}
.brand-chev .carColor {
color: "#ff0";
}
This is very tricky and I had to use several elements to get what I needed, first used a set of mixins provided by Seven Phase Max and you can find it here and than, the #ScottS answer was the piece that was missing fro my puzzle... hope this helps you and others that need to create a set of Variables to be part of another variable and create a more dynamic less file.
You can copy my entire code and test at http://lesstester.com/
Try this
#red-lt: #121;
#red-md: #232;
#red-dk: #343;
#green-lt: #454;
#green-md: #565;
#green-dk: #676;
#blue-lt: #787;
#blue-md: #898;
#blue-dk: #909;
#color: 'red-lt';
div{
background: ##color;
border: 1px solid lighten(##color,20%);
}
To my knowledge, variable variable names are not supported in LESS. You could however restructure your declarations in a more semantic manner:
/* declare palette */
#red-lt: #121;
#red-md: #232;
#red-dk: #343;
#green-lt: #454;
#green-md: #565;
#green-dk: #676;
#blue-lt: #787;
#blue-md: #898;
#blue-dk: #909;
/* declare variables based on palette colors */
#lt: #red-lt;
#md: #red-md;
#dk: #red-dk;
/* ...and only use them for main declarations */
body { background-color: #dk;
#container { background-color: #md;
p { color: #dk; }
}
}
This should let you switch between palettes quite painlessly by avoiding explicit color references.