IBM Worklight: Using LESS for smarter styling
Christian Karasiewicz 270005XS4E Visits (4100)
This blog post is contributed by Raeid Saqur, a mobile specialist and consultant with IBM Interactive Canada and AIS.
LESS is quickly gaining popularity in the design and developer community as a useful Cascading Style Sheets (CSS) preprocessor. The concept of using dynamic style sheets in design and code is not new. Existing CSS preprocessors include SASS, Stylus and Switch CSS, to name a few.
The main focus of this post is to illustrate how to set up LESS in an IBM Worklight project. I will be linking appropriate sites and resources for other aspects of using LESS, like compiler installation, usage and so on, in lieu of getting into the nitty-gritty details.
Why use LESS?
LESS allows you to use most CSS preprocessor functionalities, like dynamic style sheets, variables, mixins, selector inheritance, imports and so forth.
However, the quality that makes LESS my preferred CSS preprocessor is its CSS-like look and feel. It is very easy to understand, and the initial learning curve is flat for anyone with prior CSS experience, unlike some other CSS preprocessors. Anyone familiar with CSS should find the adoption and usage of LESS quite intuitive.
Detailed usage details and code snippets to clarify functionalities can be accessed at lesscss.org.
How to use in Worklight applications?
To make your life as a developer easier, it’s imperative to properly structure the .less files in your Worklight project. I will illustrate how I do it; however, you can always adopt or customize this based on your personal preference.
How does it work?
Let’s look at how things work from a bottom-up approach.
Segregate each view component of your app into distinct parts, ideally adhering to the model view controller (MVC) framework. Include the .less style sheet file for that view component within the view’s section. Rules specified within the view component will override any global styling rules in the master .less file.
To illustrate, let’s assume “sampleView” is a distinct view component of your app. This could be a view for the accounts summary page, or maybe the user profile page—you get the idea, right? Within the sampleView.less file, you will include all rules specific to the view component. For example:
@HeaderMrgTop:15px; @RowMrg:10px; @RowPadding:10px; @TabHeight:35px; //Background color @bck
Have a centralized “import” .less file where you import all the view-specific .less files in each view component. For example: