0

I'm styling a Hanami project and I'm using W3.CSS. I have a whole bunch of entities that are styled the same, so instead of having a myriad of identical styles across a hundred files, I want to use LESS to combine W3.CSS styles, so that if changes are necessary, I would only need to implement them in one location.

After hours of perusing Google, I got things working using therubyracer and less gems.

This is my working sample styles.css.less file:

@import (less) "w3.css";
@import (less) "w3-theme-blue.css";

.test-combined-container {
  .w3-container();
  .w3-card();
}
.test-center {
  .w3-center();
  .w3-theme();
}

This works.

However, there is one issue that I noticed, specifically with classes like w3-striped, w3-bordered, w3-hoverable, w3-hover-theme and w3-row. When using these classes, LESS says it finished as usual, but also throws the following error:

GET http://localhost:2300/assets/godmode/styles.css net::ERR_ABORTED 500 (Internal Server Error)

I suspected the issue was the use of pseudo-classes, but that turned out to be wrong.

I tried the following:

I tried importing W3.CSS stylesheets as css and inline. This didn't work.

Next I tested the "w3-hover-theme" class from the "w3-theme-blue.css".

I tried adding empty w3-hover-theme class before and after the import declaration. No error, but hover is not applied.

I tried adding empty w3-hover-theme class in an external css and importing it. No error, but hover is not applied.

I tried adding empty w3-hover-theme class in the w3-theme-blue.css file before the first use of the class together with the :hover pseudo-class. No error, but hover is not applied.

I retested with "color: red;" in the w3-hover-theme class, and that was applied, but the hover still didn't work.

So I added:

.test-center:hover {
  color: green;
}

This got hover to work, obviously, but that kinda defeats the purpose.

Can anyone point me in the right direction as to what the specific issue might be that some classes break LESS in Hanami and how to fix it/work around it?

EDIT: It's been suggested that this question is a duplicate. It's not. The suggested post is dealing entirely with LESS, I'm trying to "merge" W3.CSS classes with LESS and the issue I have is that it works with some classes but not others. I'm testing with extend, but haven't gotten a positive result yet.

Kristjan Brezovnik
  • 1
  • 2
  • In short: *mixins* is not what you really need (e.g. `.foo()` call matches `.foo` ruleset *only* and nothing but `.foo`, it does not match anything like `.foo:hover` etc.). What you're looking for is the [extend](http://lesscss.org/features/#extend-feature) feature (see [this collection](https://gist.github.com/seven-phases-max/cefc873a78fa12924462) of SO Q/As essentially similar to yours). – seven-phases-max Nov 25 '19 at 06:54
  • And even with `extend` be prepared to face a lot of issues with your approach (simply because Less was invented to write code from scratch - not for "reusing existing CSS libraries written for use in HTML and HTML *only*"). – seven-phases-max Nov 25 '19 at 06:56
  • "The suggested post is dealing entirely with LESS, I'm trying to "merge" W3.CSS classes with LESS" - you're missing the point. The post suggested as the duplicate is about *exactly* the same problem as you have: "reusing styles of CSS rulesets ("classes") in Less code" and the answer would be absolutely the same (-> "use `extend`"). It's totally irrelevant if these CSS rulesets are defined in a `less` or a `css` files (the files you still import as Less code anyway). – seven-phases-max Nov 25 '19 at 14:38
  • You probably want more input on your other problems - like "how do I debug/understand where/what is the actual error is?" - but that would be the another Q (and then you need to rephrase it, *if* it's the primary goal of the Q). So far just a single tip: if you get "Internal Server Error", *do not guess* what the error could be - check the server logs (there you'll find the exact error message from the Less compiler and the exact line in your Less code the error occurs). Otherwise you just waste your own time on doing random things that can't "fix" anything ("importing as css and inline" etc.) – seven-phases-max Nov 25 '19 at 14:47
  • *I'm testing with extend, but haven't gotten a positive result yet* - make sure to read till `extend all` (*including* this section). (Or at least do read that 5 Qs I linked above too - these are also essentially duplicates of this thing even if all are worded very differently, use different libraries etc. etc. - it's all the same question with all the same answer: `extend all`). – seven-phases-max Nov 25 '19 at 15:13
  • @seven-phases-max You were right!:D After some testing and several re-readings of the docks, I finally figured it out: `.tmsr-form-row:extend(.w3-row-padding all){}` `.tmsr-form-field2:extend(.w3-row-padding, .w3-col, .w3-half all){}` Now how do I upvote and accept? – Kristjan Brezovnik Nov 27 '19 at 19:28

0 Answers0