• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • null 值

    null是其类型的唯一值。它表示缺少值,并且通常由函数返回以指示缺少结果。

    @use "sass:map";
    @use "sass:string";
    
    @debug string.index("Helvetica Neue", "Roboto"); // null
    @debug map.get(("large": 20px), "small"); // null
    @debug &; // null
    


    如果列表包含null,则从生成的 CSS 中,将null省略。

    scss 语句css 语句
    $fonts: ("serif": "Helvetica Neue", "monospace": "Consolas");
    
    h3 {
      font: 18px bold map-get($fonts, "sans");
    }
    
    h3 {
      font: 18px bold;
    }
    


    如果属性值为null,则完全省略该属性。

    scss 语句css 语句
    $fonts: ("serif": "Helvetica Neue", "monospace": "Consolas");
    
    h3 {
      font: {
        size: 18px;
        weight: bold;
        family: map-get($fonts, "sans");
      }
    }
    
    h3 {
      font-size: 18px;
      font-weight: bold;
    }
    


    null也是falsey,这意味着它适用于任何采用布尔值的规则或运算符,它都算作false。这使得使用可以null的值作为@ifif()条件,变得很null容易。

    scss 语句css 语句
    @mixin app-background($color) {
      #{if(&, '&.app-background', '.app-background')} {
        background-color: $color;
        color: rgba(#fff, 0.75);
      }
    }
    
    @include app-background(#036);
    
    .sidebar {
      @include app-background(#c6538c);
    }
    
    .app-background {
      background-color: #036;
      color: rgba(255, 255, 255, 0.75);
    }
    
    .sidebar.app-background {
      background-color: #c6538c;
      color: rgba(255, 255, 255, 0.75);
    }