Weitere ähnliche Inhalte Ähnlich wie CSS Preprocessors: LESS is more or look SASS-y trying (20) Kürzlich hochgeladen (20) CSS Preprocessors: LESS is more or look SASS-y trying7. 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
8. SASS / SCSS
• Implemented in Ruby
• Two Syntaxes
• SASS - Indent based, similar to HAML
• SCSS - CSS block
• Installation
gem install sass
sass --watch style.scss:style.css
9. Variables
/* style.scss */
$color: #4D926F;
#header {
color: $color;
}
h2 {
color: $color;
}
/* style.less */
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}
10. 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);
}
11. 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 }
}
}
}
12. 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%);
}
13. 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;
}