CODEWITHSUNDEEP
csstwitter-bootstraplessmixinsless-mixins
Edward
Edward

Reputation: 4631

Can I use css-classes as a mixin in a less-file?

In my style.less I'd like to define, that all elements with the class .element nested within an element of the class .group have the same properties of the bootstrap-class .col-sm-6.

Unfortunately I can't directly add the class .col-sm-6 to the elements.

In that project, bootstrap is available in the folder tapestry5/bootstrap/css/bootstrap-darkly.css releative to my style.less. (How) Can I also use CSS-classes as mixins within my style.css? I tried:

@import (reference) "tapestry5/bootstrap/css/bootstrap-darkly.css";

.group .element {
  .col-sm-6;
}

Unformtunately I get a Less4J Exception:

Could not find mixin named ".col-sm-6". - line 4 - position 3

Is it impossible to use CSS as mixins, or is something wrong with my syntax?

Upvotes: 1

Views: 706

Answers (2)

allejo
allejo

Reputation: 2203

If you're going to be using the Bootstrap LESS, you may as well make use of their mixins instead of their CSS. As seven-phases-max suggested in his comment, you can use make-*-column instead of using the CSS classes.

You'd do this instead:

.group .element {
  .make-sm-column(6);
}

Upvotes: 2

peterdotjs
peterdotjs

Reputation: 1556

If you change the css file you have available to less file ending and import it (as all CSS is valid LESS). The less compiler will be able to find and use .col-sm-6 as a mixin.

@import (reference) "tapestry5/bootstrap/css/bootstrap-darkly.less";

.group .element {
  .col-sm-6;
}

Upvotes: 2

Related Questions