语法
Sass
h1 {color: #0982C1;}
h1color: #0982c1
LESS
h1 {color: #0982C1;}
Stylus
/* style.styl */h1 {color: #0982C1;}/* omit brackets */h1color: #0982C1;/* omit colons and semi-colons */h1color #0982C1
变量
Sass
$mainColor: #0982c1;$siteWidth: 1024px;$borderStyle: dotted;body {color: $mainColor;border: 1px $borderStyle $mainColor;max-width: $siteWidth;}
LESS
@mainColor: #0982c1;@siteWidth: 1024px;@borderStyle: dotted;body {color: @mainColor;border: 1px @borderStyle @mainColor;max-width: @siteWidth;}
Stylus
mainColor = #0982c1siteWidth = 1024px$borderStyle = dottedbodycolor mainColorborder 1px $borderStyle mainColormax-width siteWidth
输出结果
body {color: #0982c1;border: 1px dotted #0982c1;max-width: 1024px;}
嵌套
嵌套语法
section {margin: 10px;nav {height: 25px;a {color: #0982C1;&:hover {text-decoration: underline;}}}}
输出结果
section {margin: 10px;}section nav {height: 25px;}section nav a {color: #0982C1;}section nav a:hover {text-decoration: underline;}
mixins(混入)
SASS
/* Sass mixin error with (optional) argument $borderWidth which defaults to 2px if not specified */@mixin error($borderWidth: 2px) {border: $borderWidth solid #F00;color: #F00;}.generic-error {padding: 20px;margin: 4px;@ include error(); /* Applies styles from mixin error */}.login-error {left: 12px;position: absolute;top: 20px;@ include error(5px); /* Applies styles from mixin error with argument $borderWidth equal to 5px*/}
LASS
/* LESS mixin error with (optional) argument @borderWidth which defaults to 2px if not specified */.error(@borderWidth: 2px) {border: @borderWidth solid #F00;color: #F00;}.generic-error {padding: 20px;margin: 4px;.error(); /* Applies styles from mixin error */}.login-error {left: 12px;position: absolute;top: 20px;.error(5px); /* Applies styles from mixin error with argument @borderWidth equal to 5px */}
STYLUS
/* Stylus mixin error with (optional) argument borderWidth which defaults to 2px if not specified */error(borderWidth= 2px) {border: borderWidth solid #F00;color: #F00;}.generic-error {padding: 20px;margin: 4px;error(); /* Applies styles from mixin error */}.login-error {left: 12px;position: absolute;top: 20px;error(5px); /* Applies styles from mixin error with argument borderWidth equal to 5px */}
输出结果
.generic-error {padding: 20px;margin: 4px;border: 2px solid #f00;color: #f00;}.login-error {left: 12px;position: absolute;top: 20px;border: 5px solid #f00;color: #f00;}
继承
SASS & STYLUS
.block {margin: 10px 5px;padding: 2px;}p {@extend .block; /* Inherit styles from '.block' */border: 1px solid #EEE;}ul, ol {@extend .block; /* Inherit styles from '.block' */color: #333;text-transform: uppercase;}
输出结果
.block, p, ul, ol {margin: 10px 5px;padding: 2px;}p {border: 1px solid #EEE;}ul, ol {color: #333;text-transform: uppercase;}
LESS
.block {margin: 10px 5px;padding: 2px;}p {.block; /* Inherit styles from '.block' */border: 1px solid #EEE;}ul, ol {.block; /* Inherit styles from '.block' */color: #333;text-transform: uppercase;}
输出结果
.block {margin: 10px 5px;padding: 2px;}p {margin: 10px 5px;padding: 2px;border: 1px solid #EEE;}ul,ol {margin: 10px 5px;padding: 2px;color: #333;text-transform: uppercase;}
颜色函数
SASS
lighten($color, 10%); /* returns a color 10% lighter than $color */darken($color, 10%); /* returns a color 10% darker than $color */saturate($color, 10%); /* returns a color 10% more saturated than $color */desaturate($color, 10%); /* returns a color 10% less saturated than $color */grayscale($color); /* returns grayscale of $color */complement($color); /* returns complement color of $color */invert($color);/* returns inverted color of $color */mix($color1, $color2, 50%); /* mix $color1 with $color2 with a weight of 50% *//*示例*/$color: #0982C1;h1 {background: $color;border: 3px solid darken($color, 50%);}
LESS
lighten(@color, 10%); /* returns a color 10% lighter than @color */darken(@color, 10%); /* returns a color 10% darker than @color */saturate(@color, 10%); /* returns a color 10% more saturated than @color */desaturate(@color, 10%); /* returns a color 10% less saturated than @color */spin(@color, 10); /* returns a color with a 10 degree larger in hue than @color */spin(@color, -10); /* returns a color with a 10 degree smaller hue than @color */mix(@color1, @color2); /* return a mix of @color1 and @color2 */@color: #0982C1;h1 {background: @color;border: 3px solid darken(@color, 50%);}
STYLUS
lighten(color, 10%); /* returns a color 10% lighter than 'color' */darken(color, 10%); /* returns a color 10% darker than 'color' */saturate(color, 10%); /* returns a color 10% more saturated than 'color' */desaturate(color, 10%); /* returns a color 10% less saturated than 'color' */
color = #0982C1h1background colorborder 3px solid darken(color, 50%)
运算符
body {margin: (14px/2);top: 50px + 100px;right: 100px - 50px;left: 10 * 10;}
浏览器相关处理
SASS
@mixin border-radius($values) {-webkit-border-radius: $values;-moz-border-radius: $values;border-radius: $values;}div {@ include border-radius(10px);}
LESS
.border-radius(@values) {-webkit-border-radius: @values;-moz-border-radius: @values;border-radius: @values;}div {.border-radius(10px);}
STYLUS
border-radius(values) {-webkit-border-radius: values;-moz-border-radius: values;border-radius: values;}div {border-radius(10px);}
编译结果
div {-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;}
如果觉得《css预处理器:Sass LASS Stylus》对你有帮助,请点赞、收藏,并留下你的观点哦!