Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Destacado
Destacado (20)
Similar a LESS CSS Processor
Similar a LESS CSS Processor (20)
Último
Último (20)
LESS CSS Processor
- 2. 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
- 3. LESS BENEFITS Organize css Simplify css >> Less css code Easier to change css Easier to understand styling SVEN HOMAN @COPY 2013
- 4. EXAMPLES EX 1: Variables, compilation, tools EX 2: Mixins – simple, parametric EX 3: Parametric mixins with Media Queries SVEN HOMAN @COPY 2013
- 5. 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> SVEN HOMAN @COPY 2013
- 6. 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;} SVEN HOMAN @COPY 2013
- 7. 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;} SVEN HOMAN @COPY 2013
- 8. 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! SVEN HOMAN @COPY 2013
- 9. EX 2: HTML <div id="div1">Box number 1</div> <div id="div2">Box number 2</div> <div id="div3">Box number 3</div> SVEN HOMAN @COPY 2013
- 10. 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; } ……. SVEN HOMAN @COPY 2013
- 11. 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); } ……. SVEN HOMAN @COPY 2013
- 12. 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 SVEN HOMAN @COPY 2013
- 13. 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;} } SVEN HOMAN @COPY 2013
- 14. MORE FEATURES • Imports • Access to browser environment • Functions • Watch! SVEN HOMAN @COPY 2013
- 15. SUMMARY Think about CSS and styling like a programmer. Less code Better organization Easier to change styling Easier to understand styling SVEN HOMAN @COPY 2013
- 16. 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 SVEN HOMAN @COPY 2013
- 17. SVEN HOMAN @COPY 2013