본문으로 바로가기

Susy Settings 기본 설정 #1

category StyleSheet/Susy 2015. 12. 18. 17:12

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(믹스인 또는 함수)은 컨테이너를 기준으로 계산되고 % 값으로 출력됩니다.

staticcolumn-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 가 트릭을 이용하여 고안한 방법으로 플롯된 요소를 절대 위치처럼 사용하는 방식입니다.


[ Isolate 기법 ] 살펴보기

Susy Isolate 보러가기

Responsive Design's Dirty Little Secret

Isolate Technique.  (중간 단락 참조)




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 에 대한 내용을 다음 포스팅에서 계속 다뤄 보도록 하겠습니다.



[e-room] 포스팅 Susy2 목차

Susy2 란 무엇인가? (첫번째 포스팅)






Jaehee's e-room


  1. Susy에서 map 타입으로 설정할 수 있는 것을 $shorthand 변수나 믹스인을 사용하여 개별적으로 인수를 넘겨서 설정할 수 있도록 제공해 주고 있다. [본문으로]

'StyleSheet > Susy' 카테고리의 다른 글

Susy Settings 기본 설정 #2  (0) 2016.02.10
Susy Settings 기본 설정 #1  (0) 2015.12.18
Susy Framwork Overview (Susy 둘러보기)  (0) 2015.12.18

댓글을 달아 주세요