Feature request: Combining entries in e.g. 'transform' #700

Closed
pimvdb opened this Issue Mar 10, 2012 · 6 comments

Projects

None yet

4 participants

@pimvdb

Background here.

Given two mixins, such as:

.rotate(@deg) {
  -webkit-transform: rotate(@deg);
}

.scale(@factor) {
  -webkit-transform: scale(@factor);
}

then using them together (.rotate(15deg); .scale(2);) in one class results in the following CSS:

-webkit-transform: rotate(15deg);
-webkit-transform: scale(2);

The rotate item is overridden because of the scale item. When combining these two items, the transform entry should be:

-webkit-transform: rotate(15deg) scale(2);

I think it might be a good idea to enhance less in a way so that such entries are combined correctly instead of overridden. Overriding doesn't have much purpose anyway.

@ninique

I think you can do that already with @arguments

.transform(){
-webkit-transform: @arguments
}

Then you would call it like .transform(rotate(15deg) scale(2))

I'm not sure whether there would be any conflict with the parenthesis though. You might need to escape them.

@pimvdb

Thanks. Yes, that way is certainly possible, but the issue I'm pointing at is that there are multiple classes which cannot be combined now. It's not a crucial issue at all, but I do think it would be nice if the transform items from multiple classes could be combined.

@lukeapage
Less member

overriding does have purpose - browser compatibility, but maybe not for this propwrty, so it'd have to be special cased - dangerous waters.

@danielkatz

There is a use cases that require merging of two or more values into a single property.
The most common one is for creating mixins for vendor prefixes in border-radius or transform properties which are useless if cannot be merged (or accumulated) in a single property. I require this feature for implementing background and transform properties in my LESS-bidi library.

The feature might be implemented in a declarative way by syntax like background: url(img1.png) !merge(,); which is consistent with CSS and LESS syntax and style.

Given the following LESS input:

.first-transform() {
    transform: rotate(90deg) skew(30deg) !merge();
}
.second-transform() {
    transform: scale(2,4) !merge();
}
.third-transform() {
    transform: scaleX(45deg);
}
.fourth-transform() {
    transform: scaleX(45deg) !merge(,);
}
.first-background() {
    background: url(img1.png) !merge(,);
}
.second-background() {
    background: url(img2.png) !merge(,);
}

.test1 {
    .first-transform();
    .second-transform();
}
.test2 {
    .first-transform();
    .third-transform();
}
.test3 {
    .first-background();
    .second-background();
}
.test4 {
    .first-transform();
    .fourth-transform();
}

I would expect the following CSS result:

.test1 {
    transform: rotate(90deg) skew(30deg) scale(2,4);
}
.test2 {
    transform: rotate(90deg) skew(30deg);
    transform: scaleX(45deg);
}
.test3 {
    background: url(img1.png), url(img2.png);
}
.test4 {
    transform: rotate(90deg) skew(30deg);
    transform: scaleX(45deg);
}

I'll be very exited to have this capability which unlocks the path to supporting all CSS3 new features with ease.
Also, i'd like to hear others thoughts on the syntax and the feature.

Thanks.

@lukeapage
Less member

Interesting idea and syntax, will think about it.

@danielkatz danielkatz added a commit to danielkatz/less.js that referenced this issue Feb 6, 2013
@danielkatz danielkatz Added support and tests for !merge() syntax #700 605ab0d
@SomMeri SomMeri referenced this issue in SomMeri/less4j May 1, 2013
Closed

Add support for merge (1.5.0) #142

@lukeapage
Less member

Has been pulled

@lukeapage lukeapage closed this Jun 14, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment