Sweta Shrestha
shresthasweta.com.np
@sweet_anjell
Less
@brand-color:#F16622;
.container {
background: @brand-color;
}
Sass
$brand-color:#F16622;
.container {
background: $brand-color;
}
Stylus
brand-color = #F16622
.container
background brand-color
Maths and color operations
width: 200px * 4 - 300px; // =500px
color: #990033 + #666666; // =FF66CC
Color functions
$brand-color:#F16622;
$lighten-brand-color: lighten($brand-color,20%);
$saturate-brand-color: saturate($brand-color,20%);
Less
.border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
.rounded-btn {
.border-radius(4px);
}
Sass
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
.rounded-btn {
@include border-radius(4px);
}
Stylus
border-radius(n)
-webkit-border-radius n
-moz-border-radius n
-o-border-radius n
border-radius n
.rounded-btn
border-radius(4px)
nav {
width: 600px;
ul {
padding: 0;
li {
float: left;
a {
color: #333;
&:hover {
text-decoration: underline;
}
}
}
}
}
Output CSS:
nav { width: 600px; }
nav ul { padding: 0; }
nav ul li { float: left; }
nav ul li a { color: #333; }
nav ul li a:hover { text-decoration: none; }
@import "colors";
@import "typography";
@import "layouts";
Output CSS:
.container { width: 600px; margin: 0 auto; }
.container p { font-family: "ubuntu"; font-size: 15px; }
.container span { color: #333; background: #ccc; }
80% of the sass,less and stylus is the same.
The 20% that is different is in advanced usage.
@extend
@media
$button {
background: $blue;
color: #fff;
font-size: 16px;
}
.save-button {
@extend $button;
font-size: 20px;
}
.wrapper {
width: 940px;
margin: 0 auto;
@media only screen and (max-width: 940px) {
width: 100%;
}
}
Compass makes sass even more awesome.
Syntax
Language
@Keyframes
@keyframes pulse
0%,100%
-webkit-transform translateX(0)
20%,60%
-webkit-transform translateX(-10px)
40%,80%
-webkit-transform translateX(10px)
Less just doesn't have the features or power of SASS or Stylus.
SASS and Stylus both have similar features, a powerful plugin ecosystem and lots of css3 helpers.
HAPPY CODING :)