1. 边框颜色取自文本值

    边框颜色
          
    <div style="color: #3caadb;border: 4px solid currentColor;">边框颜色</div>

  2. currentColor 在渐变中使用

          
    <div
        style="height:100px;color: #3caadb;
        background: linear-gradient(to right, #fff, currentColor 100%);">
    </div>

  3. calc 自适应布局

    左边侧栏，width:200px;
    内容
          
    .calc-layout{
      display: flex;
    }
    .calc-side{
      width: 200px;
    }
    .calc-main{
      width: calc(100% - 200px);
    }    
    <div class="calc-layout">
      <div class="calc-side">左边侧栏，width:200px;</div>
      <div class="calc-main">内容</div>
    </div>

  4. 使用calc()创建CSS网格

    col-3
    col-4
    col-5
    
  .row{
    display: flex;
    height: 100px;
  }
  @function grid-width($cols) {
    @return calc(100% / var(--columns) * #{$cols} - var(--gutter));
  }
  @for $i from 0 through 12 {
    .col-#{$i} {
      width: grid-width(#{$i});
    }
  } 
  <div class="row">
    <div class="col-3">col-3</div>
    <div class="col-4">col-4</div>
    <div class="col-5">col-5</div>
  </div>

  5. 自定义变量

    
:root {
  --main-color: #4d4e53;
  --main-bg: rgb(255, 255, 255);
  --logo-border-color: rebeccapurple;
  --header-height: 68px;
  --content-padding: 10px 20px;
  --base-line-height: 1.428571429;
  --transition-duration: .35s;
  --p-margin: 20px;
}
p {
  margin: var(--p-margin, 0 0 10px);
}

.list {
  --list-font-size: 1rem;
  font-size: var(--list-font-size);
}

.list-highlight {
  --list-highlight-font-size: 1.5rem;
  font-size: var(--list-highlight-font-size);
}

  6. 通过自定义变量模拟 CSS 条件语句

    class="block"
    class="block" 
    
:root {
  --is-big: 0;
}

.is-big {
  --is-big: 1;
}

.block {
  padding: calc(
      25px * var(--is-big) +
      10px * (1 - var(--is-big))
  );
  margin-top: 5px;
  border-style: solid;
  border-color: #00b0e0;
  border-width: calc(
      3px * var(--is-big) +
      1px * (1 - var(--is-big))
  );
}