Lecture 1 - Introduction to Interiors for the Less Able - VDIS 10005 Interiors for the Less Able
Less - an Introduction
14
.less – Best CSS way An Introduction to less CSS framework By Jaydev Gajera
-
Upload
jaydev-gajera -
Category
Documents
-
view
347 -
download
2
Transcript of Less - an Introduction
.less – Best CSS way
An Introduction to less CSS framework
By
Jaydev Gajera
WHAT is CSS?
Are you joking?
We all know that Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. i.e. HTML
Good CSS looks like this:
Good CSS looks like this:
Redundant code
Multiple Classes
CSS looks good: Markup not so much:
.Less can help here
What is less ?
less is a dynamic stylesheet language. Less is available at lesscss.org It can be applied by
Variables Mixins Nested Rules Functions & Operations
VariablesVariables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code.
MixinsMixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments, as seen in the example below.
Nested RulesRather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.
Functions & OperationsOperations let you add, subtract, divide and multiply property values and colors, giving you the power to create complex relationships between properties. Operations should only be performed within parentheses in order to ensure compatibility with CSS.
Client-side usage
Link your .less stylesheets with the rel set to “stylesheet/less”
<link rel="stylesheet/less" type="text/css" href="styles.less">
Then download less.js from the top of the page, and include it in the <head> element of your page, like so:
<script src="less.js" type="text/javascript"></script>
Make sure you include your stylesheets before the script.
Winless WinLess is a Windows GUI LESS compiler. WinLess is a must-have for the
webdeveloper who uses Windows
Usage When you add a folder to WinLess (either via 'Add folder' or by dropping it
on the folder pane), WinLess will start watching the LESS files in it. WinLess will automatically recompile a less file when it is changed. If you have a folder called 'less' and a folder called 'css' on the same level,
add the parent folder. WinLess will then automatically use the css folder as output folder.
Question : How to use with with windows?Answer : Use Winless. Available at winless.org
Thank you
Have a best .less !
