<template>
  <div class="mint-navbar" :class="{ 'is-fixed': fixed }">
    <slot></slot>
  </div>
</template>

<script>
/**
 * mt-navbar
 * @module components/navbar
 * @desc 頂部 tab，依賴 tab-item
 *
 * @param {boolean} [fixed=false] - 固定底部
 * @param {*} selected - 返回 item component 傳入的 value
 *
 * @example
 * <mt-navbar :selected.sync="selected">
 *   <mt-tab-item value="訂單">
 *     <span slot="label">訂單</span>
 *   </mt-tab-item>
 * </mt-navbar>
 *
 * <mt-navbar :selected.sync="selected" fixed>
 *   <mt-tab-item :value="['傳入數(shù)組', '也是可以的']">
 *     <span slot="label">訂單</span>
 *   </mt-tab-item>
 * </mt-navbar>
 *
 */
export default {
  name: 'mt-navbar',

  props: {
    fixed: Boolean,
    value: {}
  }
};
</script>

<style lang="css">
  @import "../../../src/style/var.css";

  @component-namespace mint {
    @component navbar {
      background-color: $color-white;
      display: flex;
      text-align: center;

      @when fixed {
        position: fixed 0 0 * 0;
        z-index: $z-index-normal;
      }

      .mint-tab-item {
        padding: 17px 0;
        font-size: 15px;

        &:last-child {
          border-right: 0;
        }

        &.is-selected {
          border-bottom: 3px solid $color-blue;
          color: $color-blue;
          margin-bottom: -3px;
        }
      }
    }
  }
</style>

這是 mint-ui 中 navbar 的源碼，css 的樣式讓我很疑惑..

其中 @component-namespace 取得是 vue 組件名

@when fixed {
    position: fixed 0 0 * 0;
}

則會(huì)編譯成

.is-fixed {
    top: 0;
    right: 0;
    left: 0;
    position: fixed;
}

這是哪種語(yǔ)法？