实现四种不同场景的Alert组件

 <Alert title="this is Success" type="success"></Alert>
 <Alert title="this is Danger!" type="danger"></Alert>
 <Alert title="this is Warning!" type="warning"></Alert>
 <Alert type="default"/>
 
  

export type AlertType = 'success' | 'default' | 'danger' | 'warning'

const classes = classNames('viking-alert',{
    [`viking-alert-${type}`]:type
  })

$alert-colors: 
(
  "default":    $primary,
  "success":    $success,
  "warning":    $warning,
  "danger":     $danger,
);
@each $color, $value in $alert-colors {
  .viking-alert-#{$color} {
    @include alert-style($value, darken($value, 5%), $white);
  }
}

@mixin alert-style($background, $border, $color) {
  color: $color;
  background: $background;
  border-color: $border;
}

$orange:  #fd7e14 !default;
$yellow:  #fadb14 !default;
$green:   #52c41a !default;
$teal:    #20c997 !default;
$cyan:    #17a2b8 !default;

$primary:       $blue !default;
$secondary:     $gray-600 !default;
$success:       $green !default;
$info:          $cyan !default;

结果：

操作符

>

元素的直接子元素

.viking-menu {
     
      >.menu-item {
        padding: $menu-item-padding-y $menu-item-padding-x;
        cursor: pointer;
        transition: $menu-transition;
        
      }
    }

&

.viking-menu {
  
  >.menu-item {
  
    &:hover, &:focus {
      text-decoration: none;
    }
    &.is-disabled {
      color: $menu-item-disabled-color;
      pointer-events: none;
      cursor: default;
    }
    &.is-active, &:hover {
      color: $menu-item-active-color;
      border-bottom: $menu-item-active-border-width solid $menu-item-active-color;
    }
  }

placeholder

.viking-input-inner {


  &::placeholder {
    color: $input-placeholder-color;
    // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
    opacity: 1;
  }

  &[readonly] {
    background-color: $input-disabled-bg;
    border-color: $input-disabled-border-color;
    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
    opacity: 1;
  }
}

readonly

.viking-input-inner {


  &[readonly] {
    background-color: $input-disabled-bg;
    border-color: $input-disabled-border-color;
    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
    opacity: 1;
  }
}