Unable to use Bourbon Refills

问题

I am trying to use refills bourbon to use their css libraries. from what I understand, all I have to do is copy and paste their css and html and it should work. But the css doesn't take effect when I try it out.

I have added the link to the css file and added jquery links and it still doesn't work. From what I know, ruby is not necessary when using fillers. Please advice if I am missing any steps Thanks.

HTML file

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="styles.css">
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    </head>

    <body>
        <header class="navigation">
          <div class="menu-wrapper">
            <a href="javascript:void(0)" class="logo">
              <img src="https://raw.github.com/Magnus-G/Random/master/placeholder_logo_1.png" alt="">
            </a>
            <p class="navigation-menu-button" id="js-mobile-menu">MENU</p>
            <div class="nav">
              <ul id="navigation-menu">
                <li class="nav-link"><a href="javascript:void(0)">Products</a></li>
                <li class="nav-link"><a href="javascript:void(0)">About Us</a></li>
                <li class="nav-link"><a href="javascript:void(0)">Contact</a></li>
                <li class="nav-link more"><a href="javascript:void(0)">More</a>
                  <ul class="submenu">
                    <li><a href="javascript:void(0)">Submenu Item</a></li>
                    <li><a href="javascript:void(0)">Another Item</a></li>
                  </ul>
                </li>

              </ul>
            </div>
            <div class="navigation-tools">
              <div class="search-bar">
                <div class="search-and-submit">
                  <input type="search" placeholder="Enter Search" />
                  <button type="submit">
                    <img src="https://raw.githubusercontent.com/Magnus-G/Random/master/search-icon.png" alt="">
                  </button>
                </div>
              </div>
              <a href="javascript:void(0)" class="sign-up">Sign Up</a>
            </div>
          </div>
        </header>

        <script>
          $(function() {
            var menu = $('#navigation-menu');
            var menuToggle = $('#js-mobile-menu');
            var signUp = $('.sign-up');

            $(menuToggle).on('click', function(e) {
              e.preventDefault();
              menu.slideToggle(function(){
                if(menu.is(':hidden')) {
                  menu.removeAttr('style');
                }
              });
            });

            // underline under the active nav item
            $(".nav .nav-link").click(function() {
              $(".nav .nav-link").each(function() {
                $(this).removeClass("active-nav-item");
              });
              $(this).addClass("active-nav-item"); 
              $(".nav .more").removeClass("active-nav-item");
            });
          });
        </script>
    </body>
</html>

CSS File

header.navigation {
  $navigation-padding: 1em;
  $navigation-background: $dark-gray;
  $navigation-color: transparentize(white, 0.3);
  $navigation-color-hover: white;
  $navigation-height: 60px;
  $navigation-nav-button-background: $base-accent-color;
  $navigation-nav-button-background-hover: lighten($navigation-background, 10);
  $navigation-nav-button-border: 1px solid lighten($navigation-nav-button-background, 20);
  $navigation-search-background: lighten($navigation-background, 5);
  $navigation-search-border: 1px solid darken($navigation-background, 5);
  $navigation-active-link-color: transparentize(white, 0.5);
  $navigation-submenu-padding: 1em;
  $horizontal-bar-mode: $large-screen;

  background-color: $navigation-background;
  border-bottom: 1px solid darken($navigation-background, 10);
  font-family: $sans-serif;
  height: $navigation-height;
  width: 100%;
  z-index: 999;

  .menu-wrapper {
    @include outer-container;
    @include clearfix;
    position: relative;
    z-index: 9999;
  }

  .logo {
    float: left;    
    max-height: $navigation-height;
    padding-left: $navigation-padding;
    padding-right: 2em;

    img {
      max-height: $navigation-height;
      padding: .8em 0;
    }
  }

  .navigation-menu-button {
    color: $navigation-color;
    cursor: pointer;
    display: block;
    float: right;
    font-family: $sans-serif;
    font-weight: 700;
    line-height: $navigation-height;
    margin: 0;
    padding-right: 1em;
    text-transform: uppercase;

    @include media ($horizontal-bar-mode) {
      display: none;
    }

    &:hover {
      color: $navigation-color-hover;
    }
  }

  .nav {
    z-index: 9999999;
    float: none;
    @include media ($horizontal-bar-mode) {
      float: left;
    }
  }

  ul#navigation-menu {    
    clear: both;
    -webkit-transform-style: preserve-3d; // stop webkit flicker
    display: none;
    margin: 0 auto;
    overflow: visible;
    padding: 0;
    width: 100%;
    z-index: 9999;

    @include media ($horizontal-bar-mode) {
      display: inline;
      margin: 0;
      padding: 0;
    }
  }

  ul li {
    background: $navigation-background;
    display: block;
    line-height: $navigation-height;
    overflow: hidden;
    padding-right: .8em;
    text-align: right;
    width: 100%;
    z-index: 9999;

    @include media ($horizontal-bar-mode) {
      background: transparent;
      display: inline;
      line-height: $navigation-height;
      padding-right: 2em;
      text-decoration: none;
      width: auto;
    }

    a {
      font-weight: 400;
      color: $navigation-color;

      &:hover {
        color: $navigation-color-hover;
      }
    }
  }

  .active-nav-item a {
    padding-bottom: 3px;
    border-bottom: 1px solid $navigation-active-link-color;
  }

  li.more {
    padding-right: 0;

    &:hover .submenu {
      display: block;
    }

    @include media($horizontal-bar-mode) {
      position: relative;
      padding-right: .8em;
    }
  }

  li.more a {
    padding-right: .8em;
  }

  .submenu {
    display: none;

    @include media($horizontal-bar-mode) {
      position: absolute;
      top: 1em;
      left: -$navigation-submenu-padding;
    }

    li {
      display: block;
      padding-right: 0;

      @include media($horizontal-bar-mode) {
        line-height: $navigation-height /1.3;

        &:first-child a {
          padding-top: 1em;
        }
        &:last-child a {
          border-bottom-left-radius: $base-border-radius;
          border-bottom-right-radius: $base-border-radius;
          padding-bottom: .7em;
        }
      }

      a {
        text-align: right;
        background-color: darken($navigation-background, 3);
        width: 100%;
        display: inline-block;

        @include media($horizontal-bar-mode) {
          width: 12em;
          background-color: $navigation-background;
          text-align: left;
          padding-left: $navigation-submenu-padding;
        }
      }
    }
  }

  .navigation-tools {
    @include clearfix;
    display: block;
    padding-right: $navigation-padding;
    padding-left: $navigation-padding/2;
    clear: both;
    background: #505050;

    @include media($large-screen) {
      background: transparent;
      float: right;
      clear: none;
    }
  }

  a.sign-up {
    margin-top: 13px;
    float: right;
    @include transition (all 0.2s ease-in-out);
    display: inline;
    background: $navigation-nav-button-background;
    border-radius: $base-border-radius; 
    color: white;
    font-size: .8em;  
    font-weight: 800;
    text-transform: uppercase;
    padding: .4em .5em;

    @include media($large-screen) {
      padding: .4em 1em;
    }

    &:hover {
      background: lighten($navigation-nav-button-background, 10);
    }
  }

  .search-bar {
    $search-bar-border-color: $base-border-color;
    $search-bar-border: 1px solid $search-bar-border-color;
    $search-bar-background: lighten($search-bar-border-color, 10);

    padding: 13px 5px; 
    float: left;
    .search-and-submit {
      position: relative;

      input[type=search] {
        background: $navigation-search-background;
        border: $navigation-search-border;
        padding: .6em .8em;
        font-size: .9em;
        font-style: italic;
        color: $navigation-color;
        border-radius: $base-border-radius * 2;
        margin: 0;
      }

      button[type=submit] {
        @include button(simple, lighten($navigation-search-background, 10));
        @include position(absolute, 0.3em 0.3em 0.3em 0);
        outline: none;
        padding: 5px 15px;

        img {
          height: 12px;
          opacity: .7;
        }
      }
    }

    @include media($horizontal-bar-mode) {
      width: 16em;
      position: relative; 
      display: inline-block;

      input {
        @include box-sizing(border-box);
        display: block;
      }
    }
  }
}

回答1:

The example CSS you've given is actually *S*CSS.

Bourbon/Neat/Refills are a collection of SASS/SCSS libraries. As such the examples given on the bourbon site are written in SCSS rather than CSS. You can use a precompiler such as the one that comes with compass to generate the CSS from the example you've given, which you'll then be able to link to in your html.

回答2:

You have to uncommment line10 in _base.scss, the _grid-settings are not included by default when using neat. Also check the _grid-settings.scss file import on line 1.

This worked for me.

回答3:

What worked for me (meta viewport)

Dude, after long hours I found this.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

And it did the trick.

About Sass

Careful with the refills, as Ian Wootten says this is not CSS this is SCSS so you have to compile it to produce CSS. the simplest way is to checkout http://sass-lang.com/install

to install Sass and then use the command to produce HTML (compiling)