zoukankan      html  css  js  c++  java
  • [SCSS] Use Standard Built-in SCSS Functions for Common Operations

    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

  • 相关阅读:
    一个人的旅行 dij(),评测的时候有点惨
    CodeFroce Round 340 div2 E XOR and Favorite Number【莫队算法】
    [HihoCoder-1185] 连通性·三 【tarjan+缩点】
    2017百度之星初赛(A)1001,1005,1006解题报告
    HDU 5961&AOJ 821 传递
    pair
    优先队列 priority_queue
    ccf 201903-5
    memset 和 fill 的区别
    ccf 20190302
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6719288.html
Copyright © 2011-2022 走看看