LESS CSS Processor

ABOUT ME
Name: Sven Homan
Employed: Self
Title: Programmer / Developer
•

12 yrs business software development with ASP.NET, SQL Server,
Access, JQuery, HTML, Javascript

•

4 yrs mobile application development

•

SCRUM master

Hobbies: Learning new technologies.

SVEN HOMAN @COPY 2013

LESS BENEFITS
Organize css
Simplify css
>> Less css code
Easier to change css
Easier to understand styling


EXAMPLES
EX 1: Variables, compilation, tools
EX 2: Mixins – simple, parametric
EX 3: Parametric mixins with Media Queries


EXAMPLE 1 HTML
<html>
<body>
<p><h2>This is h2 text</h2></p>
<p><h2>This is a link</h2></p>
<form action="“ id=“submitFrm”>
Name: <input type="text" />
Password: <input type="password" />
<input type="submit" value="This is a button" />
</form>
</body>
</html>


EX 1 CSS
/* Colors for my Website
#ff9900 - Orange - used for links and highlighted items

#cccccc - Light Gray - used for borders
#333333 - Dark Black - Used for dark backgrounds and heading text color
#454545 - Mid Black - Used for general text color
*/
body { background: #333333; color: #454545; }

a { color:#ff9900; }
h1, h2, h3, h4, h5, h6 { color: #333333; }
#submitfrm{color:#fff;background:#d24444;border:1px solid
#b02222;padding:5px 12px;}


EX 1 LESS
/* Colors for my Website */
@color-orange: #ff9900;
@color-gray_light: #cccccc;
@color-black_dark: #333333;
@color-black_medium: #454545;
body { background: @color-gray_light; color: @color-black_medium; }
a { color: @color-orange; }

h1, h2, h3, h4, h5, h6 { color: @color-black_dark; }
@form-color: #d24444;
#submitfrm { color:#fff; background:@form-color; border:1px solid @form-color #222; padding:5px 12px;}


EX 1: COMPILE LESS CLIENT SIDE
<!--<link href="style1.css" rel="stylesheet" type="text/css"/>
<link href="style1.less" rel="stylesheet/less" type="text/css"/>
<!--<script src="less.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/less.js/1.3.1/less.min.js"
type="text/javascript"></script>
Style1.less must come before less.js!

EX 2: HTML
<div id="div1">Box number 1</div>


EX 2: LESS SIMPLE MIXIN
@red: #610000;
@light_red: @red + #333;
@dark_red: @red - #333;
@header-font: cursive;
@header-font-color: #fff;
.base_font {
font-family: @header-font; font-size: 30px; color:@header-font-color;

}
#div1 { background-color: @dark_red; width: 300px; height:100px; .base_font; }
…….


EX 2: LESS PARAMETRIC MIXIN
@red: #610000;
@light_red: @red + #333;
@dark_red: @red - #333;
@header-font: cursive;
@header-font-color: #fff;
.base_font (@size) {
font-family: @header-font; font-size: @size; color:@header-font-color;

}
#div1 { background-color: @dark_red; width: 300px; height:100px; .base_font (40px); }
…….


EX 3: LESS & MEDIA QUERIES
//smartphone
@media only screen and (max-device-width: 641px) {
.C(2);
}
//tablets
@media only screen and (min-device-width: 800px) and (max-device-aspect-ratio: 1/1) {
.C(2);
}
//desktop
@media (min-device-width: 800px) and (min-device-aspect-ratio: 1/1) {
.C(1);
}

..continued


EX 3 ..CONT
.C(@wF){
@main-width: (200px * @wF);
@main-height: (100px * @wF);
@bg-color1: #e6e8e9;
@bg-color2: #0f729b;
@font-size-base: 15px;
@font-size-title: 20px;
.base_font {
color: red; }
.title_font {
white; }

font-family: helvetica;
.base_font;

font-size: (@font-size-base * @wF);

font-size: (@font-size-title * @wF);

font-weight: normal;

font-weight: normal;

#div1 { background-color: @bg-color1; width: @main-width; height:@main-height;

color:

.title_font;}

#div2 { background-color: @bg-color2; width: @main-width; height:(@main-height) - 20px;

.base_font;}

#div3 { background-color: @bg-color2; width: @main-width; height:(@main-height) - 30px;

.base_font;}

}


MORE FEATURES
•

Imports

•

Access to browser environment

•

Functions

•

Watch!


SUMMARY
Think about CSS and styling like a programmer.
Less code
Better organization
Easier to change styling
Easier to understand styling


RESOURCES
1. http://lesscss.org/
2. http://www.amazon.com/Instant-LESS-CSS-Preprocessor-How/dp/178216376X/ref=sr_1_2?ie=UTF8&qid=1383703764&sr=82&keywords=LESS


LESS CSS Processor

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie LESS CSS Processor

Ähnlich wie LESS CSS Processor (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

LESS CSS Processor