SASS가 뭔데? CSS 그냥 쓰면 안돼?
SASS 의 풀네임은
Syntactically Awesome Style Sheets
SASS는 위 내용의 약자입니다. 해석한다면 "문법적으로 짱 멋진 스타일시트"라는 뜻이 됩니다. 막상 해석을 하고나니 굉장히 볼품 없어 진것 같아요. 초딩들이 "초 울트라 짱짱 멋진 가방" 막 그러는것 같네요. 어쨋든 좋은거랍니다.
저는 이미 즐겨 쓰기 때문에 보증할 수 있는데, CSS에 코딩이 들어간 구조라 반복작업을 훨씬 더 줄여줄 수 있고, 수정도 용이한 구조입니다. 그냥 한번만 써보세요. 왜 쓰는지 다 이해가 됩니다.
koala 설치하기
- koala-app.com/ 사이트에 접속하세요.
- 설치 파일을 다운로드 할 수 있습니다.
- 다운로드 받은 파일 설치
- 설치만 하면 되므로 난이도는 아주 쉬움입니다.
SASS 첫 프로젝트 생성하기(환경설정)
- Sass 작업을 할 폴더를 하나 생성하세요.
- 제가 테스트해본 바로는 외국프로그램이라 한글이 들어간 폴더를 쓰면 간혹 인식 못하고 에러가 나는 경우가 있으니 되도록 영문이나 숫자로 생성해 주세요.
- 저는 D:\sass_test 라는 폴더를 만들었습니다.
- VS CODE를 실행해서 새 프로젝트를 열었습니다.
- 빈폴더를 생성해서 css 라고 이름짓겠습니다.
- css 폴더에 style.scss 파일을 생성하겠습니다.
- 작업 루트 폴더(D:\sass_test)에 index.html을 생성하겠습니다.
- index.html 파일을 열어 html:5 라고 입력합니다.
- <head></head> 사이에 <Link href="css/style.css" rel="stylesheet" />
- koala를 통해 css가 자동 생성되나요?
- 작업 할 수 있는 환경 설정 작업이 완료 되었습니다.
갑자기 왠 SCSS? SASS라며...
SASS와 SCSS는 크게 다르지 않습니다. 사실 같은거나 다름 없습니다. 유일한 차이는 중괄호({}), 세미콜론(;) 입니다. 눈치 채셨겠지만 별 차이가 없죠? SASS 탄생 했을 당시, 너무 간결해서 개발자들이 불편을 호소했다고 합니다. 그래서 SASS의 기능에 css 문법을 사용한 형태로 변하게 됩니다.
첫 scss 사용해보기
body{
background: black
}
저장해보시면 파일이
SASS 작성 규칙
아래 사항은 권장사항이자 선택사항입니다.
- 탭 대신 스페이스 두 칸(2)만 들여쓰기
- 이상적인 행의 너비는 80 글자 라고 합니다.
- CSS 규칙처럼 ';' 기호 사용해서 여러행 작성
- 공백의 의미 있는 사용
// 맞음
.wrap {
display: block;
overflow: hidden;
margin: 0 auto;
}
// 틀림
.wrap {
display: block; overflow: hidden;margin: 0 auto;
}
- 문자열은 작은 따옴표를 권장(다른 언어와의 일관성을 위해, 작은 따옴표가 입력하기 쉬우므로)
$direction: 'left'
- 숫자 중 0은 써줘야 하며, 0인 경우 단위는 적지 않습니다.
$width: 0; //(O)
$width: 0px; //(X)
※ ... 너무 기네요. 공식 문서는 더 있는데 중요한건 이 정도면 될것 같습니다. 필요하신 분들은 원문을 읽어보시기 바랍니다.
읽어주셔서 감사드리고, 다음강의에서 뵙겠습니다.
2019/07/13 - [프로그램 강좌] - [SASS]#2 주석, 변수 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS
2019/07/15 - [프로그램 강좌] - [SASS]#3 Extend, Mixin : 디자이너, 퍼블리셔들을 위한 쉬운 SASS
2019/07/17 - [프로그램 강좌] - [SASS]#4 Function placeholder : 디자이너, 퍼블리셔들을 위한 쉬운 SASS
2019/07/19 - [프로그램 강좌] - [SASS]#5 조건문, 삼항연산자 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS
2019/07/21 - [프로그램 강좌] - [SASS]#6 반복문 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS
'프로그램 강좌' 카테고리의 다른 글
| [SASS]#3 Extend, Mixin : 디자이너, 퍼블리셔들을 위한 쉬운 SASS (0) | 2019.07.15 |
|---|---|
| [SASS]#2 주석, 변수 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS (0) | 2019.07.13 |
| [html03]CSS가 뭔데? 텍스트 꾸며보기 (0) | 2019.07.11 |
| [html02]html = head + body (0) | 2019.07.08 |
| [html01]코딩은 누구나 할 수 있다? (0) | 2019.06.22 |
