Brian F Love
Learn from a Google Developer Expert focused on Angular, Web Technologies, and Node.js from Portland, OR.
Ad ·
Learn Angular the right way with Ultimate Courses

Starting with LESS

It's been on my list for awhile, and I was finally able to learn more about the LESS language.它是具有动态样式表的一种非常简单的方法。它允许您轻松重用样式,颜色,宽度和高度值等。

To get started, you should first read the basics over Next, you will need to install the LESS compiler on your Mac or PC. Then, you can start writing LESS. Finally, you will will compile your LESS code into a CSS file, which can then be included in your web site. For this article, I will be focusing on using LESS on my Mac with the Coda editor.


Simply put, LESS is a dynamic stylesheet language, or a CSS preprocessor. The important aspect is that LESS is dynamic. Let's get real basic. Remember when you first started creating web pages using static .html files? Then you realized there were languages like PHP that allow you to create web pages that are more dynamic, allowing you to pull content from various sources, such as databases or xml files. Just like PHP added the ability for you to create more dynamic web sites, so does LESS, in terms of your design rather than your content.


Installing LESS on your Mac

Let's dive into getting started. I will be using a Mac, so the instructions will be geared towards the Mac. We are going to:

  • InstallHomebrew. It makes it easy to install applications in your terminal.
  • InstallNode.js.
  • Install the Node Package Manager (npm).
  • Install lessc. It's a less compiler. You will use this to compile LESS to CSS.

To get started, open up your terminal application viaApplications>Utilities>终奌站. To install Homebrew, you will execute the following line of code:

$ ruby<(旋度-fsSkL

This will install Homebrew. Just follow along with the instructions in the setup. After completing the installation of homebrew, you want to first make sure you run:

$ brew doctor

This will ensure that you have everything configured for Homebrew to work. I received a couple of warnings, one of which indicated that there was not a c compiler: "You have no /usr/bin/cc". To resolve this, I installed the command line tools from Xcode:

  • Open Xcode, then choose Xcode > Preferences from the menu.
  • Go to theDownloadstab, and find theCommand Line Toolsdownload, and then clickInstall

As a prerequisite, you will also need to install the git command line tools. I already had this installed, but you can install git using homebrew as well. Execute the "brew install" command. We will also install Node.js using the same command:

$ brewinstallgit$ brew installnode

After the installation of node, homebrew will inform you that you also need to install the node package manager (npm). To do so, execute the following:


Next, we will set the NODE_PATH environment variable and install the less compiler:


You can verify that your install of the LESS compiler worked by executing "lessc -v", which should indicate which version of the LESS compiler you are running. I am running 1.3.0. I can now compile LESS into CSS using the lessc command line tool.

Compiling LESS on your Mac

Now that we have the lessc command line tool installed, we can execute a command to compile our LESS files into CSS. I am using a primarystyles.lessfile, which includes all of the necessary CSS files in the proper order as I want. This will result in compiling all of my .less files into a singlestyles.css文件。这是一个快速的片段p of my styles.less file:

@import'normalize.less';@import'mixins.less';@import'base.less';/ *大型移动设备(为什么不只是使用iphone?愚蠢的孩子。)* /@mediaonly screen and(min-width:481 px){@import'481up.less';}/*Tablets*/@mediaonly screen and(min-width:768px){@import'768up.less';}/*Desktop*/@mediaonly screen and(min-width:1030px){@import'1030up.less';}

To create my single styles.css file from the various .less files, I will run the following command:

$ lessc styles.less>../css/styles.css

Using Coda with LESS

The last thing that I wanted to mention, is that there is aLESS plugin for the Coda 2 editorthat enables you to compile all of your .less files into .css files with a simple click on the mouse. You will still need to install the lessc command line tool, as instructed above, in order for the plugin to work.

Final Thoughts

Simple put, if you are not using LESS or Sass, giddy up and get onboard. These are very cool languages that make CSS awesome again, not that CSS3 isn't sweet enough. Also, you might be tempted to use the less.js file to compile your .less files into CSS at runtime. This is fine for development and staging purposes, but you should not use this method in production.

Brian F Love

Hi, I'm Brian. I am interested in TypeScript, Angular and Node.js. I'm married to my best friend Bonnie, I live in Portland and I ski (a lot).