Introduction
What is LESS?
"LESS is the dynamic stylesheet language" is a definition in LESS homepage (http://www.lesscss.org/)
It’s also called “dynamic” because it enriches CSS with many common features available in most modern dynamic programming languages (like variables for instance). During the development phase, you’ll be able to use all those new cool features and it will help you code way more efficiently.
If you're not familiar with LESS, you should take a bit look on it before, because you'll unable to find more detail about it in this thread.
Why do we stand here?
I had small research about LESS and know that it make our work with stylesheet more efficiently, more LESS code than now, and there are also several compilers which give us a correct stylesheet resource from LESS.
LESS is easy to use, I'm sure about that, that mean I don't touch anymore about LESS concept, syntax, how to use, how to build... but that is only the usage of LESS in simple example, not in real world as we are working on. I create this article to demonstrate about how to use LESS in GateIn efficiently, correctly and need a suggestion by reader to give some conventions for LESS code as well.
Back to GateIn, we have some special usecases with stylesheet, for example RTL framework (support for some RTL languages such as Arabic), resource merging (merge some separated resources to only one for performance), or resource caching... I'll address them on a case by case basis as following.
Case Study
RTL Framework
What is?
GateIn has been required to support as much language as possible, including languages written right-to-left (http://en.wikipedia.org/wiki/Right-to-left). Today, user can try the cool feature with Arabic language, almost thing are supported: text, image, element position are changed direction from right to left.
So, how did it work?
GateIn has introduced SkinService for these duties, and also require a convention for that, you can see in a resource Stylesheet.css for more detail, GateIn uses pattern
{code}
/* orientation=lt */
{code}
for Left - To - Right style
and
{code}
/* orientation=rt */
{code}
for Right - To - Left style
Depend on which language style, a line of code with the pattern at the end will be used as response stylesheet.
As I considered before, we'll use LESS as alternative one, that mean we have no SkinService, no pattern in stylesheet resource, but we 'till have to support RTL languages in GateIn, stylesheet for displaying is depended on which language style chosen by user
What is solution with LESS?
If you've taken a look on LESS or refer here (http://www.lesscss.org/#-mixins), you'll be able to know about MIXIN concept. And I'll use the cool feature to solve above our problem with RTL language. Let see this stuff
{code}
// Convention for RTL
@dir: right;
.blah {
color: red;
dir(@dir);
dir(left) {
padding-left: 20px;
background: ~"abc";
}
dir(right) {
padding_right: 20px;
background: ~"xyz";
}
}
{code}
and compiled CSS is
{code}
.blah {
color:blue;
padding-right:20px;
background:abc;
}
{code}
if I change @dir to 'left', I'll get compiled CSS like that
{code}
.blah {
color:blue;
padding-left:20px;
background:xyz;
}
{code}
Now, do you understand how to solve RTL problem in GateIn without SkinService or pattern?
You can try yourself with my experiment by using online LESS compiler http://leafo.net/lessphp/#demo
Resource merging
LESS convention and process in GateIn
Mixin
Sometime, there are an absolute pain to write a stylesheet stuff, or have to CCNP (Copy-Cut-And-Paste) a terrible piece. For example:
{code}
.nav {
background: -webkit-gradient(linear, left top, left bottom, from(#b3cdcc), to(#718a89));
background: -moz-linear-gradient(-90deg, #b3cdcc, #718a89);
}
{code}
With LESS and mixin feature, we can do it more efficiently as following:
- Define a mixin
{code}
.grad-linear (@start:"", @end:"") {
background: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end));
background: -moz-linear-gradient(-90deg,@start,@end);
}
{code}
- Use mixin at several areas
{code}
.nav {
.grad-linear(#b3cdcc,#718a89);
}
{code}
We should create a list of properties which can reuse later, and put to separated file, maybe named mixin.less (look like twitter bootstrap), and put them to anywhere as core resource. I also found a LESS elements library which help us save time on define these mixin, and have to take care them, please refer to http://lesselements.com/ for more detail.
And we are able to customize the mixin, put new mixin on the dev process, and correct them for particular purposes
Importing
With LESS, a file can import other .less files, and all the variables, mixins in them will be available to the main file. We will use keyword @import "anyfile" to import a file to main less file.
In GateIn, we should provide a mechanism to manage some core resources for reusing in another place. 'Core resources' means about some global variable, mixin which useful and will be used at several LESS style. For example, .border-radius, opacity ... And some kind of resources like that should be configurable with a name such as core, util, extend .... and can be extended as well.
For example, after we define a module named core, we can use it in a LESS file like following:
{code}
@import module("core");
#div1 {
.border_in_core;
.background-color: red;
}
{code}
We should also define a convention for LESS hierarchy directory for management easily, avoid conflict in importing because LESS importing mechanism is based on content only, have no scope in imported files.
For each stylesheet module, there are separated into 3 parts: endpoint, library, main CSS definition.
- endpoint A LESS file is invoked to, and only contains @import to other parts
- library Only contains variables and mixins are used in the module. No CSS code
- CSS definition Doesn't define any global variables or mixins. It should only contains CSS code base, and use the variable, mixin defined in library
References
- http://lesscss.org : The official site for LESS language
- http://wearekiss.com/simpless : A simple LESS compiler
Comments