Sass and Bourbon, Neat, Bitters, Refills

Don’t get me wrong, I’m well versed in the area of downing some Bourbon.

Sass. Scss. Less. PreProcessor PostProcessor. WTF FUCKKK FUCKKK.

Two differing ideas. Bootstrap or Bourbon. Bootstrap gives you all the markup, designs. You become bonded to Bootstrap when you use it. Bourbon is the opposite, it gives you some base stuff, but you have to import it into your stylesheet. It’s a more advanced way to do styles. It’s more challenging. On a long-term project, it’s better and more maintainable.

In my opinion, as of late, there’s no reason to start a project lazily. I mean, don’t start a project taking shortcuts. At least pretend you’re going to spend a while on the project and make it decent. Start with the end in mind. When you take shortcuts, it will make it more difficult to fix them in the end. If you need.

So bourbon needs to be preprocessed and post processed. AUTO PREFIXER will post process. That adds in all the shit for multiple browsers in CSS.

Sass is the preprocessor, AUTO PREFIXER is the postprocessor.

Scss in General

.site-nav {
  ul {
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    color: #222;
    display: block;
    padding: 5px 10px;

    &:hover {
      color: #444;
    }
  }
}

sass original.scss all2.css

Takes a scss file and turns it into a css file.

Bourbon

Here are all the available functions https://github.com/thoughtbot/bourbon/tree/master/core/bourbon/library

# margin.scss

@import "bourbon";

.component {
  @include margin(20px null)
}

Outputs

.component {
  margin-top: 20px;
  margin-bottom: 20px;
}

.component {

}

.wtf {

}

NEAT

Neat is the grid and layout manager. Supposedly better than bootstrap.

$grid-columns: 8; $max-width: 1000px;

$visual-grid-color: #ff7c56; $visual-grid-opacity: 0.3; $visual-grid: true;

$medium-screen: 600px; $large-screen: 900px;

$medium-screen-up: new-breakpoint(min-width $medium-screen 8); $large-screen-up: new-breakpoint(min-width $large-screen 12);

.container { @include outer-container; }

.one { @include fill-parent; }

.two { @include fill-parent;

@include media($medium-screen-up) { @include span-columns(4); }

@include media($large-screen-up) { @include span-columns(4); } }

.three { @include fill-parent;

@include media($medium-screen-up) { @include span-columns(4); }

@include media($large-screen-up) { @include span-columns(8); } }

Refills

Options…

Post Content