Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Less mixins (with Bootstrap)


Recommended Posts

Anyone know how to add specific css ruleset into another? Example:

 

.one {
 font-weight: bold;
}

.two {
 .one;
}

 

That would copy the properties of .one into .two, however I would like to do something like:

 

.two {
 .badge .badge-success;
}

 

that would copy the properties of Bootstrap's success badge into .two.

 

Any ideas?

:heart:, osCommerce

Link to comment
Share on other sites

CSS should allow some sort of include construct like that, but it doesn't. You can replace a class with one or more others using Javascript, but that's not quite what you said you wanted.

 

Sorry, I got nothing.

 

Regards

Jim

See my profile for a list of my addons and ways to get support.

Link to comment
Share on other sites

Here a tips from this article: http://css-tricks.com/sass-vs-less/

 

.module-b {
.module-a(); /* Copies everything from .module-a down here */
border: 1px solid red;
}

 

or it can be used SASS @ extend

 

module-a {
/* A bunch of stuff */
}
.module-b {
/* Some unique styling */
@[member='ExtendedSolutions'] .module-a;
}

Link to comment
Share on other sites

Works:

 


.lala {
 .badge;
}

 

Fails:

 

 

.lala {
 .badge;
 .badge-success;
}

 

with this error:

 

NameError: .badge-success is undefined

 

@@acidvertigo .badge; and .badge(); are the same in LESS.

 

In ext/bootstrap/less/labels-badges.less there is similar code as:

 


.badge {
 &-success           { background-color: @successText; }
}

 

There is no ".badge-success" class though to reference.

:heart:, osCommerce

Link to comment
Share on other sites

If we try this:

 

.badge {
border: 10px solid black;
}
.badge_success {
background: pink;
}
.two {
.badge;
.badge_success;
}

 

and

 

<div class="two">this will be a pink background with a 10px black border</div>

 

It does work. The problem then is not the construct;

 

.two {
.badge;
.badge_success;
}

 

but is instead that the .less file creates .badge_success like this:

 


.badge {
 &-success                { background-color: @successText; }
}

 

Need to work out how to take this and inject into .two ...

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...