Mh Mehedi

Open Source Enthusiastic and Linux System Administrator

Configure LESS CSS at Sublime Text 3 on Ubuntu

CSS Preprocessors are a dynamic and efficient way of coding your stylesheets with reusability and structure. The most popular CSS Preprocessor is LESS. Today, I will show you the way of configuring LESS at Sublime Text 3 on your Ubuntu Machine. Don’t worry if you are a Windows / Mac user.

This project assumes you have Sublime Text 3 installed on your machine. For Mac there is a great APP CodeKit. You can build your LESS to CSS automatically by using this app. For Windows OS you can use Crunch. I was interested to use Crunch in my Ubuntu but Adobe Air already stopped developing AIR for Linux. So, I have to find a new way to run LESS.

At first Install package control for Sublime Text 3, open your terminal and run this commands one by one :

1 cd ~/Library/Application\ Support/Sublime\ Text\ 3/Packages/
2 git clone git://github.com/wbond/sublime_package_control.git Package\ Control
3 cd Package\ Control
4 git checkout python3
Restart Sublime Text 3 and you should have Package Control working.

 

Add LESS Syntax highlighter

1. Open Package Control CTRL + SHIFT + P
2. Type Install and press Enter
3. Search for LESS and hit Enter to install the package by Danro which is just called LESS.

Now, You have syntax highlighting for LESS in Sublime.

 

Add LESS Builder
1. Open Package Control CTRL + SHIFT + P
2. Type Install and press Enter
3. Search for LESS-build and hit Enter to install the package by Berfarah

 

Save Structure

1. Go to Home of your Ubuntu
2. Press CTRL+H, it will show hidden files.
3. Open .config then open Sublime Text 3 then open installed packages
4. Unzip LESS-Build.zip
5. Open the unzipped folder
6. Now open the properties of this file “changeLESSBuildType.sh”
7. Select permission tab and select Allow executing file as program.
8. Open this directory in terminal. then,
9. Run this command, chmod +x changeLESSBuildType.sh
10. After that run this ” ./changeLESSBuildType.sh ”
11. Type “1” hit enter.

You are now able to write LESS code by creating a new file with the .less extension. Once you have created your file, save it and click CTRL + B and you should see a CSS file created within the same folder as your LESS file. This is your compiled CSS. For Sublime Text 2 this steps are pretty similar. hit me back if you get any problem.

Previous

Redirect Users After Submitting Form, Contact Form 7

2 Comments

  1. Too much pain, I failed successfully, using koala and happy 🙂

Leave a Reply

Powered by WordPress & Theme by Anders Norén