안녕하십니까~

바로 이어서 강좌를 작성해보겠습니다.

먼저 Scss란 뭔지부터 알아야겠죠?

html을 작성하고 css를 사용해서 웹페이지의 디자인을 꾸미고 인터렉션을 넣어줍니다.

이 css는 작성을 하다보면 상당히 길어집니다.

그 css를 효율적으로 관리하고 수정하기 위해서 scss를 쓰게 됩니다.

scss(sass)외에 less, stylus가 있습니다. 이 3개가 가장 많이 쓰이고 있습니다.

우리는 이를 전처리기라고 부르고 있습니다.

브라우저는 html, css를 읽어드립니다. 그렇기때문에 브라우저가 css를 읽어드리기 전에 scss로 작성을 하는 것입니다.

https://rubyinstaller.org/downloads/

위 링크로 이동해 설치를 진행해주시면 되겠습니다.

설명은 이쯤에서 끝내도록 하겠습니다.

먼저 scss 설치가 되었으면 .scss파일을 생성해줍니다.

이 작업을 할 때에는 한가지 해야 할 점이 있습니다.

위에서 말했듯이 웹 브라우저는 css를 읽어드립니다. scss를 읽어드릴 수가 없습니다.

그렇기 때문에 scss를 css를 변환해주는 작업을 해야합니다.

명령 스트롬프(cmd)를 열어 저 작업을 진행하고 있는 폴더로 경로 이동을 해줍니다.

*주의 : scss를 변환을 할 대 한글을 읽어드리지 못하는 경우가 많습니다. 모든 경로내에 한글이름이 있으면 안됩니다.

자 scss가 있는 경로로 이동했으면 cmd 창에

sass ---watch style.scss:style.css를 적어줍니다.

저 명령어는 컴파일 명령어입니다.

sass명령어라는 걸 이야기하는 것이고 --watch는 계속해서 보고 있는 걸 이야기합니다.

style.scss:style.css는 style.scss파일을 style.css폴더로 변환시켜달라 라는 말입니다.

이렇게 녹색글씨가 뜨고 폴더에 style.css파일이 생성되었따면 다 됬습니다.

이제 수정을 하고 저장을 하면 자동으로 변환작업을 진행해줄 것입니다.

여기까지가 scss파일 외부에서 할 일이고 지금부터 작성을 해보도록 하겠습니다.

일반 css경우

이런 식으로 작성이 됩니다. 선택자가 많아지게 되죠.

이렇게 되면 원하는 곳을 쉽게 찾아가기도 힘들고 추가를 해야 할 때 상당히 골머리를 썩게 됩니다.

아래의 이미지는 scss로 작성을 한 것입니다.

왼쪽은 scss로 작성 된 것, 우측은 css로 컴파일 된 것입니다.

우측 이미지와 위의 있는 이미지와 동일하게 생긴게 보이시나요?

이런식으로 scss로 작성을하며 컴파일이 되고 우측과 같이 css로 풀리게 됩니다.

우리는 css를 건드리지 않고 scss를 수정하면 됩니다.

css를 건드리는 순간 scss는 소용이 없어지고 최신화 관리를 할 수 없게 됩니다.

scss의 작성 방식을 보면서 혼자 직접 해보시면 빠르게 익숙해질거예요.

다음 강의는 scss의 기능들을 알아보도록 하겠습니다.