Less Compiler for Linux
Although using node.js
version is recommended, you can install less as ruby gem:
sudo apt-get install rubygems1.8 ruby1.8-dev
sudo gem install rubygems-update
sudo gem update rubygems
sudo gem install less
and than use lessc
which is in /var/lib/gems/1.8/bin/lessc
, so you may want to create symlink:
sudo ln -s /var/lib/gems/1.8/bin/lessc /usr/bin/
or add ruby gems dir to PATH
variable:
export PATH=/var/lib/gems/1.8/bin:$PATH
EDIT:
Using lessc
as described here:
Command-line usage
Less comes with a binary, which lets you invoke the compiler from the
command-line, as such:$ lessc styles.less
This will output the compiled CSS to stdout, you
may then redirect it to a file of your choice:$ lessc styles.less > styles.css
To output minified CSS, simply pass
the-x
option.
linux less compiler watch for @import updates
You can use Grunt and especially grunt-contib-watch, see Grunt, Less, and File Watching for an example.
Notice that also the client side less.js compiler has got a watch function, see http://lesscss.org/usage/#using-less-in-the-browser-watch-mode.
How to automatically compile LESS into CSS on the server?
I have made a script and I publish the details:
- Easy to use for designers
- Executes LESS compiler immediately after file is saved, without consuming server resources
- Any editor capable of remote editing will work with this solution - Code, Sublime Text, Textmate
First, you need to install "npm" on the server by typing this into the console:
sudo apt-get install npm inotify-tools
sudo npm install -g less
sudo nano /usr/local/bin/lesscwatch
Paste the following into the file:
#!/bin/bash
# Detect changes in .less file and automatically compile into .css
[ "$2" ] || { echo "Specify both .less and .css files"; exit 1; }
inotifywait . -m -e close_write | while read x op f; do.
if [ "$f" == "$1" ]; then.
lessc $f > $2 && echo "`date`: COMPILED";.
fi
done
Save, exit, then execute:
sudo chmod +x /usr/local/bin/lesscwatch
You are all done. Next time you need to work with your LESS files, you will need to open terminal (Coda has a built-in), go to the folder of your file (using cd) and execute this:
lesscwatch main.less main.css
It will output information about successful compilations or errors. Enjoy.
Less CSS compiler on Ubuntu: How to watch dependencies and compile on save
If your less files are stored in subfolders of less/
, you can watch for changes with inotifywait:
sudo apt-get install inotify-tools
Then create a autocompile.sh
file:
#! /bin/bash
while inotifywait -r less/*
do
lessc less/main.less > css/main.css # your compile command
done
Don't forget to give it execution rights:
chmod u+x autocompile.sh
And run it:
./autocompile.sh
Your compile command will be run every time a file in less/
will be modified.
LESS CSS on Windows
I think I found the problem. In my first installation I installed to C:\Program Files\Ruby
so I uninstalled and tried the default 'C:\Ruby' install path. Seems to fix the problem and it now works correctly. Thanks.
Current state of LESS CSS on Linux
lessphp is a LESS compiler written entirely in PHP, making it very easy to run on the server side if you're already using PHP. It was finally just added to Packagist yesterday! You can install it on a project to project basis using composer. Here is an example composer.json file for declaring it as a dependency to your own project:
{
"require": {
"leafo/lessphp": "dev-master"
}
}
Related Topics
Is There a Reason Why CSS Doesn't Support Ids and Classes, Starting from Numbers
Purpose of *:Before, *:After Rule Without Content Property
How to Efficiently Load Google Fonts in Nuxt
How to Override Global CSS in a CSS Module File
Is There a Functional Difference Between > *:First-Child and > :First-Child
Perspective and Translatez Moves Diagonally
The Behaviour of Top: Auto; Bamboozles Me
How to Hide the Background Underneath the Border
CSS - First Child Without Certain Class
:Nth-Letter Pseudo-Element Is Not Working
CSS Specificity or Inheritance
Pass Function or Mixin by Reference in SASS
Is It Possible Based on CSS to Create a Circle with Gradient Border and Transparent Inner
How to Fix Unexpected Column Order in Bootstrap 4
How to Use/Emulate Regex-Like Backreferences in Attribute Selectors