Solved

Sass Structure Questions

Posted on 2015-02-12
9
70 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
  • 4
  • 3
9 Comments
 
LVL 30

Expert Comment

by:Alexandre Simões
Comment Utility
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
Comment Utility
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
Comment Utility
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
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 
LVL 4

Author Comment

by:asp_net2
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

This article discusses how to create an extensible mechanism for linked drop downs.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

763 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now