{"id":11677,"date":"2014-02-05T14:24:52","date_gmt":"2014-02-05T08:54:52","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=11677"},"modified":"2014-02-05T15:07:38","modified_gmt":"2014-02-05T09:37:38","slug":"less-is-more","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/less-is-more\/","title":{"rendered":"LESS is More"},"content":{"rendered":"

Ok Now, CSS<\/strong> is fine and all but it is a tedious process to cover all the different states and selectors.
\nAnd if your Stylesheets are un-organized like mine(confession?) then you would know it is painful, any change breaks so many things and when it doesn’t you know you have missed a couple of selectors that need to be updated.<\/p>\n

So in order to be a bit more organized with some peace of mind we can use some of the CSS pre-processors<\/strong> which can help a great deal, making sense of what you’ve written is better than your plain old CSS. <\/p>\n

Now there are many pre-processors of CSS but LESS is something i believe is more balanced between ease and power, which is a good thing.<\/p>\n

\n

What is LESS<\/h2>\n

To put it simply it is a Super-set of CSS, Allowing us to use variables, operations and mixins which makes our life easier.<\/p>\n

Wouldn’t it be great if I defined a color once and use that everywhere,
\nonly having to change it at a single place?<\/p><\/blockquote>\n

Wait did i just say variables? Quite a few times while writing CSS <\/strong>you would have thought well i am using a this particular color throughout and if i have to change it, i would have to replace it everywhere, followed by some occasional swearing <\/em>(I’m not judging), wouldn’t it be great if i defined a color once and use that everywhere and while updating only have to change at a single place, LESS <\/strong>provides us the same.<\/p>\n

\n

How do i use it<\/h2>\n

Using less is very simple and straightforward, It can run in the browser, or server (via NPM<\/strong>).<\/p>\n

Lets keep it simple and use it on the server by compiling it to normal browser friendly CSS.<\/p>\n

First we need to install LESS<\/strong>, using our trustworthy NPM (requires Node.js) we can do :<\/p>\n

$ npm install -g less<\/code><\/p>\n

This will install it Globally <\/strong>i.e it can be run from the command line from anywhere.<\/p>\n

To convert our `.less` files to CSS<\/strong> we need to compile it using the less compiler we just installed, like:<\/p>\n

$ lessc styles.less styles.css<\/code><\/p>\n

And we can use this CSS file as we normally do.<\/p>\n

\n

Getting to know LESS<\/h2>\n

Now that we know how to install and compile LESS<\/strong>, we can move onto LESS <\/strong>itself and see what all it provides.<\/p>\n

>> Variables<\/h3>\n

Variables in LESS <\/strong>are similar to any programming language out there, you simply define a variable with a specific name and value, and then you can use it any where in the file.<\/p>\n

LESS <\/strong>variables are actually constants meaning they are defined only once.<\/p>\n

@my_awesome_text_color: #bada55;\r\n@pad_10: 10px;\r\n\r\nh1, h2, h3, h4 {\r\n    color: @my_awesome_text_color;\r\n}\r\n.some-class {\r\n    color: @my_awesome_text_color;\r\n    padding: @pad_10;\r\n}\r\n<\/code><\/pre>\n
In the above example we defined two variables, namely @my_awesome_text_color<\/code> and @pad_10<\/code>, which we can use in our entire file since they are defined on top of the file outside of any rules. Variables can be defined inside of rules as well, but then they will only be accessible inside that rule only.<\/p>\n
If need arises to update the values, we simply change at one place, and voila. Easy, huh !<\/p>\n
\n
Mathematical Operations<\/h2>\n
We can perform basic mathematical operations on variables in LESS such as Addition, Multiplication, Subtration, Division.<\/p>\n
@my_value: 10px;\r\n\r\np.some-class {\r\n    padding: @my_value + 2;\r\n    border: @my_value;\r\n}<\/code><\/pre>\n
Here we simple performed a simple addition to a variable. Manipulating variables is really easy.<\/p>\n
We can do similar things to colors, i.e. we can add, subtract colors from colors.
\nConfusing? let’s see an example:<\/p>\n
@my_color: #990055;\r\n\r\np.some-class {\r\n    \/* color will be #CC3388 *\/\r\n    color: @my_color + #333333;\r\n\r\n    border: 1px solid @my_color + #111111;\r\n}<\/code><\/pre>\n
Here we are performing the same basic calculations, but on colors, which is very powerful once put into action.<\/p>\n
>>  Color Functions<\/h3>\n
Apart from adding and subtracting color, we can also use some inbuilt functions such as saturate(), desaturate(), lighten(), darken()<\/strong> etc. on colors.<\/p>\n
Let’s see some examples:<\/p>\n
@my_color: #ffdd00;\r\n\r\n#left {\r\n    background: lighten(@my_color, 20%);\r\n}\r\n#middle {\r\n    background: @my_color;\r\n}\r\n#right {\r\n    background: darken(@my_color, 20%);\r\n}<\/code><\/pre>\n
\"\"<\/p>\n
@my_color: #0088aa;\r\n#left {\r\n    background: desaturate(@my_color, 40%);\r\n}\r\n#right {\r\n    background: saturate(@my_color, 40%);\r\n}<\/code><\/pre>\n
\"\"<\/p>\n
There you go, easily manageable color modifications using these functions rather than fiddling with exact Hex equivalents.<\/p>\n
\n
Rule Nesting<\/h2>\n
Remember specifying multiple different ruls within a specific selector? Something along the lines of:<\/p>\n
#box p { ... }\r\n#box article { ... }\r\n#box article span { ... }<\/code><\/pre>\n
and so on …<\/p>\n
Now if we have to change any of that, we would have to make a guess as to which rules will\/will not be affected by the change, which most of time are not on the money. Now have a look at the following:<\/p>\n
#box {\r\n    article {\r\n        span { ... }\r\n    }\r\n    p { ... }\r\n    .some-class { ... }\r\n}<\/code><\/pre>\n
Wow, that looks so obvious, it is simlar as the HTML <\/strong>markup we write, intuitive … eh!<\/p>\n
No more wild guesswork, easy to manage, produces the same CSS we are used to. It is so obvious that this should be in actual CSS <\/strong>spec.<\/p>\n
\n
Mixins<\/h2>\n
Reuse, anybody. Mixins are basically rules that we can use wherever we want to and only writing the actual rule once.<\/p>\n
Let’s see mixins <\/strong>in action:<\/p>\n
.red-border {\r\n    border: 1px solid #d00;\r\n}\r\n.some-class {\r\n    padding: 10px;\r\n    color: #fff;\r\n    .red-border;    \/\/mixin\r\n}<\/code><\/pre>\n
Wait, what? Yup we used another rule without rewriting anything, sweet huh !<\/p>\n
But wait there’s more .. (Yup, I have watched too many TeleBrands Ads!)<\/p>\n
If you think that is pretty cool, wait till you see this:<\/p>\n
.red-border (@size) {\r\n    border: @size solid #d00;\r\n}\r\n.some-class {\r\n    padding: 10px;\r\n    color: #fff;\r\n    .red-border(3px);    \/\/parametric mixin\r\n}<\/code><\/pre>\n
This awesomeness is called parametric mixins<\/strong>, you can pass arguments to these mixins, making them work sort of like a function.<\/p>\n
Now, that is very usable, but lets assume you have a similar sized border everywhere apart from a couple of places, then you pass same value from everywhere, which may not seem like a very re-usable idea, and you’re right, it’s not.<\/p>\n
So what can LESS <\/strong>provide for that, well default values:<\/p>\n
.red-border (@size:1px) {\r\n    border: @size solid #d00;\r\n}\r\n.some-class {\r\n    padding: 10px;\r\n    color: #fff;\r\n    .red-border;        \/\/1px border\r\n}\r\n.some-other {\r\n    .red-border(3px);   \/\/3px border\r\n}<\/code><\/pre>\n
Now that is useful, very useful indeed. Infact you can have as many arguments as you want.<\/p>\n
*Note<\/strong>: You may notice that LESS supports the multiline comments like CSS does, but it also supports those \/\/..<\/code> single line comments as well.<\/p>\n
\n
Strings<\/h2>\n
Quite a few times we may want to use arbitary strings in variables such as image paths etc. But how can we store the path and then append more as per our need. For example we have a url http:\/\/somesite.com\/assets\/img\/<\/code> which we want to use in our stylesheets, since the URL will be same, it makes sense to keep it in a variable, but the actual asset name will be different, so how do we append that to our URL?<\/p>\n
Like this:<\/p>\n
@images: \"http:\/\/somesite.com\/assets\/img\";\r\n\r\n.img1 {\r\n    background: url('@{images}\/img1.jpg');\r\n}\r\n.img2 {\r\n    background: url('@{images}\/img2.jpg');\r\n}<\/code><\/pre>\n
We use the { .. }<\/code> to specify string interpolation to achieve the same.<\/p>\n
\n
Now that we have seen the absolute power and simplicity of LESS <\/strong>Pre-processor, it should be much less effort to manage and write highly re-usable and effective CSS.<\/p>\n
We can also use various build tools such as GRUNT <\/strong>etc. to automate the process of compiling and minifying these *.less<\/strong> files to CSS, but that is another topic in itself. Hope you enjoyed this basic introduction of LESS<\/strong> CSS.<\/p>\n
Till next time,
\nCiao.<\/p>\n","protected":false},"excerpt":{"rendered":"
Ok Now, CSS is fine and all but it is a tedious process to cover all the different states and selectors. And if your Stylesheets are un-organized like mine(confession?) then you would know it is painful, any change breaks so many things and when it doesn’t you know you have missed a couple of selectors […]<\/p>\n","protected":false},"author":85,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":0},"categories":[1],"tags":[245,1302,1156,1303],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/11677"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/85"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=11677"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/11677\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=11677"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=11677"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=11677"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}