美文网首页
less-颜色值运算函数

less-颜色值运算函数

作者: 子心_ | 来源:发表于2019-06-14 15:28 被阅读0次
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;
}

相关文章

网友评论

      本文标题:less-颜色值运算函数

      本文链接:https://www.haomeiwen.com/subject/xpfyfctx.html