공부기록

* sass에서 scss로의 변화 *

CSS - pre - precessor 

- SASS문법 존재 : 개발자들이 보기에 css와 이질감이 느껴지는 문법

- SCSS 문법으로 변경 : 기존 css 방식과 거의 흡사. 

프로그램은 sass지만 scss 문법을 사용한다.  

* sass를 사용하는 이유 : 유지보수, 확장석,  협업

0. 주석 

1. 변수 

2. 연산자 

3. 중첩 

4. 상속&import

 5. mixin 

6.함수

0. 주석처리

한줄주석처리 : //

블록주석처리 : /**/

* 블록 주석처리에 한줄 주석처리 들어갈 수 있음 

* 한줄 주석처리는 .css 파일에서 안보임

한글 주석처리를 위해 @charset "UTF-8"; 을 넣어야 한다

1. 변수 

1) 변수 선언 : $변수명 : 속성값; 

2) 변수사용 : $변수명

(HTML)

3)  global 변수와 local 변수 

-global변수 : 모든 영역에서 사용 가능

-local변수 : 해당 소괄호 안에서만 사용가능

(HTML)

- local변수 global변수 만들기

변수선언 뒤에 !global

4) 변수 사용 못하게 하기 

변수 선언 뒤에 !default

2. 연산자(계산)

(HTML)

1) 값에 직접 계산 넣기

( .css파일에서는 계산된 결과값으로 표시된다. 

.css에서는 이렇게 작성하면 오류 

.css에서는 calc(연산)으로 해야한다 )

2) 변수에 연산 넣기

(* %은 나누기 하고 남은 나머지값)

3. 선택자 중첩 

(HTML)

1) 기존의 자식선택자에 속성 넣기

2) 자식선택자 중첩하여 속성넣기

(HTML2)

3) 중첩의 중첩의... 가능 

4) 아무 처리 안했을 때 변환된 .css 

( .open.close 와 들여쓰기 ) 

5) @at-root.선택자 : 변환된 .css파일에서 .open.css 대신 .css로 나타난다. 

6) 소괄호 안에서 hover사용하기 

: 그냥 사용하면 자식태그에게 hover가 붙는다. 

-> 앞에 &을 붙여주면 띄어쓰기( 자식태그 의미) 가 없어진다.  

*cmd 에서 .css 변환하는 명령어에서 scss로 인해 만들어지는 css 포맷 형태 설정 가능 

sass --watch --style expened common.scss : 자식태그 속성 들여쓰기 x 

sass --watch --style compact common.scss : 그냥 한줄로 쓰기 

* nested :아무것도 x *

4. 상속 & import (가족)

(HTML)

1. 상속(@extend 선택자, 똑같은 내용을 그대로 받는다.) 

* .css 파일에서 face 안에 속성이 다 들어오는게 아니라 콤마(,)로 같이 표시된다

2. import (가족) : 다른 파일에서 변수를 가져온다 (@import "파일명";)

1) 새로운 scss 파일 만들기

2) 파일 안에서 변수 선언

3)

 @import "파일명"; 으로 파일 연결하기 

 $변수명 으로 변수 사용하기

5. 믹스인(mixin) : @mixin 믹스인이름(변수속성값);

상속과 비슷하지만 태그를 사용하지 않고 믹스인을 만드는것 (1) 과 argument를 이용해 몇몇의 속성값을 원하는대로 쓸 수 있다(2)는 점이 다르다

@mixin 믹스인이름 ($argument변수명) { 

속성1 : 속성값1; 

속성2 :속성값2;

...

속성n : $argument변수명; 

} 

으로 믹스인 만들고 

@include 믹스인이름($argument변수속성값); 으로불러온다

(HTML)

6. 함수 (function) 

@function 함수명($변수1, ...$변수n) {

기능

..

@return 반환값; 

}

로 함수를 선언하고 

함수명(변수값  , 변수값)

으로 사용한다 

(HTML)

SASS 란 ? 

css의 전처리기로, .css 파일 중간에 위치하는 하나의 계층. 

sass는 보다 간결하고 격식을 갖춘 css 문법을 제공하고, 스타일시트를 쉽게 관리할 수 있는 다양한 기능을 구현한다

-> 

css를 만들어주는 언어로 자바스크립트처럼 특정속성의 값을 변수로 선언하여 필요한 곳에 선언된 변수를 적용할 수 있고, 

반복되는 코드를 한번의 선언으로 여러곳에서 재사용 할 수 있도록 해주는 등의 기능을 가졌다 

( 출처 : http://wit.nts-corp.com/2015/01/09/2936 )

- ruby언어 사용 (ruby의 framework rails와 함께 ruby on rails라고 불린다. 

* ruby : 백엔드, 프론트엔드 모두 다 사용가능한 풀스텍 언어

1. sass 설치하기

1) ruby언어 설치 

( http://rubyinstaller.org/downloads )

* cmd 사용 *

시작메뉴 검색에 cmd

2) ruby 설치 확인

ruby --version

3) sass 설치 

gem install sass

4) sass 설치 확인

sass --version

5) sass file 만들기 

(확장자명 scss 의 파일

* 실험 예제 *

6) index.html에 간단한 태그 만들기

7) 작성한 scss파일에 속성 넣기

8) * css 파일로 변환 *

( scss 파일이 있는 폴더로 cmd를 이동시킨 후 해야 한다 )

cmd에 

sass 작성한파일명.scss 작성할파일명.css 

-> 파일들이 생겨난 모습

9) index.html과 css 파일 연결

10) css 파일 내용 

11) scss 파일에 변화가 있을 때마다 자동으로 css 파일을 변화시켜주는 명령어

( scss 내용 변화시킨 후 ctrl + S 로 저장하면 실시간으로 적용된다 ) 

* compatibilityerror 가 떠서 경로의 폴더명을 다 영어로 바꿨다 * 

* compatibilityerror : incompatible character encodings: UTF-8 and CP-949

: 경로에 한글로 된 폴더나 파일이 있을 경우 나타난다.