hanami/chat

I got LESS to work with Hanami!:D
I was going to post the whole troubleshooting process, but it would be too long, so I'll just reiterate what worked for me. This presupposes that your stylesheet file is called styles.css.less. The .less suffix is mandatory.

Some links first:
LESS precompiler site: http://lesscss.org/
Direct link to JS file: https://cdnjs.cloudflare.com/ajax/libs/less.js/3.9.0/less.min.js
W3.CSS download page: https://www.w3schools.com/w3css/w3css_downloads.asp
Direct link to main W3.CSS stylesheet: https://www.w3schools.com/w3css/4/w3.css

The setup:
Install therubyracer and less gems:

gem install therubyracer
gem install less

Put the following lines in the Gemfile file:

gem 'therubyracer'
gem 'less'

In the application.html.erb file of your app, put the following lines:
<%= stylesheet 'styles' %> (without .css.less suffixes!!!) after the other stylesheets
and
<%= javascript 'less.min' %> (with or without the .js suffix) just before the end of the body.
Note that if you use a CDN, you will likely have to modify the Content Security Policy to allow access.

Put the styles.css.less file (with the .css.less suffixes) in your apps/<YourApp>/assets/stylesheets folder and the less.min.js (with the .js suffix) in your apps/<YourApp>/assets/javascripts folder (if you're using it locally).

That's it!

The use:
If you use other stylesheets and want to use their classes in mixins, you first need to import them. In the styles.css.less file, add the following line at the beginning (the example is for the W3.CSS stylesheet):

@import (less) "w3.css";

Then you can do the following, for example:

.tmsr-card-list-item-link-index{
    .w3-padding();
}
select {
    .w3-select()
}
.tmsr-form-row{
  .w3-section();
}
.tmsr-form-row:extend(.w3-row-padding all){}
.tmsr-form-field2:extend(.w3-row-padding, .w3-col, .w3-half all){}

Note, the ":extend" pseudo-class and the "all" keyword with the last two entries. The ":extend" pseudo-class basically extends your class with the W3.CSS class. The "all" keywords means that it will find all instances. In principle, I think you could do all entries with ":extend", but I haven't tested it. The reason for both types of entries is because some classes break LESS. Which ones you'll have to figure out for yourself.

Anyway, it would be nice if someone could independently MTC this, to make sure nothing else on my setup affected this. I tried this twice and it worked.

Other thant that, happy preprocessing!:D