SASS 사용하기

 

1. style.scss 파일에 모든 css코드 적기

: scss는 제일 앞에 $를 써야함.

 

 

1) $임의의 변수이름 : 값; (ex. $bgBody: #efefef;)

 

2) 변수이름을 복사해서 해당 css코드에 이름을 넣어준다.

 

 

※ 참고사항

- SCSS 문법으로 작성된 코드를 실시간으로 일반 css파일로 변환하게 설정해놨기 때문에

css파일은 건들일 필요가 없음

 

- scss 작업시 축약형 안쓰는게 좋음

 

 

변수

- 자주 변경될만한 값을 특정 공간에 저장을 해서

- 해당 값을 필요한 곳에 재활용할때

 

 

 

2. scss파일을 기능별로 분리하기

- 분리할 scss구문을 _파일명.scss로 분리

 

부분파일을 만들때 규칙 _파일명.scss

 

- style.scss 파일에 @import "파일명.scss"; 연결

 

 

 

 

 

 

SCSS의 핵심기술

1) nesting[네스팅]

HTML 중첩구조와 동일하게 scss 구조를 변경

 

 

html에 item안의 요소들

 

style.scss에서 중첩구조는 안쪽에 같이 적어준다.

 

.item요소안에 hover도 넣을 수 있다.

 

 

 

 

 

 

2) mixin

바뀔만한 값들을 미리 함수에 지정해서 호출해서 쓴다.

ex) 클라이언트가 버튼 크기, 모양 등을 자주 바꿔달라고 할 때

 

 

 

[우선 mixin을 활용하기 위한 틀 만들기]

 

1. _mixin.scss 파일을 만들어서

@mixin 함수이름 () { 버튼코드내용 } 입력

 

 

 

 

2. style.scss에서

@import "mixin.scss"; 넣어주고

 

원래 버튼css코드 넣었던 a태그에다가

a { @include button(); } 입력

 

 

 

[mixin와 파라미터값 활용]

 

1. @mixin에 파라미터값 적용 ($wid, $ht, $bgColor 등등)

2. style.scss에 적용할 a태그에 @include button(80px, 30px, aqua 등등);

- @mixin에 입력한 파라미터를 a태그에 순서대로 적용

- 하지만, 파라미터가 많아지면, 순서대로 적을때 헷갈리면 틀어질수 있기 때문에 default값이 필요

 

3. 사용자가 특정값을 입력안하면, 입력한 값 대신 들어가게 default값 지정

ex) @mixin button ($wid:80px, $ht:30px, $bgColor:aqua, $color:#fff, 등)

 

※파라미터 : 메소드 수행에 필요한 입력값을 저장하는 변수

- 파라미터가 있으면 원하는 값을 집어넣어서 활용할 수 있다.

 

 

 

4. _mixin.scss에서 파라미터값을 다 입력하고나면

style.scss에서 적용할 a태그에 default값에서 바뀔부분만 적용

 

 

 

 

 

 

3) sass for

for라는 반복문을 활용

 

@for $i from 1 through 4 {}
//1부터 4까지까지 지정하겠다.

@for $i form 1 to 4 {}
//4이전까지만 지정 하겠다.

 

1부터 10까지만 지정하겠다라는 뜻