对less颜色函数

颜色值运算函数一共有11个

 

1).增加一定数值的颜色饱和度：saturate()

2).降低一定数值的颜色饱和度：desaturate()

3).增加一定数值的颜色亮度：lighten()

4).降低一定数值的颜色亮度：darken()

5).降低颜色的透明度（或增加不透明度），令其更不透明：fadein()

6).增加颜色的透明度（或降低不透明的），令其更透明：fadeout()

7).给颜色（包括不透明的颜色）设定一定数值的透明度：fade()

8）.任意方向旋转颜色的色相角度（hue angle）:spin()

9).根据比例混合两种颜色，包括计算不透明度：mix()

10).完全移除颜色的饱和度，与desaturate(@colo,100%)函数效果相同：greyscale()

11).选着两种颜色相比较，得出那种颜色的对比度最大就倾向于对比度最大的颜色：contrast()

 

 

---

实例

 

body{
  c:hsl(90,80%,50%);
  c:saturate(hsl(90,80%,50%),20%);
}
div{
  width: 90px;
  height: 50px;
  font-size: 16px;
  text-align: center;
}
.ys1{
  background: hsl(90,80%,50%);
}
.ys2{
  background: saturate(hsl(90,80%,50%),20%);
}
.ys3{
  background: desaturate(hsl(90,80%,50%),20%);
}
.ys4{
  background: lighten(hsl(90,80%,50%),20%);
}
.ys5{
  background: darken(hsl(90,80%,50%),20%);
}
.ys66{
  background:hsla(90,80%,50%,50%);
}
.ys6{
  background: fadein(hsla(90,80%,50%,50%),50%);
}
.ys7{
  background: fadeout(hsla(90,80%,50%,50%),40%);
}
.ys8{
  background: hsl(90,80%,50%);
}
.ys9{
  background: fade(hsl(90,80%,50%),40%);
}
.ys10{
  background: hsl(10,90%,50%);
}
.ys11{
  background: spin(hsl(0,90%,50%),360);
}

.ys12{
  background: rgba(100,50,20,0.5);
}
.ys13{
  background: rgba(0,150,120,0.2);
}
.ys14{
  background: mix(rgba(100,50,20,0.5),rgba(0,150,120,0.2));
}
.ys15{
  background: hsl(90,100%,50%);
}
.ys16{
  background:contrast(hsl(90,100%,50%),#000000,#ffffff,100%)
}

 

下面是css文件的编译结果：

 

body {
  c: #80e619;
  c: #80ff00;
}
div {
  width: 90px;
  height: 50px;
  font-size: 16px;
  text-align: center;
}
.ys1 {
  background: #80e619;
}
.ys2 {
  background: #80ff00;
}
.ys3 {
  background: #80cc33;
}
.ys4 {
  background: #b3f075;
}
.ys5 {
  background: #4d8a0f;
}
.ys66 {
  background: rgba(128, 230, 25, 0.5);
}
.ys6 {
  background: #80e619;
}
.ys7 {
  background: rgba(128, 230, 25, 0.1);
}
.ys8 {
  background: #80e619;
}
.ys9 {
  background: rgba(128, 230, 25, 0.4);
}
.ys10 {
  background: #f2330d;
}
.ys11 {
  background: #f20d0d;
}
.ys12 {
  background: rgba(100, 50, 20, 0.5);
}
.ys13 {
  background: rgba(0, 150, 120, 0.2);
}
.ys14 {
  background: rgba(65, 85, 55, 0.35);
}
.ys15 {
  background: #80ff00;
}
.ys16 {
  background: #ffffff;
}

 

下面是我们的效果图：

 

但就颜色值运算来说，我们并不怎么用，但还是需要了解。