Component starter, somme test about a component structure

_component-starter.scss

// ----
// libsass (v3.1.0)
// ----

@import "bourbon/bourbon";
@import "neat/neat";

// Breakpoints

// Tweakpoints

/* # Component

Template de base pour un composant

Organisation des rêgles css:
- <https://css-tricks.com/poll-results-how-do-you-order-your-css-properties/>
- <https://github.com/necolas/idiomatic-css>

Styleguide 
*/

// Layout
@mixin layout-module1(){
    // Positioning
    position:relative;
    z-index: 1000;
    // Display & Box Model
    display:block;
    margin:0;
    padding: .5em;
    
}

$module1-border-color: white !default;

// Theme
@mixin theme-module1(){
  // Block Theming
  // Bordering
  border:{
    color: silver;
  }
  // Background
  background: {
    image:url();
    repeat:repeat-x;
    color:white;
  }
  // Typography
  font: {
    family: sans-serif;
    color: blue;
  }
}

// Usage
.myModuleName{
  @include layout-module1();
  @include theme-module1();
}

component-starter-output.css

@charset "UTF-8";
html {
  box-sizing: border-box; }

*, *::after, *::before {
  box-sizing: inherit; }

/* # Component

Template de base pour un composant

Organisation des rêgles css:
- <https://css-tricks.com/poll-results-how-do-you-order-your-css-properties/>
- <https://github.com/necolas/idiomatic-css>

Styleguide 
*/
.myModuleName {
  position: relative;
  z-index: 1000;
  display: block;
  margin: 0;
  padding: .5em;
  border-color: silver;
  background-image: url();
  background-repeat: repeat-x;
  background-color: white;
  font-family: sans-serif;
  font-color: blue; }