Create LESS mixin with class in external file W3.css - html

Question

I am creating a small personal project mainly with HTML and CSS, but I am new in this and have some problems. I want to use the W3.CSS framework but I don't want to explicitly use it in the html files (like <div class="w3-container">...) because I might want to use something else later and don't want to refactor every file. Googling I learned about less mixins I had the idea of using my own style.less file and from there import w3.css and inherit, for example, .w3-container class for header tags, which I believe cannot be done with only CSS. Anyway, what I am trying to do is:
#import "w3.css";
header {
.w3-container;
}
Both files, "style.less" and "w3.css", are on the same folder and I use the following command to try and compile it:
lessc style.less style.css
Which outputs the error:
NameError: .w3-container is undefined in <path to style.css> on line 3, column 2
I am probably not using less how it's supposed to be. I looked at other questions, for example this one but couldn't do it. I also noticed that my node.js and npm were really outdated: node: v0.12.4, latest: v5.11.0 npm: 2.10.1, latest: 3.8.7 but that wasn't it.
Why doesn't it work?
What other way can I avoid explicitly using classes such as "w3-container"?
Thanks.

Answer 1

Question part 1
With regards to the error:
NameError: .w3-container is undefined in on line 3, column 2
You've used .w3-container as a mixin, but the mixin hasn't been defined. You'd need to define the mixin like so:
#import "w3.css";
.w3-container() {
/*Styles to apply to the mixin would go here*/
}
header {
.w3-container;
}
However it doesn't sound like using a mixin was actually your goal.
Question part 2
With regards to your comment:
What other way can I avoid explicitly using classes such as "w3-container"
LESS compiles down to CSS, so there's no magic that LESS can provide in terms of selectors (such as aliasing W3.css), other than providing some extended functionality to reduce repetition and make your code more maintainable. If you don't want to add new CSS classes, your options are limited to using valid CSS selectors using a higher specificity. The example below is based on path. If w3.css contains:
header {
color: blue;
}
Then to target a header in a section you could use the more specific selector (in LESS):
section {
header {
color: orange;
}
}
This will compile to the CSS:
section header {
color: orange;
}
Question part 3
When you're trying to target an instance of an element of a particular class, it is important to prefix the class with & and include brackets for defining the properties to style like so:
header {
&.w3-container {
color: orange;
}
}
This will compile to the following CSS:
header.w3-container { color: orange; }
If you use .w3-container; by itself, LESS will assume you want to use a mixin here, and will throw the error from Question part 1 since there is no mixin defined with the name .w3-container.

Answer 2

#import (less) "w3.css";
header {
.w3-container;
}