1、变量
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;}2、混入
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*/}Less
/* 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 */}3、继承 （当我们需要为多个元素定义相同样式的时候，我们可以考虑使用继承的做法）
Sass
.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;}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;}和混入比较像4、引入
Sass 和 Less 关于导入是一样的
@ import "reset.css";@ import "file.{type}"; p { ?background: #0982C1;}4、颜色函数
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% */
完整的列表请看 Sass Documentation.
$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 */
完整的列表请看 LESS Documentation.
@color: #0982C1; h1 { ?background: @color; ?border: 3px solid darken(@color, 50%);}文章转载自别人，仅供本人学习使用，禁止转载
css 预处理器
原文地址：https://www.cnblogs.com/wurui-0922/p/10304439.html