Singularity gs 컨텍스트 덮어쓰기 코드

SassMeister-input.scss

// ----
// Sass (v3.4.1)
// Compass (v1.0.1)
// Breakpoint (v2.5.0)
// Singularity Extras (v1.0.0)
// Singularity.gs (v1.4.0)
// ----

@import "compass";
@import "breakpoint";
@import "singularitygs";
@import "singularity-extras";

// Singularitygs 설정
// https://github.com/Team-Sass/Singularity/wiki/Spanning-The-Grid#context-overrides
@include sgs-change('debug', true);

@include add-grid(12);
@include add-gutter(1/3);
@include add-gutter-style('split');

// 고정 거터 값을 사용할 경우 설정
/////////////////////////////////////////////////
// @include add-grid(40px 80px 120px);
// @include add-gutter(15px);
// @include sgs-change('gutter styles', 'fixed');
/////////////////////////////////////////////////

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

/**
 * MAIN
 ************************************/
#page {
  max-width: 960px;
  height: 100vh;
  margin: 0 auto;
  @include background-grid($color: blue);
  
  .one { @include grid-span(3, 1);  }
}
 

/**
 * SUB: body#sub
 ************************************/
@include layout($gutter: 1/6) {
  body#sub #page {
    .one {@include grid-span(3, 1);  }
  }
}

SassMeister-output.css

/**
 * BASE
 ************************************/
*, *::before, *::after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

/**
 * MAIN
 ************************************/
#page {
  max-width: 960px;
  height: 100vh;
  margin: 0 auto;
  background-image: linear-gradient(to right, #3f3fff, #3f3fff 1.04167%, blue 1.04167%, blue 7.29167%, #3f3fff 7.29167%, #3f3fff 9.375%, blue 9.375%, blue 15.625%, #3f3fff 15.625%, #3f3fff 17.70833%, blue 17.70833%, blue 23.95833%, #3f3fff 23.95833%, #3f3fff 26.04167%, blue 26.04167%, blue 32.29167%, #3f3fff 32.29167%, #3f3fff 34.375%, blue 34.375%, blue 40.625%, #3f3fff 40.625%, #3f3fff 42.70833%, blue 42.70833%, blue 48.95833%, #3f3fff 48.95833%, #3f3fff 51.04167%, blue 51.04167%, blue 57.29167%, #3f3fff 57.29167%, #3f3fff 59.375%, blue 59.375%, blue 65.625%, #3f3fff 65.625%, #3f3fff 67.70833%, blue 67.70833%, blue 73.95833%, #3f3fff 73.95833%, #3f3fff 76.04167%, blue 76.04167%, blue 82.29167%, #3f3fff 82.29167%, #3f3fff 84.375%, blue 84.375%, blue 90.625%, #3f3fff 90.625%, #3f3fff 92.70833%, blue 92.70833%, blue 98.95833%, #3f3fff 98.95833%, #3f3fff 100.0%);
}
#page .one {
  -sgs-span-settings: ("span": 3, "location": 1, "grid": 12, "gutter": 0.33333, "style": "split", "start row": true, "end row": false, "fixed gutter": false, "split gutter": 1, "gutter property": "margin", "options": ((null: null)));
  width: 22.91667%;
  float: left;
  margin-right: -100%;
  margin-left: 1.04167%;
  clear: none;
}

/**
 * SUB: body#sub
 ************************************/
body#sub #page .one {
  -sgs-span-settings: ("span": 3, "location": 1, "grid": 12, "gutter": 0.16667, "style": "split", "start row": true, "end row": false, "fixed gutter": false, "split gutter": 1, "gutter property": "margin", "options": ((null: null)));
  width: 23.80952%;
  float: left;
  margin-right: -100%;
  margin-left: 0.59524%;
  clear: none;
}