After long time I came back to post for LESS what I
learnt.
LESS is a
CSS pre-processor that enables customizable, manageable and reusable style
sheet for web site. LESS is a dynamic style sheet language that extends the
capability of CSS. LESS is also cross browser friendly.
What is a CSS Preprocessor?
CSS Preprocessors do not
replace CSS. In fact, preprocessors simply give us extra functionality such as
variables, mixins, operations and functions with which we can streamline how we
create and manage CSS files.
Preprocessors allow us to
define properties once and then reuse them throughout our project in a much
more dynamic way that plain CSS can’t.
What is LESS?
LESS
is a relatively new preprocessor, being only about 4 years old. It's often
compared to SASS, a slightly older preprocessor.Both LESS and SASS have their
roots in the Ruby programming language but are now used much more widely. LESS
is now based on Javascript.People use LESS in order to create a pre-determined
set of colors for their site. They can define a particular style once and then
re-use it wherever needed.
It enables
customizable, manageable and reusable style sheet for web site. LESS is a
dynamic style sheet language that extends the capability of CSS. LESS is also
cross browser friendly.
CSS Preprocessor is a scripting language that extends CSS and
gets compiled into regular CSS syntax, so that it can be read by your web
browser. It provides functionalities like variables, functions, mixins and operations that allows you to build dynamic CSS.
History
LESS was designed by Alexis Sellier in 2009. LESS is an open source. First
version of LESS was written in Ruby and in the later version it is replaced by
JavaScript.
Features
·
Cleaner
and more readable code can be written in an organized way.
·
We
can define styles and it can be reused throughout the code.
·
LESS
is based on JavaScipt and is super set of CSS.
·
LESS
is an agile tool that sorts out the problem of code redundancy.
Advantages
·
LESS
easily generates CSS that works across the browsers.
·
LESS
enables you to write cleaner and well organized code by using nesting.
·
Maintenance
can be achieved faster by the use of variables.
·
LESS
enables you to reuse the whole classes easily by referencing them in your rule
sets.
·
LESS
provides the use of operations that
makes coding faster and saves time.
Disadvantages
·
It
takes time to learn if you are new to CSS preprocessing.
·
Due
to the tight coupling between the modules, more efforts should be taken to
reuse and/or test dependent modules.
·
LESS
has less framework compared to older preprocessor like SASS, which consists of
frameworks Compass, Gravity and Susy.
How
to install LESS?
·
Step(1):We need NodeJs to run LESS examples. To download NodeJs, open
the link https://nodejs.org/en/
·
Step(2): Next, run the setup to install the Node.js on
your system.
·
Step(3): Next, install LESS on the server via
NPM(Node package manager). Run the following command into the command prompt.
npm install –g less
·
Step(4): Next, after successful
installation of LESS, you will see following lines on the command prompt –
· -- less@2.6.1
· +-- errno@0.1.4
· | `-- prr@0.0.0
· +-- graceful-fs@4.1.3
· +-- image-size@0.4.0
· +-- mime@1.3.4
· +-- mkdirp@0.5.1
· | `-- minimist@0.0.8
· +-- promise@7.1.1
· | `-- asap@2.0.3
· +-- request@2.69.0
· | +-- aws-sign2@0.6.0
· | +-- aws4@1.3.2
· | | `-- lru-cache@4.0.0
· | | +-- pseudomap@1.0.2
· | | `-- yallist@2.0.0
· | +-- bl@1.0.3
· | | `-- readable-stream@2.0.6
· | | +-- core-util-is@1.0.2
· | | +-- inherits@2.0.1
· | | +-- isarray@1.0.0
· | | +-- process-nextick-args@1.0.6
· | | +-- string_decoder@0.10.31
· | | `-- util-deprecate@1.0.2
· | +-- caseless@0.11.0
· | +-- combined-stream@1.0.5
· | | `-- delayed-stream@1.0.0
· | +-- extend@3.0.0
· | +-- forever-agent@0.6.1
· | +-- form-data@1.0.0-rc4
· | | `-- async@1.5.2
· | +-- har-validator@2.0.6
· | | +-- chalk@1.1.1
· | | | +-- ansi-styles@2.2.0
· | | | | `-- color-convert@1.0.0
· | | | +-- escape-string-regexp@1.0.5
· | | | +-- has-ansi@2.0.0
· | | | | `-- ansi-regex@2.0.0
· | | | +-- strip-ansi@3.0.1
· | | | `-- supports-color@2.0.0
· | | +-- commander@2.9.0
· | | | `-- graceful-readlink@1.0.1
· | | +-- is-my-json-valid@2.13.1
· | | | +-- generate-function@2.0.0
· | | | +-- generate-object-property@1.2.0
· | | | | `-- is-property@1.0.2
· | | | +-- jsonpointer@2.0.0
· | | | `-- xtend@4.0.1
· | | `-- pinkie-promise@2.0.0
· | | `-- pinkie@2.0.4
· | +-- hawk@3.1.3
· | | +-- boom@2.10.1
· | | +-- cryptiles@2.0.5
· | | +-- hoek@2.16.3
· | | `-- sntp@1.0.9
· | +-- http-signature@1.1.1
· | | +-- assert-plus@0.2.0
· | | +-- jsprim@1.2.2
· | | | +-- extsprintf@1.0.2
· | | | +-- json-schema@0.2.2
· | | | `-- verror@1.3.6
· | | `-- sshpk@1.7.4
· | | +-- asn1@0.2.3
· | | +-- dashdash@1.13.0
· | | | `-- assert-plus@1.0.0
· | | +-- ecc-jsbn@0.1.1
· | | +-- jodid25519@1.0.2
· | | +-- jsbn@0.1.0
· | | `-- tweetnacl@0.14.1
· | +-- is-typedarray@1.0.0
· | +-- isstream@0.1.2
· | +-- json-stringify-safe@5.0.1
· | +-- mime-types@2.1.10
· | | `-- mime-db@1.22.0
· | +-- node-uuid@1.4.7
· | +-- oauth-sign@0.8.1
· | +-- qs@6.0.2
· | +-- stringstream@0.0.5
· | +-- tough-cookie@2.2.2
· | `-- tunnel-agent@0.4.2
· `-- source-map@0.5.3
