Susy2 기본 구성하기
Susy2를 사용하려면 Global Settings(전역 설정)는 거의 필수적이라고 할 수 있습니다.
Susy2를 import 하여 사용자 전역설정 없이 Susy2의 내장되어 있는 기본값 전역설정을 그대로 사용하면 제어하는데에 약간(?)의 어려움이 있을 수 있습니다.
UI개발자가 크로스 브라우징을 하기 위해서 모든 브라우저의 스타일을 초기화하는 것과 비슷한 맥락입니다.
지금부터 전반적인 Susy2의 기본 구성 설정에 대해 알아보도록 하겠습니다.
Settings
Susy2 는 Sass의 map 타입 또는 Shorthand Syntax(단축 구문) 1 과 같은 문법을 사용하여 settings(설정값)을 정의할 수 있습니다.
아래의 두 설정값은 서로 바꿔서 사용할 수 있습니다.(호환성)
// Susy 사용자 기본 구성 작성
$susy: (
columns: 12,
gutters: 1/4,
math: fluid,
output: float,
gutter-position: inside,
);
$shorthand: 12 1/4 fluid float inside;
$susy 변수에 map 형식으로 작성할 수 있으며 $shorthand 변수에 인수만 전달, 작성하여 사용할 수 있습니다.
$susy: (
columns: 12,
gutters: .25,
math: fluid,
);
@include layout($susy float inside);
그리고 위와 같이 $susy 변수에는 map 타입(key: value)의 값들이 저장되고 그 맵을 Shorthand syntax(Susy에 내장된 믹스인 or 함수)로 전달하여 기본값 병합하여 구성할 수도 있습니다.
특별히 언급하지 않는 한(E.g. 로컬스코프에 설정하는 경우), 대부분읜 설정은 전역(사이트 전체의 기본설정) & 로컬(지역적)로 설정되어 이 구성설정을 제어할 수 있게 됩니다.
로컬 설정은개별적인 함수나 믹스인을 사용하여 :
.sidebar { $include layout($map) }
Global Defaults
Susy2의 기본으로 내장된 글로벌 기본 구성값은 다음과 같습니다.
// Susy 기본 글로벌 구성(내장)
$susy: (
flow: ltr,
math: fluid,
output: float,
gutter-position: after,
container: auto,
container-position: center,
columns: 4,
gutters: .25,
column-width: false,
global-box-sizing: content-box,
last-flow: to,
debug: (
image: hide,
color: rgba(#66f, .25),
output: background,
toggle: top right,
),
use-custom: (
background-image: true,
background-options: false,
box-sizing: true,
clearfix: false,
rem: true,
)
);
사용자는 자신의 글로벌 기본값을 재설정하거나 필요에 따라서 개별적인 layout map 을 사용하여 기본 설정을 구성할 수 있습니다.
기본 글로벌 설정을 위해서는 사용자가 필요로 하는 기본 구성값을 $susy 변수(susy 전역변수)에 설정할 수 있습니다.
// Susy 사용자 기본 구성 설정
$susy: (
columns: 12,
gutters: .25,
gutter-position: inside
)
사용자 필요에 따른 사용자 글로벌 설정을 제외한 나머지 값은 Susy2의 기본 글로벌 설정값을 그대로 사용하게 됩니다.
Layout(배치)
Susy2의 layout은 설정값을 병합적으로 구성할 수 있습니다. 레이아웃은 map 타입이나 shorthand 로 사용할 수 있습니다.
layout [@type function]
ㆍ 포맷 : layout($layout)
ㆍ $layout : 옵션값 설정(container columns gutters gutter-position math output)
// 함수를 사용하여 설정값을 저장
$setting: layout(auto 12 .25 inside fluid isolate);
// map 타입으로 설정값을 저장
$setting: (
container: auto,
columns: 12,
gutters: .25,
gutter-position: inside,
math: fluid,
output: isolate,
);
// 디버깅을 통해 값 저장 목록 확인
@debug $setting;
위 구성은 값을 저장만 한 것이지 설정한 것은 아니며, 이러한 방식은 변수에 저장된 설정 값을 결합(병합)하는 때에 유용하게 사용될 수 있습니다.
다만, 구성값을 병합시킬 때에는 주의해야 할 점이 있습니다.
// 명령창(CLI)에서 error 발생하여 동작하지 않음
$short: 12 .25 inside;
@include layout($short fluid no-gutters);
// layout 함수를 통해 저장된 값을 전달하는 것은 가능
$map: layout(12 .25 inside);
@include layout($map fluid no-gutters);
// 속성값만 저장된 변수를 layout 믹스인에 전달하면 error 발생
$map1: 13 static;
$map2: (6em 1em) inside;
@include layout($map1 $map2);
위 세가지 타입에서 알 수 있는 것은 단축값(속성값만...)만 저장된 변수를 사용하여 layout 믹스인에 전달하는 것은 문법에 어긋납니다.
하자만 layout 함수에 인자로 기본 구성값을 전달하여 반환된 것을 사용하는 것은 가능합니다.
아래의 경우는 가능합니다.
// layout 함수를 통해 저장된 변수를
// layout 믹스인에 전달하면 가능
$map1: layout(13 static);
$map2: layout((6em 1em) inside);
@include layout($map1 $map2);
layout 함수의 전달 인자는 number 값으로 전달되는 container, columns, gutters 순서를 제외하고는 옵션 인자값의 키워드는 순서에 상관없이 저장되어 사용됩니다.
예를 들어 아래와 같이 정의하더라도 columns 과 gutters 는 순서대로 셋팅되고 나머지 키워드는 순서에 상관없이 저장되어 사용할 수 있습니다.
container 는 auto와 unit(em,px...) 단위를 사용하기 때문에 숫자값만 넘겨줄 경우는 columns 와 gutters 를 정의하게 되는 것입니다.
$map: layout(inside 8, .20, fluid isolate, 80em);
80em은 container 를 설정하고 숫자는 columns 와 gutters 가 설정됩니다.
Susy : Layout 원문 보기
layout [@type mixin]
layout 믹스인은 전역 기본값으로 새로운 레이아웃 배치를 위한 기본값들을 설정합니다.
ㆍ 포맷 : layout(@layout, $clean)
ㆍ $layout : <layout> 레이아웃 value 값
ㆍ $clean : boolean
// mixin: 전역 레이아웃을 설정
@include layout(12 1/4 inside-static);
기본적으로 이러한 새로운 설정은 기존의 전역 설정에 추가됩니다.
$clean 인수는 전역 설정값을 초기 상태로 되돌릴 경우,
$clean값을true로 설정합니다.
## Sass
// 사용자 정의 전역 설정
// 초기 상태를 변경했습니다.
$susy: (
flow: rtl,
math: static,
output: isolate
);
// 전역 설정을 새로운 설정으로 변경합니다.
// layout() 믹스인은 전역 설정에 추가하는 형식입니다.
// 전역 설정 값을 초기 상태로 되돌릴 경우, $clean 값을 true로 설정합니다.
@include layout(12 1/4 inside, true);
$flow: susy-get(flow);
$math: susy-get(math);
$output: susy-get(output);
body:after {
content: '#{$flow}';
content: '#{$output}';
content: '#{$math}';
}
## Output CSS
body:after {
content: "ltr";
content: "float";
content: "fluid";
}
위 Output CSS 를 보면 $susy 전역변수에 사용자가 정의한 값이 아닌 $susy 의 초기 상태의 전역 설정값을 가져오는 것을 확인하실 수 있습니다.
즉, 사용자 전역 설정이 아닌, Susy 자체의 초기 상태로 설정을 되돌릴 때 $clean 값을 true 로 사용한다고 이해하시면 될 것 같습니다.
그리고 layout() 믹스인에 설정된 내용은 결국 $susy 전역변수 설정 값에 추가되어 변경되는 원리로 만약 사용자가 float 출력 방식을 isolate 로 변경해서 사용하다가 특정영역에서 다시 float 방식으로 회귀하고자 할 경우에는 그 값을 직접 변경해도 됩니다.
굳이 $clean 값을 true 로 설정해서 초기 상태의 $susy를 변경할 필요는 그다지 많아 보이지는 않습니다.
하지만 Susy2 에서는 그 기능을 제공하니 추후에 필요하다면 사용하면 될 것 같습니다.
with-layout [@type mixin]
with-layout 믹스인은 일시적으로 사용자의 코드 섹션에서 기본값을 설정할 수 있습니다.
ㆍ 포맷 : with-layout($layout, $clean) { @content }
ㆍ $layout : <layout>
ㆍ $clean : <boolean>
ㆍ @content : Sass content block
@include with-layout(8 static) {
// 특정 영역 내에서 일시적으로 8 컬럼과 정적 그리드를 사용 하도록 설정
}
// 글로벌 영역과 with-layout 이 설정되지 않은 로컬 스코프는
// 글로벌에 설정된 기본값이 사용된다.
Susy-Get
susy-get [@type function]
susy-get 함수를 사용하면 여러분의 레이아웃 설정값을 얻어 올 수 있습니다.
ㆍ 포맷 : susy-get($key, $layout)
ㆍ $key : Setting name ($susy 전역변수의 key 값)
(E.g. flow, math, output, container, gutters etc...)
ㆍ $layout : <layout>
// * ---------------------------------------
// layout 함수 사용 후 설정 값을 map으로 참조
$large: layout(80em 24 1/2 inside);
// 첫번째 인자 : 가져올 설정 네임
// 두번째 인자 : 참조하고 있는 map
$container: susy-get(container, $large);
$columns: susy-get(columns, $large);
$gutters: susy-get(gutters, $large);
$float: susy-get(gutter-position, $large);
// CLI 각 설정값을 출력
@debug $container; // 80em
@debug $columns; // 24
@debug $gutters; // 0.5
@debug $float; // inside
// * -------------------------------
// $susy 전역변수의 설정 값 가져오기
$getGlobalOutput: susy-get(output);
$getGlobalMath: susy-get(math);
@debug $getGlobalOutput; // float
@debug $getGlobalMath; // fluid
$susy 전역변수의 debug/image 와 같은 중첩된 값에 접근하려면 전체 경로의 $key 값을 넘겨줍니다.
// $susy 전역 기본 설정값
$susy: (
flow: ltr,
// 생략...
// 중첩된 키값
debug: (
image: hide,
color: rgba(#66f, .25),
output: background,
toggle: top right,
),
use-custom: (
background-image: true,
background-options: false,
box-sizing: true,
clearfix: false,
rem: true,
)
);
// 첫번째 인자 : 중첩 key 값
// 두번째 인자 : 중첩 key의 key 값
$debug-image: susy-get(debug image);
$custom-box-sizing: susy-get(use-custom box-sizing);
@debug $debug-image; // hide
@debug $custom-box-sizing; // true
Flow
flow [@type setting]
flow 는 문서 읽기 방향을 정의히고 직접 설정하지 않는 한 일반 문서 흐름 방식을 채택합니다.
ㆍ key : flow
ㆍ Scope : global, local
ㆍ Options : ltr or rtl (앞으로 선택 옵션은 susy Documantion 표기법을 따릅니다)
ㆍ Default : ltr (Left to right)
ltr은 레이아웃 요소가 왼쪽에서 오른쪽으로 흐르고,rtl은 오른쪽에서 왼쪽으로 흐릅니다. (E.g. 중동국가...)
Math
math [@type setting]
Susy2 는 상대적인 너비을 이용하기 위해 %(fluid percentage) 사용하거나 지정된 단위(e.g. px, em, pt...)을 사용하여 정적인 너비를 생성할 수 있습니다.
ㆍ key : math
ㆍ Scope : global, local
ㆍ Options : fluid | static
ㆍ Default : fluid
fluid 로 설정하게 될 경우 모든 내부 그리드 span(믹스인 또는 함수)은 컨테이너를 기준으로 계산되고 % 값으로 출력됩니다.
static 은 column-width 설정을 다양한 단위로 계산할 수 있습니다.
예를 들어, column-width 를 4em 이라고 설정했다면 당신의 그리드 너비는 em 값으로 출력될 것입니다.
그리고 math 의 기본값이 fluid 인 이유는 Susy2를 포함한 오늘날 대부분의 그리드 시스템 프레임워크는 모바일 퍼스트(Mobile First)를 고려하여 설계되었기 때문에 기본 단위 설정이 %(percentage) 입니다.
Susy2 에서 고정적인 px 단위를 사용하여 설계하려면 $susy 전역변수 글로벌 설정에 몇 가지 옵션에 대한 추가가 필요합니다.(추후 살펴봄)
일반적으로 고정 단위를 사용하여 레이아웃을 설정한 경우는 모바일을 고려하지 않은 데스크톱 웹 디자인에 주로 사용되는 방법입니다.
Output
output [@type setting]
Susy2 는 다른 레이아웃 기술(isolate)도 사용하면서 output 을 생성할 수 있습니다.
현재 우리는 플로트(float) 모듈을 대부분 사용하지만 Susy2 배치를 isolation(고립,격리)하여 확장할 수 있는 모듈을 제공하고 있습니다.
머지 않아 레이아웃 모듈은 flexbox 로 대체될 것이고, 또 다른 다른 레이아웃 모듈들이 더 나타날 지도 모릅니다.
ㆍ key : output
ㆍ Scope : global, local
ㆍ Options : float | isolate
ㆍ Default : float
float 방식은 대부분의 웹에서 레이아웃 배치에 사용되고 있습니다.
isolate 방식은 John Albin Wilkins 가 트릭을 이용하여 고안한 방법으로 플롯된 요소를 절대 위치처럼 사용하는 방식입니다.
Container
container [@type setting]
컨테이너 엘리먼트의 max-width 를 설정합니다.
ㆍ key : container
ㆍ Scope : global, local [container only]
ㆍ Options : length | auto
ㆍ Default : auto
length 는 컨테이너에 직접 명시적인 길이(e.g. 60em or 50%)로 적용할 수 있습니다.
auto 는 다른 그리드 환경에 기반한 컨테이너의 너비를 계산하거나 100%로 설정할 것입니다.
Container Position
container-position [@type setting]
부모 요소에 대해 컨테이너의 상대 위치를 조정합니다.
ㆍ key : container-position
ㆍ Scope : global, local(container only)
ㆍ Options : left | center | right | <length> [*2]
ㆍ Default : center
left 는 컨테이너 요소가 왼쪽 정렬을 시키도록 동작합니다. (margin-left: 0; and margin-right: auto;)
center 는 컨테이너가 중앙시킬 수 있도록 마진 여백을 auto 로 설정합니다.
right 는 컨테이너 요소가 오른쪽 정렬을 시키도록 동작합니다. (margin-right: 0; and margin-left: auto;)
length 는 하나의 길이가 주어지면 마진의 양쪽 여백을 서로 나눠서 사용하게 되고 두개의 길이값이 제공되면 left,right 로 각각 사용됩니다.
Columns
columns [@type setting]
columns 는 그리드에서 사용할 컬럼의 개수를 준비,설정하는 단계입니다.
ㆍ key : columns
ㆍ Scope : global, local
ㆍ Options : <number> | <list>
ㆍ Default : 4
number 는 사용자의 레이아웃에서 사용할 컬럼의 개수을 나타내고 사용자 기본설정을 하지 않는 다면 기본값인 4개의 컬럼으로 설정됩니다.
list 는 비대칭 그리드 작업을 하기 위해 설정할 수 있는데 첫번째 리스트의 숫자인 그 해당 컬럼수에 따라 그리드 작업을 구성하게 됩니다.
(list 그리드는 피보나치 수열에서 영감을 얻어 구현되었습니다.)
다음의 코드를 보면서 비대칭 그리드를 살펴보세요.
Susy2 의 debug: (image: show)로 그리드를 가시적으로 설정해 놓았기 때문에 본인이 list columns 수를 변경하면서 확인하면 이해에 도움이 될 것입니다.
See the Pen Susy2 비대칭 그리드 테스트 by jaeheekim (@jaehee) on CodePen.
보라빛 배경색이 debug의 image/show 로 나타난 모습이며 columns 을 list 정의한 너비를 살펴보세요.
Gutters
gutters [@type setting]
거터는 사용자 그리드에서 한개의 컬럼을 기준으로 하여 거터의 너비를 설정합니다.
ㆍ key : gutters
ㆍ Scope : global, local
ㆍ Options : <ratio>
ㆍ Default : 1/4
gutters 는 한개의 컬럼을 기준으로 한 비율로 설정되고 기본 값인 1/4 는 한개의 컬럼 너비에서 1/4만큼의 너비를 설정하게 됩니다.
그리고 사용자는 명시적으로 gutter 폭을 설정하기 위해 <gutter-width>/<column-width> 를 작성할 수 있습니다.
// 70px columns, 20px gutters
$susy: (
gutters: 20px/70px,
);
ㆍ Susy2 Settings 에 대한 내용을 다음 포스팅에서 계속 다뤄 보도록 하겠습니다.
- Susy에서 map 타입으로 설정할 수 있는 것을 $shorthand 변수나 믹스인을 사용하여 개별적으로 인수를 넘겨서 설정할 수 있도록 제공해 주고 있다. [본문으로]
'StyleSheet > Susy' 카테고리의 다른 글
| Susy Settings 기본 설정 #2 (0) | 2016.02.10 |
|---|---|
| Susy Framwork Overview (Susy 둘러보기) (0) | 2015.12.18 |
