Doing MORE with LESS.
You guessed it right. This week’s Social Tables Tech blog post is about LESS CSS. In short, LESS is an open-source CSS pre-compiler and it is awesome! All of our applications here at Social Tables are styled with LESS mainly because it is compiled with Node. Since we are a Node based app, it makes sense to use it. If you’ve used CSS before and have been frustrated with organization and managing styles of your DOM elements, fret no longer about the mental overhead consisting of lines upon lines of CSS. LESS will solve most, if not all of your CSS problems. It sure did for us. Let’s take a walkthrough of some LESS basics:
Variables, Mix-Ins, and Nesting.
These are some simple, yet very effective LESS concepts we will be discussing [take a mental snapshot of those terms].
DOM Be Afraid
(for a different effect, say the title in different ways)
Recently, the Social Tables team made a switch from using Knockout JS to using React JS, to handle our front-end. You can read more about how we use React in this previous post. The idea with React is that features of an application are composed of small components (a search bar, a menu bar, a content area) that are put together to form one bigger component of an application(a main page, a search results page, etc). This style of building the front end of an application makes it more modular and easier to maintain. For example, a menu bar component might be used on the main page of an application and could also be used on another page of the app since the menu is a main feature that a user needs to navigate through an app. With this component style building in mind, lets talk about where LESS comes in and kicks butt.
Since we were just talking about a menu bar, lets build a menu bar with some HTML5 and style it with LESS. This menu bar component will be composed of: a logo and a nav element with 4 anchor tags.
The code looks like this:
When rendered, it looks like this:
We want it to look like this:
Think LESS
As you can see the component is broken down into the following elements with class names: menu-bar-component (parent), l0g0-box, logo, and link-box. This is where organization of your CSS comes in — with Nesting! Here’s the LESS code of the styled menu bar:
This LESS styling starts with the parent element, which is menu-bar-component. Within that menu-bar-component are child elements with classes logo-box and link-box, so on and forth with their children. Styling with LESS is much easier and more organized. It allows you to start thinking and styling based on components.
Onward. Let’s say that you really like the background color (Social Tables Pink) of the links and want to use them in other places of your app. Instead of setting each items color to rgb(182, 101, 142), let’s go ahead and extract that and define a variable that holds this rgb value.
As you can see we extracted the rgb color and stored it at the top of our LESS style sheet as @socialtablespink (notice that the @ symbol is specific to LESS). We then use it set the background-color of the links. Awesome!
OK — Now lets say you really like how your anchors are styled and want to make other anchors look the same exact way in another component. Mix-Ins. Mix-Ins. Mix-Ins. Let’s go ahead and extract the styling from within the anchor brackets.
As you can see, we moved the anchor styling into a class called link-button. Now, we can use that link-button class as a mix-in anywhere in your stylesheet. Notice where the styling used to be for the anchor tags — we included .link-button() — BOOM! Now all of your anchors in the link-box element have the styling defined in the link-button class. Isn’t that useful?
Since LESS is a css pre-compiler, let’s take a look at what happens when your CSS is compiled:
Huge difference right? The CSS is more verbose and not as organized. Imagine writing thousands of lines of this in your future app vs. writing in LESS. LESS has definitely been our weapon of choice when it comes to styling our front-end. Another option to check out is Sass, a feature rich CSS extension. We decided not to use Sass since it compiles with Ruby. It was simply a decision by us not to add Ruby as a dependency in our app. If LESS is appealing to you, definitely check out the documentation here if you want to see what other amazing things it can do. Hope this helped! Thanks for reading.
Tabler Out!
