Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Reference a class/mixin without completely importing the LESS file

I'm using the roots theme for wordpress: https://github.com/retlehs/roots/

It already comes with a precompiled bootstrap.css and recommends to use app.css for any customizations. As I don't have the options to add the classes to the buttons via html or javascript, I'd like to use the LESS sources to reference a css class, for example, I want to give a submit button the bootstrap button style:

input#submit{ .btn; .btn-primary; } 

If I use @import 'bootstrap.less'; it adds the entire bootstrap css into app.css. How can I just use the bootstrap.less as reference for compiling?

like image 827
FLX Avatar asked Jan 22 '13 07:01

FLX


People also ask

What is the correct way to define a mixin in LESS?

Mixins are a group of CSS properties that allow you to use properties of one class for another class and includes class name as its properties. In LESS, you can declare a mixin in the same way as CSS style using class or id selector. It can store multiple values and can be reused in the code whenever necessary.

How do you import LESS variables?

The best way to do this is to @import your LESS file with all your variables in it. Here's the syntax for the @import keyword: // For LESS file includes, @import "lib. less"; // or @import "lib"; // infers the .

What are LESS variables?

Less variables are defined with a symbol @ and the values are assigned in the variable with a colon ( : ). Variables are actually "constants" in that they can only be defined once.


1 Answers

The core question you ask is

"How can I just use the bootstrap.less as reference for compiling?"

As of LESS version 1.5

For LESS 1.5 it is now possible to import a file purely as a reference. Like so:

@import (reference) 'bootstrap.less'; 

No actual code will output from that file as CSS, but all becomes available to use as mixins.

Original Answer (kept for context for all the comments)

[DISCLAIMER: it is uncertain if this would work as of 1.3.3, but this original answer I do believe has some usefulness in later versions as well. However, for truly getting what the OP wanted, the new capability in LESS 1.5 is recommended.]

Current versions of LESS (1.3.3) can accommodate this through the use of a namespace. Like so:

#bootstrapRef() {   @import: 'bootstrap.less': }  input#submit{   #bootstrapRef > .btn;   #bootstrapRef > .btn-primary; } 

By making the namespace a mixin (the addition of the parentheses after the name), it will still import the file (I know of no way to access it externally without importing), but it should not compile the actual bootstrap code into your final css file output. What this technique should do is allow you access to bootstrap's classes, mixins, etc., through the namespace call #bootstrapRef >, making it possible to use those in your own defined classes, etc.

I have not fully tested if there are any bugs to this, it should just work theoretically.

like image 57
ScottS Avatar answered Oct 14 '22 03:10

ScottS