Tag Archives: web development

Using Notepad++ to Easily Compile LESS CSS Files

Update (4/22/2012) – I found a utility called WinLess that will automatically compile LESS files into CSS, with some other useful options.  I have left the original article below, since it does give steps for setting up Node.JS/LESS and Notepad++ shortcuts.

——

Recently, I decided that I wanted to use LESS to easily generate CSS files, but I also wanted to compile these files before deploying on the web.  To accomplish this, I used Node.JS (with the LESS module) and Notepad++.  Currently, this Node.JS solution is preferred to the old Ruby compiler.  To use this setup, follow the steps below.

Installing Node.JS

To being the process, you will first need to install Node.JS.  This program basically allows you to easily use JavaScript as server-side code.  (This works with LESS because LESS is a JavaScript application.)  To begin the installation, follow these steps:

  1. Download the Node.JS installer.
  2. Run the installer with the default options.
  3. Verify that the node and npm binaries are included in the PATH by opening a command prompt and typing node. You will be given an error message if this is not available. Reboot if you see this error message.
  4. Create a directory for Node.JS modules. (I used C:\Node.JS)  This will be needed to setup your LESS module, and other modules if you choose to examine Node.JS further.

Installing the Node.JS LESS Module

Next, LESS will need to be installed.  If you are not familiar with LESS, please review their site to see the benefits of using this system instead of hard-coding your CSS files.  To install the LESS module, follow these steps:

  1. Open the command prompt.
  2. CD to your Node.JS module directory (created on step 3 above, C:\Node.JS in my case).
  3. Run this command: npm install less
  4. Take note of the lessc cmd file and its location. In my case, it is stored here: C:\Node.JS\node_modules\.bin\lessc.cmd

Create the Run Command Shortcut in Notepad++

Once the lessc.cmd file is installed, we can configure Notepad++ to compile our LESS files into CSS. Follow these steps to map Alt+F5 as a compile shortcut:

  1. Open Notepad++ and create a simple .less file. Make sure to set the encoding type to ANSI to avoid syntax error messages.
  2. Access the Run dialog box in Notepad++ by clicking Run->Run.
  3. Entering the following text into the Run dialog box (including the quotes):
    • "C:\Node.JS\node_modules\.bin\lessc.cmd" -x "$(FULL_CURRENT_PATH)" > "$(CURRENT_DIRECTORY)\$(NAME_PART).css"
    • Be sure to replace C:\Node.JS\node_modules\.bin\lessc.cmd with the location of your lessc.cmd.
    • The -x option tells lessc to output minified CSS.
  4. Click the save button.
  5. Enter a descriptive name, such as LESS Compile.
  6. Select the key combination of your choice. I used ALT+F5.
  7. Test the command on your less file.  If the command worked, you will see a new CSS file in the same directory as your less file.

Other Tweaks

It is possible to tweak this process in other ways if you do not wish to always save the CSS file in the same directory as the LESS file.  For example, you could create your own CMD, BAT, or .NET app to run the less compiler with your own options.  As always, feel free to comment with questions or additions to these steps.

Free CSS Dropdown Menu (with iPhone quick tip)

Recently, I picked up the LWIS.NET CSS Dropdown Menu for a project that I’ve been working on.  In my opinion, this is a great menu system with a few different templates (horizontal & vertical) for easy customization.

The one trick that I picked up when using this template is that you need to add some code to get the drop down effect to work.  Basically, adding onmouseover="" inside the li elements with submenus will allow the hover CSS events to perform as intended.  By default, the iPhone will ignore hover CSS events unless you specify a onmouseover event handler (even if it is blank).  Thanks to commenter twenty205 for the original idea.