CODEWITHSUNDEEP
cssless
James
James

Reputation: 1706

Using LESS / CSS / Mixins and passing values from classes

I have this little snippet of css which i want to use transform and then add rotate into it but getting a failure... am i doing this wrong? Im new to LESS so sorry if im going about this wrong.

CSS:

.class {
    &::before {
        .transform(.rotate(@deg: 45deg));
    }
    &::after {
        .transform(.rotate(@deg: -45deg));
    }
}

MIXIN:

.transform(@string){
    -webkit-transform:  @string;
    -moz-transform:     @string;
    -ms-transform:      @string;
    -o-transform:       @string;
}

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

Upvotes: 1

Views: 56

Answers (1)

ghost_dad
ghost_dad

Reputation: 1306

So the way you have things set up above, you're basically passing the entire rotate mixin into the transform mixin. Which, if it actually knew how to parse, would end up with pretty garbled code. Instead, you can just use the top mixin and pass rotate into it. This is a better route, because it would allow you to use multiple transforms (which is a pretty common usage). Here's an example:

.transform(@string){
  -webkit-transform:  @string;
  -moz-transform:     @string;
  -ms-transform:      @string;
  -o-transform:       @string;
}

.class {
  &::before {
    .transform(rotate(45deg));
  }
}

And if you wanted to call rotate and translate at a future time, it would be as easy as adding translate, as well.

.class {
  &::before {
    .transform(translateY(-50%) rotate(45deg));
  }
}

Upvotes: 3

Related Questions