Skip to content

Commit a189dce

Browse files
JaYoungKimJaYoungKim
committed
책정리
1 parent c1e1683 commit a189dce

File tree

1 file changed

+332
-0
lines changed

1 file changed

+332
-0
lines changed

‎document/Sass/docs/04_웹디자이너를_위한_SASS.md‎

Lines changed: 332 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,3 +21,335 @@ Sass와 그 외 CSS 전처리기들은 표준으로 제안할 만한 기능들
2121

2222
Sass와 LESS에서 변수가 잘 활용되고 있기 때문에 공식적인 CSS기능으로 변수를 포함하자는 주장이 펼쳐지고 있고, 현재 W3C작업 초안중인 'CSS 변수모듈레벨1'이 개발진행중이며 (http://bkaprt.com/sass/11/) 최신 웹킷 시험버전인 나이틀리 빌즈(Nightly Builds)에서 변수에 대한 지원이 실행되기 시작했습니다.
2323

24+
### 미디어쿼리
25+
26+
#### 해상도 분기점을 변수로 설정하기
27+
28+
```SCSS
29+
30+
// 해상도 분기점을 변수로 설정.
31+
$width-small : 500px;
32+
$width-medium: 800px;
33+
$width-large: 1200px;
34+
35+
```
36+
사용 예제 :
37+
38+
```SCSS
39+
40+
// _style.scss
41+
42+
section.main {
43+
font-size:16px;
44+
line-height: 1.4;
45+
46+
@media screen and(max-width: $width-large){
47+
float: left;
48+
width: 65%
49+
}
50+
@media screen and(max-width: $width-medium{
51+
float: none;
52+
width: auot;
53+
}
54+
@media screen and(max-width: $width-small){
55+
font-size: 12px;
56+
width: 1.4;
57+
}
58+
}
59+
60+
```
61+
컴파일
62+
63+
```CSS
64+
65+
// _style.css
66+
67+
section.main {
68+
font-size:16px;
69+
line-height: 1.4;
70+
}
71+
@media screen and(max-width:1200px){
72+
float: left;
73+
width: 65%
74+
}
75+
@media screen and(max-width: 800px){
76+
float: none;
77+
width: auot;
78+
}
79+
@media screen and(max-width: 500px){
80+
font-size: 12px;
81+
width: 1.4;
82+
}
83+
84+
```
85+
86+
나중에 해상도 분기점을 수정할 경우 변수값을 딱 한번만 고치면 Sass가 알아서 그 값이 사용된 모든곳을 업데이트 해줄 것입니다.
87+
연산도 가능해서 해상도 분기점의 값을 더하거나 뺼 수 있습니다.
88+
89+
```SCSS
90+
91+
// _style.scss
92+
93+
94+
@media screen and(max-width: $width-small + 1){
95+
font-size: 12px;
96+
width: 1.4;
97+
}
98+
@media screen and(max-width: $width-small - 1){
99+
font-size: 12px;
100+
width: 1.4;
101+
}
102+
```
103+
컴파일
104+
105+
```CSS
106+
107+
// _style.css
108+
109+
@media screen and(max-width: 501px){
110+
font-size: 12px;
111+
width: 1.4;
112+
}
113+
@media screen and(max-width: 499px){
114+
font-size: 12px;
115+
width: 1.4;
116+
}
117+
```
118+
좀 더 응용해서 미디어쿼리 전체를 변수로 지정할 수도 있습니다.
119+
120+
```SCSS
121+
122+
// _style.scss
123+
124+
$mobile-first: "screen and (min-widht: 300px)";
125+
126+
@media #{$movile-first}{
127+
#content {
128+
font-size:14px;
129+
line-height:1.5;
130+
}
131+
}
132+
```
133+
```CSS
134+
135+
// _style.css
136+
137+
@media screen and (min-widht: 300px){
138+
#content {
139+
font-size:14px;
140+
line-height:1.5;
141+
}
142+
}
143+
```
144+
145+
#### @content블록과 믹스인 결합시키기.
146+
147+
`@content` 지시자를 사용해서 스타일 블록 전체를 믹스인으로 넘길 수 있습니다.
148+
Sass는 컴파일 하면서 그 블록을 믹스인을 호출하는 선언 안에 다시 넣을 것 입니다.
149+
150+
아래는 예시입니다. 서로다른 3개의 해상도 분기점을 가진 반응형 믹스인을 만들고 각 해상도 분기점에 포함시킬 스타일을 `@content`에 담아 제어합니다.
151+
152+
```SCSS
153+
154+
$width-small : 400px;
155+
$width-medium: 760px;
156+
$width-large: 1200px;
157+
158+
@mixin responsive($width){
159+
@if $width == wide-screens{
160+
@media only screen and ( max-width: $width-large){
161+
@content;
162+
}
163+
}
164+
@else if $width == medium-screens{
165+
@media only screen and ( max-width: $width-medium){
166+
@content;
167+
}
168+
}
169+
@else if $width == small-screens{
170+
@media only screen and ( max-width: $width-small){
171+
@content;
172+
}
173+
}
174+
175+
}
176+
177+
```
178+
179+
믹스인을 삽입할 대 넘겨줄 $width 변수의 값을 확인하기 위해 @if와 @else 문을 사용합니다.
180+
예를 들어 우리가 믹스인에 medium-screen 변수를 넘겨주면 Sass는 $width-medium 변수에 설정한 값인 `760px`을 `max-width`에 넣어 미디어쿼리를 컴파일할 것입니다. `@content`는 더 나아가 미디어쿼리를 삽입할 믹스인에 스타일 블록을 넘겨줄 수 있습니다.
181+
182+
```SCSS
183+
184+
#content{
185+
float:left;
186+
width: 70%;
187+
}
188+
@media only screen and ( max-width: 1200px){
189+
#content{
190+
width:80%;
191+
}
192+
}
193+
@include responsive(wide-screens){
194+
#content{
195+
width:50%;
196+
font-size:14px;
197+
}
198+
}
199+
@include responsive(wide-screens){
200+
#content{
201+
float:none;
202+
width:100%;
203+
font-size:12px;
204+
}
205+
}
206+
```
207+
컴파일
208+
209+
```Css
210+
211+
#content{
212+
float:left;
213+
width: 70%;
214+
}
215+
@include responsive(wide-screens){
216+
width:80%;
217+
}
218+
@include responsive(wide-screens){
219+
width:50%;
220+
font-size:14px;
221+
}
222+
@include responsive(wide-screens){
223+
float:none;
224+
width:100%;
225+
font-size:12px;
226+
}
227+
}
228+
```
229+
230+
231+
232+
###retinize 믹스인
233+
234+
```SCSS
235+
236+
@mixin retinize($file, $type, $width, $height){ //4개의 인자설정
237+
background-image:url('../img/' + $file + '.' +$type);
238+
//제조사 접두어 속성
239+
@media (-webkit-min-device-pixel-ratio: 1.5),
240+
(min--moz-device-pixel-ratio: 1.5),
241+
(-o-min-device-pixel-ratio: 3/2),
242+
(min-device-pixel-ratio: 1.5),
243+
(min-resolution: 1.5dppx){
244+
245+
&{
246+
background-image: url('../img/' + $file + '-2x.' +$type);
247+
-webkit-background-size: $width $height;
248+
-moz-background-size: $width $height;
249+
background-size: $width $height;
250+
}
251+
}
252+
}
253+
254+
```
255+
256+
```SCSS
257+
258+
// retinize 믹스인 사용예제
259+
260+
li.dribbble a{
261+
@include retinize('icon-dribbble', 'png', 24px, 24px);
262+
}
263+
264+
```
265+
266+
위의 retinize 믹스인안에 믹스인을 넣어 코드를 한단계 더 줄여봅시다.
267+
268+
```SCSS
269+
270+
@mixin retinize($file, $type, $width, $height){
271+
background-image:url('../img/' + $file + '.' +$type);
272+
273+
//픽셀의 밀도부분을 재사용 가능한 변수로 변경
274+
@media #{$is-hidpi} {
275+
276+
&{
277+
background-image: url('../img/' + $file + '-2x.' +$type);
278+
//background-size를 믹스인으로 변경
279+
@include background-size($width,$height)
280+
}
281+
}
282+
}
283+
284+
```
285+
```SCSS
286+
$hidpi: "(-webkit-min-device-pixel-ratio: 1.5),
287+
(min--moz-device-pixel-ratio: 1.5),
288+
(-o-min-device-pixel-ratio: 3/2),
289+
(min-device-pixel-ratio: 1.5),
290+
(min-resolution: 1.5dppx)"
291+
292+
$mixin background-size($width, $height) {
293+
-webkit-background-size: $width $height;
294+
-moz-background-size: $width $height;
295+
background-size: $width $height;
296+
}
297+
```
298+
299+
300+
##참고문서
301+
####웹사이트와 블로그
302+
* [Sass 참고문서](http://bkaprt.com/sass/15/)
303+
Sass에 관한 모든 정보가 있는 공식 문서.
304+
305+
* [The Sass Way](http://bkaprt.com/sass/16/)
306+
'Sass와 콤파스를 이용한 Css 작성법에 대한 최신 소식과 주제를 다룹니다' '
307+
308+
* [Css Tricks](http://bkaprt.com/sass/17/)
309+
Css를 직접 작섷ㅇ하는 분들에게 Sass가 얼마나 유용한지에 대해 유사한 고나점을 공유할 수 있습니다.
310+
크리스 코이어의 [스타일 가이드](http://bkaprt.com/sass/18/) 입니다.
311+
312+
* [Sass 조립하기](http://bkaprt.com/sass/19/)
313+
기초부터 고급까지 배울 수 있는 코드 스쿨(coad school)의 종합코스입니다.
314+
315+
* [Sass 시작하기](http://bkaprt.com/sass/20/)
316+
데이비스 디마리(David Demaree)가 어 리스트 어파트(A List Apart)에 기고한 훌륭한 입문자용 글입니다.
317+
318+
* [Sass의 미래 들여다 보기](http://bkaprt.com/sass/21/)
319+
데이비드 월시(David Walsh)는 Sass의 향후 버전에서 새로 추가도리 기능들ㅇ르 평가해줍니다.
320+
321+
322+
####믹스인 라이브러리
323+
324+
* [콤파스.프레임워크(Compass.framwork)](http://bkaprt.com/sass/22/)
325+
콤파스는 크리스 엡슈타인(chris eppstenin)이 만든 Sass 확장프레임워크.
326+
콤파스는 미리 작성된 수많은 Css 패턴들을 제공합니다. 이 패턴들은 각 속성이 진화하면서 업데이트 되고 이에 맞추어 개발사 접두어도 사제 가능합니다.
327+
콤파스는 스프라이트 이미지와 서체를 쉽게 작업하도록 해줍니다.
328+
329+
* [버번 라이브러리(Bourbon)](http://bkaprt.com/sass/23/)
330+
'간단하고 가벼운 Sass용 믹스인 라이브러리'라고 홍보하는 버번은 보스턴 동료들의 회사인 소트봇 (thoughtbot)을 통해 엄청난 믹스인 자료를 제공합니다.
331+
332+
* [Handy Sass Mixins](http://bkaprt.com/sass/24/)
333+
제이크 브레스너한(Jake Bresnehan)의 멋진 Sass 믹스인 컬렉션 입니다.
334+
335+
####Sass와 반응형 디자인에 대한 추가자료.
336+
337+
[Sass의 반응형 웹디자인과 미디어 쿼리에 관한 글 1](http://bkaprt.com/sass/25/)
338+
[Sass의 반응형 웹디자인과 미디어 쿼리에 관한 글 2](http://bkaprt.com/sass/26/)
339+
340+
* [Breakpoint](http://bkaprt.com/sass/27/)
341+
Sass 플러그인으로 미디어 쿼리를 좀 더 간단히 작성하게 해줍니다.
342+
343+
* [Susy](http://bkaprt.com/sass/28/)
344+
콤파스와 Sass의 동반자로 반응형 그리드 시스템을 만드는데 도움을 줍니다.
345+
346+
* [Sassaparilla](http://bkaprt.com/sass/29/)
347+
갓 서비스하기 시작한 프레임워크로 콤파스와 Sass를 이용한 반응형 웹 디자인 프로젝트를 생성합니다.
348+
349+
####Sass툴
350+
351+
* [파이어버그를 위한 파이어사스](http://bkaprt.com/sass/30/)
352+
디버깅 용도로 유용한 파이어폭스 애드온. 원본 Sass 파일명과 Sass로 컴파일된 스타일시트의 줄번호를 표시해줍니다.
353+
354+
* [Sass와 크롬 개발자도구로 개발하기](http://bkaprt.com/sass/31/)
355+
Sass로 개발하는 동안 크롬을 가장 활용할 수 있는 방법에 대해 알려주는 튜토리얼.

0 commit comments

Comments
 (0)