728x90
사진이 보이지 않으시다면 Notion에서도 볼 수 있습니다.
SCSS
Date: Nov 10, 2019
설치
아래의 extension을 vscode에서 설치 해주세요
- live sass compiler
- live server
live sass compiler 사용
-
index.html 준비
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div class="container1"> <h1>Hello</h1> </div> <div class="container2"> <h1>World</h1> </div> </body> </html> -
sass 파일 생성
style.scss
body { background : pink } -
live sass 실행
-
cmd + shift + p
-
live sass
아래와 같이 output 결과가 나오면서
scss가css로 컴파일 됩니다.
아래와 같이 style.css와 style.css.map을 생성하게 됩니다.
-
-
style.css 연결
이제 컴파일된 css 파일을 index.html에 연결하면 됩니다. 아래의 코드를
<header>안에 넣어 주세요<link rel="stylesheet" href="style.css" /> -
live server 실행
-
shift + cmd + p
-
live server
-
그러면 다음과 같은 화면을 볼 수 있습니다.
SASS 기능
크게 4개의 메인과 2개의 사이드 기능이 있습니다.
main
- variable
- import
- function
- extend
side
- nested css
- calculatioin
보다시피 메인 기능은 일반적인 java나 javascript 처럼 변수, 함수, 임포트, 상속의 개념들을 사용하고 있습니다.
scss를 새로운 언어라고 생각하기 보다는, css를 프로그래밍의 관점에서 재사용 가능하고 분리된 css 코드를 작성 할 수 있도록 하는 것이 중요할 것 같습니다.
메인 기능
1. variable
-
변수 지정
$변수이름 : 원하는값
style.scss
$h1-color: white;
h1 {
color : &h1-color
} 
2. import
- scss 파일 불러오기
- scss 파일을 따로 만들어서 불러 올 수 있습니다.
@import scss파일명
_h1.scss
h1 {
color : &h1-color
} style.scss
$h1-color: white;
@import "./_h1";
3. function
-
함수 지정
// 정의 @mixin 함수명(&변수) { css: &변수 } // 호출 시 @include 함수명(변수)
_h1.scss
@mixin font-border($border-color) {
text-shadow:
-1px -1px 0 $border-color,
1px -1px 0 $border-color,
-1px 1px 0 $border-color,
1px 1px 0 $border-color;
}
h1 {
@include font-border(gray);
...
}
여기서 만약 gray 대신 orange 색을 주고 싶다면
h1 {
@include font-border(gray);
...
}
4. extend
- css 블록 호출
@extend css태그;
style.scss
.container1 {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container2 {
@extend .container1;
}- 위의 코드를 적용하면 아래와 같이 container1의 내용이 container2에 똑같이 적용됩니다.
부가 기능
1. nested css
- css 구문 안에 다른 css 구문 저장
.container1 { h2 { font-size : 100px; } } - &
h1 { &:hover { color: purple; } }
Calculation
- 숫자 계산
width : 10*10px
728x90
