标签：变量 spi targe 相同 使用 颜色 port css width
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%); }
文章转载自别人，仅供本人学习使用，禁止转载
标签：变量 spi targe 相同 使用 颜色 port css width
原文地址：https://www.cnblogs.com/wurui-0922/p/10304439.html
