Solved

Sass Structure Questions

Posted on 2015-02-12
9
93 Views
Last Modified: 2015-02-22
I have some questions in regards to setting up a Sass project. First of all, I seem to be a little confused between "Modules" and "Partials" . I have looked at the SMACCS structure and I'm a little confused by it. I also looked at Foundation, Bourbon, etc.. and it seems like they have different approaches to their own structure compared to SMACCS.

So, below is the structure that I wanted to implement for myself for website projects that I work on. But I'm worried that I'm not setting this up properly, hence the reason I'm here.

Utilities Folder
   _index.scss  -- loads all utilities below into this file by importing them
   _placeholders.scss
   _functions.scss
   _mixins.scss

Partials Folder
   _index.scss  -- loads all partials below into this file by importing them
   _base.scss  -- base scss styles will go here (html, *, body, img, etc...)
   _normalize.scss  -- reset to defaults
   _typography.scss  -- all typography variables will go here.
   _grid.scss  -- all grid variables will go here
   _colors.scss  -- all color variables will go here.
   _buttons.scss  -- all button variables will go here.

app.scss -- loads all utilites and partials in this file. This file will create app.css file.


The other approach that I had in mind which I'm not sure if it's better and makes more sense then the above approach is to just have one file called _variables.scss and include all of my partials above in there. Also, keeping the Utilities folder/structure as above.
0
Comment
Question by:asp_net2
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
9 Comments
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40607461
Hi,

we're currently solving a even more complex issue.
Basically on top of what you have, we also need to manage multiple versions of the different assets and generate multiple "main.css" per application. This is a common portal, with common branding but as the portal is made of several apps that can be deployed separately, different versions of the CSS have to be maintained.

So on a higher level, the rule of thumb is to keep the scss files as granular as possible. This will ease maintenance and packaging.

As I told before, we need to keep parallel versions of some assets, so we also have, for instance:
 _typography-1.0.scss
 _typography-2.0.scss

Our logical separation is similar to yours but we don't create a package per folder, we only package at the final release file level (the app.scss of your example).
Doing so let us choose exactly which files to use per "package", that for us mean per application.

So this works for use in this more complex scenario.
As far as I can see, your organization won't let you down in the future if/when things get more complex.
0
 
LVL 4

Author Comment

by:asp_net2
ID: 40607673
I'm sorry but I'm a little confused and don't understand what you meant.

Can you please explain to me in easier terminology.

Also, what about having different .scss files like I have now for color, typography, buttons etc... Is this a good idea to do or no? All I have in those .scss files are the variables for each category and nothing else in those files.
0
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40607722
Ok, sorry :)

But basically yes, it's a good idea to split them as much as you can in a logical way.
They will all be merged into one single file so for the sake of maintainability, split your logic through different files so it will be easier to find things.

One question I have is what is inside the _buttons.scss?
If you have several controls to style, probably it's a good idea to create a controls folder and put one file per control in there.

Everything else I said on the previous post was trying to explain a more complex scenario that I have here.
If all you have is a single application, your structure works and it's future proof.
0
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
LVL 4

Author Comment

by:asp_net2
ID: 40608214
Hi Alexandre,

Thank you, that's awesome :) I was hoping you would say it's ok to do  :) I think it's easier to have separate files to store variables based on the category so that it's easier to manage.

I was looking at SMACSS and was surprised to see that they don't seem to do that in the structure unless I misunderstood their structure.

If I display my structure below can you tell me if it's ok? Also, would I need to include all my variables first prior to calling my functions and mixins since my variables are inside of the functions and mixins?

Folder structure:

Structure.tiff

Base/_index.scss

base.tiff

Modules/_index.aspx

modules.tiff

Utilities/_index.scss

utilities.tiff

app.scss

app.tiff
0
 
LVL 4

Author Comment

by:asp_net2
ID: 40608217
Hi Alexandria,

Also, if you look at my app.scss file above you will see that I have the "modules/index.scss" called last. Should I call this first or does it not matter how it's organized in this particular file?
0
 
LVL 30

Accepted Solution

by:
Alexandre Simões earned 500 total points
ID: 40616029
Hi mate, sorry I completely lost track of this question.

The logic of the files order in scss is the same as in pure css.
Anything that comes after can/might override the previous.

This means that you should put the most generic on top and the most particular last.
To give you an example, if you have a global.scss where you put all the styles that are common to the whole website you should put it first. Then put all the page specific files after. This way you'll be able to override the global styles if needed.

Another thing to keep in mind is to put all the css that you don't control (from external components) before your own styles. This way you make sure that no one will override your styles and if needed you can override theirs.

After these base rules it's up to you to rearrange your resources the best way it logically fits you.
Just keep in mind to keep each scss file small and focused so that they keep being easy to find and maintain.
0
 
LVL 4

Author Comment

by:asp_net2
ID: 40616984
Hi Alexandre,

No worries, THANK YOU so much for coming back though :) I have, I think just one dilemma that I need your help with :( I'm not sure if you looked at my structure above but I will try my best to explain to you what is happening with the code snippets below and perhaps you can tell me what I'm doing wrong or what I need to do to correct the issue.

base folder:

_base.scss
// Base Styles

*,
*:after,
*:before {
	@include box-sizing();
}

html,
body {
	font-size: $font-size--base;
}

body {
	background  : $color-black;
	font-family : $font-stack--open-sans;
	font-weight : $font-weight--normal;
	font-style  : $font-style--normal;
	line-height : $perfect-fifth;
	color       : palette(black, mid-light);
}

img {
	max-width: 100%;
  	height: auto; 
}

img {
	-ms-interpolation-mode: bicubic; 
}

.button {
	@include background-colors($color-palettes);
}

Open in new window


_normalize.scss
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

Open in new window


_index.scss
// Normalize Reset

@import 'normalize';

// Base Styes

@import 'base';

Open in new window


partials folder:

_colors.scss
// ==========================================================================
// Color Variables
// ==========================================================================


// Color Names

$color-white   : #fff;
$color-red     : #d42c2c;
$color-orange  : #ff7700;
$color-green   : #33cc33;
$color-blue    : #007fff;
$color-purple  : #9933ff;
$color-black   : #000;

// Color Palette Modifiers

$color-palettes: (
    white: (
        base       : $color-white,
        dark       : darken($color-white, 10%),
        mid-dark   : darken($color-white, 20%),
        x-dark     : darken($color-white, 30%)
    ),
    red: (
        base       : $color-red,
        light      : lighten($color-red, 10%),
        mid-light  : lighten($color-red, 20%),
        x-light    : lighten($color-red, 30%),
        dark       : darken($color-red, 10%),
        mid-dark   : darken($color-red, 20%),
        x-dark     : darken($color-red, 30%)
    ),
    orange: (
        base       : $color-orange,
        light      : lighten($color-orange, 10%),
        mid-light  : lighten($color-orange, 20%),
        x-light    : lighten($color-orange, 30%),
        dark       : darken($color-orange, 10%),
        mid-dark   : darken($color-orange, 20%),
        x-dark     : darken($color-orange, 30%)
    ),
    green: (
        base       : $color-green,
        light      : lighten($color-green, 10%),
        mid-light  : lighten($color-green, 20%),
        x-light    : lighten($color-green, 30%),
        dark       : darken($color-green, 10%),
        mid-dark   : darken($color-green, 20%),
        x-dark     : darken($color-green, 30%)
    ),
    blue: (
        base       : $color-blue,
        light      : lighten($color-blue, 10%),
        mid-light  : lighten($color-blue, 20%),
        x-light    : lighten($color-blue, 30%),
        dark       : darken($color-blue, 10%),
        mid-dark   : darken($color-blue, 20%),
        x-dark     : darken($color-blue, 30%)
    ),
    purple: (
        base       : $color-purple,
        light      : lighten($color-purple, 10%),
        mid-light  : lighten($color-purple, 20%),
        x-light    : lighten($color-purple, 30%),
        dark       : darken($color-purple, 10%),
        mid-dark   : darken($color-purple, 20%),
        x-dark     : darken($color-purple, 30%)
    ),
    black: (
        base       : $color-black,
        light      : lighten($color-black, 10%),
        mid-light  : lighten($color-black, 20%),
        x-light    : lighten($color-black, 30%)
    )
);

// UI Colors

$ui-colors: (
    default : $color-blue,
    success : $color-green,
    error   : $color-red,
    warning : $color-orange,
    info    : $color-purple
);

Open in new window


_typography.scss
// ==========================================================================
// Typography Variables
// ==========================================================================


// Modular Scale

$major-third     : 1.25;   // 16px @ 1:1.25
$perfect-fourth  : 1.333;  // 16px @ 1:1.333
$perfect-fifth   : 1.5;    // 16px @ 1:1.5
$golden-section  : 1.618;  // 16px @ 1:1.618

// Font Stacks

$font-stack--helvetica      : 'Helvetica Neue', Helvetica, Arial, sans-serif;
$font-stack--open-sans      : 'Open Sans', sans-serif;
$font-stack--verdana        : Verdana, Geneva, sans-serif;
$font-stack--lucida-grande  : Lucida Grande, Tahoma, Verdana, Arial, sans-serif;
$font-stack--georgia        : Georgia, Cambria, Times New Roman, Times, serif;
$font-stack--monospace      : Bitstream Vera Sans Mono, Consolas, Courier, monospace;

// Font-Family

$font-url--google        : 'http://fonts.googleapis.com/css?family=Open+Sans';
$font-family--primary    : $font-stack--helvetica;
$font-family--secondary  : $font-stack--verdana;

// Font Size

$font-size--base  : 100%;
$remBase          : 16px;

// Font-Weight

$font-weight--thin         : 100;
$font-weight--ultra-light  : 200;
$font-weight--light        : 300;
$font-weight--normal       : 400;
$font-weight--medium       : 500;
$font-weight--semi-bold    : 600;
$font-weight--bold         : 700;
$font-weight--ultra-bold   : 800;
$font-weight--heavy        : 900;

// Font-Style

$font-style--normal   : normal;
$font-style--italic   : italic;
$font-style--oblique  : oblique;

// Line-Height
//$line-height  : round($golden-section * $font-size--rembase);

// Horizontal Rule

$hr-border-width  : 1px;
$hr-border-style  : solid;
$hr-border-color  : #ddd;
$hr-margin        : rem(20);

Open in new window


_index.scss
// ==========================================================================
// Grid
// ==========================================================================

@import 'grid';

// ==========================================================================
// Color
// ==========================================================================

@import 'color';

// ==========================================================================
// Typography
// ==========================================================================

@import 'typography';

Open in new window


utilities folder:

_functions.scss
// ==========================================================================
// Functions
// ==========================================================================


// Import if Google Fonts URL is defined

@if variable-exists(font-url--google) {
	@import url($font-url--google);
}

// Strip units of measure

@function strip-unit($num) {
	@return $num / ($num * 0 + 1);
}

// Calculate rem values by incorporating Strip unit function

@function rem($target, $context: $remBase) {
    $target: strip-unit($target) / strip-unit($context) * 1rem;
    @if ($target == 0rem) { $target: 0; } // Turn 0rem into 0
	@return $target;
}

// Call the color palette modifiers in color values

@function palette($palette, $tone: 'base') {
    @return map-get(map-get($color-palettes, $palette), $tone);
}

Open in new window


_mixins.scss
// ==========================================================================
// Mixins
// ==========================================================================


// Box Sizing

@mixin box-sizing($type:border-box) {
	margin: 0;
    padding: 0;
    -webkit-box-sizing: $type; // Android < 2.3, iOS < 4
    -moz-box-sizing: $type; // Firefox < 29
    box-sizing: $type; // Chrome, IE 8+, Opera, Safari 5.1
}

// Border Radius

@mixin border-radius($radius) {
	-webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

// Background Colors from Color Palette

@mixin background-colors($map) {
  @each $theme, $color in $map {
    &--#{$theme} {
      @extend %button;
      border: 1px solid palette($theme);
      color: palette($theme);
      &:hover {
        background-color: palette($theme);
        color: palette($color-white);
      }
    }
  }
}

Open in new window


_placeholders.scss
// ==========================================================================
// Placeholders
// ==========================================================================


// Clearfix

%clearfix {
  *zoom: 1;
  &:before, &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

%hide {
	display: none;
}

%invisible {
	visibility: hidden;
}

// Button Placeholder

%button {
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  border: 1px solid #fff;
  text-align: center;
  text-decoration: none;
  letter-spacing: 1px;
  outline: none;
}

Open in new window


_index.scss
// Functions

@import 'functions';

// Placeholders

@import 'placeholders';

// Mixins

@import 'mixins';

Open in new window


main.scss file

_main.scss
// ==========================================================================
// Partials
// ==========================================================================

@import 'partials/index';

// ==========================================================================
// Utilities
// ==========================================================================

@import 'utilities/index';

// ==========================================================================
// Base
// ==========================================================================

@import 'base/index';

Open in new window


main.css file

main.css
@import url("http://fonts.googleapis.com/css?family=Open+Sans");
.button--white, .button--red, .button--orange, .button--green, .button--blue, .button--purple, .button--black {
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  border: 1px solid #fff;
  text-align: center;
  text-decoration: none;
  letter-spacing: 1px;
  outline: none; }

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0; }

/* HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block; }

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */
audio,
canvas,
progress,
video {
  display: inline-block;
  /* 1 */
  vertical-align: baseline;
  /* 2 */ }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none; }

/* Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background-color: transparent; }

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0; }

/* Text-level semantics
   ========================================================================== */
/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */
b,
strong {
  font-weight: bold; }

/**
 * Address styling not present in Safari and Chrome.
 */
dfn {
  font-style: italic; }

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
 * Address styling not present in IE 8/9.
 */
mark {
  background: #ff0;
  color: #000; }

/**
 * Address inconsistent and variable font size in all browsers.
 */
small {
  font-size: 80%; }

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* Embedded content
   ========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9/10.
 */
img {
  border: 0; }

/**
 * Correct overflow not hidden in IE 9/10/11.
 */
svg:not(:root) {
  overflow: hidden; }

/* Grouping content
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari.
 */
figure {
  margin: 1em 40px; }

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

/**
 * Contain overflow in all browsers.
 */
pre {
  overflow: auto; }

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

/* Forms
   ========================================================================== */
/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */
/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */
button,
input,
optgroup,
select,
textarea {
  color: inherit;
  /* 1 */
  font: inherit;
  /* 2 */
  margin: 0;
  /* 3 */ }

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */
button {
  overflow: visible; }

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */
button,
select {
  text-transform: none; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default; }

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
input {
  line-height: normal; }

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box; }

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */
textarea {
  overflow: auto; }

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */
optgroup {
  font-weight: bold; }

/* Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

*,
*:after,
*:before {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

html,
body {
  font-size: 100%; }

body {
  background: #000;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 1.5;
  color: #333333; }

img {
  max-width: 100%;
  height: auto; }

img {
  -ms-interpolation-mode: bicubic; }

.button--white {
  border: 1px solid #fff;
  color: #fff; }
  .button--white:hover {
    background-color: #fff;
    color: #fff; }
.button--red {
  border: 1px solid #d42c2c;
  color: #d42c2c; }
  .button--red:hover {
    background-color: #d42c2c;
    color: #fff; }
.button--orange {
  border: 1px solid #ff7700;
  color: #ff7700; }
  .button--orange:hover {
    background-color: #ff7700;
    color: #fff; }
.button--green {
  border: 1px solid #33cc33;
  color: #33cc33; }
  .button--green:hover {
    background-color: #33cc33;
    color: #fff; }
.button--blue {
  border: 1px solid #007fff;
  color: #007fff; }
  .button--blue:hover {
    background-color: #007fff;
    color: #fff; }
.button--purple {
  border: 1px solid #9933ff;
  color: #9933ff; }
  .button--purple:hover {
    background-color: #9933ff;
    color: #fff; }
.button--black {
  border: 1px solid #000;
  color: #000; }
  .button--black:hover {
    background-color: #000;
    color: #fff; }

Open in new window



Ok, so now my problem is that some of my classes get applied to the very top of the .css files instead of very my base.scss styles should go. Please look at my main.css file and you will see an @import font and .button class above the normalize code. I would like to have the @import font and .button class and any other classes that I add to the _base.scss file to be add below the normalize code.
// Normalize Reset

@import 'normalize';

// Base Styes

@import 'base';

Open in new window

0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

729 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question