css预处理器:Sass LASS Stylus
语法
Sass
h1 {
color: #0982C1;
}
h1
color: #0982c1
LESS
h1 {
color: #0982C1;
}
Stylus
/* style.styl */ h1 { color: #0982C1; } /* omit brackets */ h1 color: #0982C1; /* omit colons and semi-colons */ h1 color #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 = #0982c1 siteWidth = 1024px $borderStyle = dotted body color mainColor border 1px $borderStyle mainColor max-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 = #0982C1
h1
background color
border 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; }
posted on 2017-08-03 14:47 bobbizhen 阅读(1165) 评论(0) 编辑 收藏 举报