scss 有趣的SCSS和bootstrap。

Posted 2021-05-18

// Use bootstrap sass mixins in your scss instead of litering your view with bootstrap classes.

form.stuff{
  input[type="submit"]{
    // This is where we customize our submit button
    @extend .btn;
    @extend .btn-sm;
  }
  input[type="text"], input[type="password"] { // include more types if you want.
    @extend .form-control;
  }
}

// SCSS Enumeration is a clean way to dry up styling

@each $viewName in browse, capture, search{
  &[data-view=#{$viewName}] {
    div.nav > nav > ul > li {
      a##{$viewName}{
        color: $navLinkColor;
        background-color: $hoverColor;
      }
    }
  }
}


[data-view=browse] div.nav > nav > ul > li a#browse {
  color: white;
  background-color: #a9bc3f;
}
[data-view=capture] div.nav > nav > ul > li a#capture {
  color: white;
  background-color: #a9bc3f;
}

[data-view=search] div.nav > nav > ul > li a#search {
  color: white;
  background-color: #a9bc3f;
}