View
137
Download
1
Category
Preview:
DESCRIPTION
CSS Less training in Chandigarh.Big Boxx Academy leading web designing institute in Chandigarh Providing 100% job oriented course in Web Design. Call 8427023322
Citation preview
CSS preprocessorLESS is more or look SASS-y trying
Writing CSS with less training in Chandigarh
Definition
CSS preprocessors extend CSS, allowing designers and developers create
dynamic, module and re-usable CSS
So...
Benefits
• Reduces complexity
• Increase maintainability
• Frameworks
• Optimized CSS output
• Simplifies RWD implementation
Key Features
• Variables
• Mixins
• Nesting
• Operations
• Modular
LESS
• Inspired by original SASS
• Firstly written in Ruby, converted to JavaScript
• Client side (via less.js)
• Server side with NodeJs
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
npm install -g less
lessc styles.less
SASS / SCSS
• Implemented in Ruby
• Two Syntaxes
• SASS - Indent based, similar to HAML
• SCSS - CSS block
• Installationgem install sass
sass --watch style.scss:style.css
Variables
/* style.scss */
$color: #4D926F;
#header { color: $color;}h2 { color: $color;}
/* style.less */
@color: #4D926F;
#header { color: @color;}h2 { color: @color;}
MIXINS
/** style.scss **/
@mixin rounded-corners ($radius: 5px) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; -o-border-radius: $radius; border-radius: $radius;}
#header { @include rounded-corners;}#footer { @include rounded-corners(10px);}
/** style.less **/
.rounded-corners (@radius: 5px) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius;}
#header { .rounded-corners;}#footer { .rounded-corners(10px);}
Nesting
/** style.scss **/
#header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } }}
/** style.less **/
#header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } }}
Operations
/** style.scss **/
$the-border: 1px;$base-color: #111;$red: #842210;
#header { color: ($base-color * 3); border-left: $the-border; border-right: ($the-border * 2);}#footer { color: ($base-color + #003300); border-color: desaturate($red, 10%);}
/** style.less **/
@the-border: 1px;@base-color: #111;@red: #842210;
#header { color: (@base-color * 3); border-left: @the-border; border-right: (@the-border * 2);}#footer { color: (@base-color + #003300); border-color: desaturate(@red, 10%);}
Modules
/** _variables.scss **/
@base-color: #111;
/** style.scss **/
@import “variables”
#header { color: @base-color;}
/** variables.less **/
@base-color: #111;
/** style.less **/
@import-once ‘variables.less’
#header { color: @base-color;}
Responsive Patternmodules/ header/ _base.scss _responsive-320px-min.scss _responsive-768px-min.scss _responsive-1024px-min.scss_variables.scss_mixins.scss_responsive.scssapp.scss
/** app.less **/
@import “variables”;@import-once “mixins”;@import-once “modules/header/base”;@import-once “responsive”;
/** _responsive.less **/
@media (min-width:320px) { @import-once “modules/header/responsive-320px-min”;}
modules/ header/ _base.less _responsive-320px-min.less _responsive-768px-min.less _responsive-1024px-min.less_variables.less_mixins.less_responsive.lessapp.less
/** app.less **/
@import-once “_variables.less”;@import-once “_mixins.less”;@import-once “modules/header/_base.less”;@import-once “_responsive.less”;
/** _responsive.less **/
@media (min-width:320px) { @import-once “modules/header/_responsive-320px-min.less”;}
CSS Frameworks
Other tools
Features Not Covered...
• GUARDED MIXINS
• NAMESPACES & SCOPE
• CONTROL DIRECTIVES
• DEBUGGING
• SOURCE MAPS
Contact Details:
BigBoxx AcademyPhone 0172-4612244 ,+918427023322Address: S.C.O. 146-147,Basement, Sector 34-A,Chandigarh – 160034, IndiaEmail id: info@bigboxx.inWebsite : www.bigboxx.in
Recommended