提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

[SCSS] Use Standard Built-in SCSS Functions for Common Operations

for in use Common Functions operations STANDARD Scss
2023-09-14 08:59:18 时间

We can use javascript for color and opacity variations, math, list and map logic or to see if something exists. SCSS includes functions for a wide range of common use cases for logic in our styles. In this lesson we look at some of the more useful color functions to improve development velocity, readability, and simplify the code. Be sure to checkout all the SCSS functions: http://sass-lang.com/documentation/Sass/Script/Functions.html

 

$base: #24ea12;
$lighten_base: lighten($base, 25%);
$darken_base: darken($base, 25%);

$clb: complement($base);
$cllb: complement($lighten_base);
$cldb: complement($darken_base);

$light-color: scale_color($base, $alpha: -50%);
$dark-color: scale_color($base, $saturation: -35%);

.base {
  background-color: $base;
  color: $clb;
}

.lighten_base {
  background-color: $lighten_base;
  color: $cllb;
}

.darken_base {
  background-color: $darken_base;
  color: $cldb;
}

.linear-gradient {
  background-image: linear-gradient($clb, $cllb, $cldb);
  color: mix($base, yellow, 25%);
}


.hover {
  background-image: linear-gradient($base, $lighten_base, $darken_base);
  color: mix($base, yellow, 25%);
  &:hover {
    color: transparentize(mix($base, yellow, 25%), .5); // based on given color, add 0.5 opacity
  }
}

.darken-color {
  color: $dark-color;
}

.lighten-color {
  color: $light-color;
}






.container {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: 1fr 1fr 1fr;
  counter-reset: box;
  height: 100vh;
}

.box:before {
  counter-increment: box;
  font-size: 3em;
  content: counter(box);
}

.box {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
}

 

Github

相关文章