Susy 2 settings

settings.scss

/**
*
* Settings
*
**/

// Defining breakpoints
$bp-small: 520px;
$bp-medium: 768px;
$bp-wide: 960px;
$bp-huge: 1200px;

// Defining container widths
$container-small: 520px;
$container-medium: 768px;
$container-wide: 1024px;
$container-huge: 1180px;


// Defining grid columns
$g-small: 6;
$g-wide: 12;

// Defining spacing/gutter size
$spacing: 1rem;

// Susy settings
// http://susydocs.oddbird.net/en/latest/settings/
$susy: (
    columns: 6,
    gutter-position: inside,
    gutters: 0,
    global-box-sizing: border-box,
    debug: (
        image: hide,
        color: rgba(blue, .10)
    ),
    use-custom: (
        box-sizing: false
    )
);

$susy-small: $container-small $g-small (0) inside;
$susy-medium: $container-medium $g-wide (0) inside;
$susy-wide: $container-wide $g-wide (0) inside;
$susy-huge: $container-huge $g-wide (0) inside;


// Breakpoint-sass option
// https://github.com/at-import/breakpoint/wiki/Basic-Media-Queries#em-based-media-queries
$breakpoint-to-ems: true;


// flex html class
$has-flex: has-flex !default;
$no-flex: no-flex !default;


// Media query helpers
// Aliases for susy-breakpoint
// http://susydocs.oddbird.net/en/latest/toolkit/#breakpoint
@mixin small {
    @include susy-breakpoint($bp-small, $susy-small) { @content };
}

@mixin to-small {
    @include susy-breakpoint(0 ($bp-medium - 1), $susy-small) { @content };
}

@mixin small-only {
    @include susy-breakpoint(0 ($bp-medium - 1), $susy-small) { @content };
}


@mixin medium {
    @include susy-breakpoint($bp-medium, $susy-medium) { @content };
}

@mixin to-medium {
    @include susy-breakpoint(0 ($bp-medium - 1), $susy-small) { @content };
}

@mixin medium-only {
    @include susy-breakpoint($bp-medium ($bp-wide - 1), $susy-medium) { @content };
}


@mixin wide {
    @include susy-breakpoint($bp-wide, $susy-wide) { @content };
}

@mixin to-wide {
    @include susy-breakpoint(0 ($bp-wide - 1), $susy-wide) { @content };
}


@mixin huge {
    @include susy-breakpoint($bp-huge, $susy-huge) { @content };
}