csslessless-mixins

Mixin parameter as a part of the class name


Hi is it possible to use mixin parameter as a part of the class name used in this mixin or do it in some other way?

.thumbs-mixin(@length) {

    &.thumbs-@length {

        .slick-track {
            width: 180px * @length - 20px;
            transform: translate3d(-50%, 0px, 0px);
            left: 50%;
        }
    }
}

Solution

  • Use Curly braces around the variable ie. &.thumbs-@{length}

    .thumbs-mixin(@length) {
    
      &.thumbs-@{length} {
        .slick-track {
          width: 180px * @length - 20px;
          transform: translate3d(-50%, 0px, 0px);
          left: 50%;
        }
      }
    }
    

    More info: http://lesscss.org/features/#variables-feature-variable-interpolation