1. SASS란?
CSS를 프로그래밍언어스럽게 작성한 Preprocessor
•
CSS에서 변수, 연산자, 함수, extend, import 이런걸 사용가능하다
•
브라우저는 SASS문법을 모른다 그래서 SASS로 작성한 파일을 다시 CSS 파일로 컴파일해야한다!
•
node-sass가 컴파일해준다
•
node-sass 설치명령어
yarn add node-sass
npm install node-sass
JavaScript
복사
•
원하는파일을 생성 후 파일명 뒤에 파일명.scss라고 붙여준다
•
import ‘/파일명.scss’ 해주기
import './Detail.scss';
JavaScript
복사
2. SASS를 왜 쓰는걸까 ?
•
프로그래밍스럽게 코드를 짤 수 있다.
•
변수에 데이터를 저장해서 쓸 수 있음
/*
1.$변수명 : 변수에 넣을 값
2. @import 파일경로
3.reset.scss파일 같은경로는 파일명은 _reset.scss라고쓴다(전역에서 다 쓸거니깐)
4.nesting >>
div container {
div {
color : red
}
p {
color : blue
}
}
5.@extend : extend는 css설정을 extend하는 설정이다 @extend하면 끝
6.@mixin : 함수만드는 문법
7.@include
*/
$메인칼라 : #ff0000;
.red{
color : $메인칼라;
}
@mixin 함수() {
background: #eeeeee;
padding: 20px;
border-radius: 5px;
max-width: 500px;
width: 100%;
margin: auto;
}
.my-alert{
@include 함수()
}
.my-alert2 {
@extend .my-alert;
background: #ffe591;
}
.my-alert p {
margin-bottom: 0;
}
//nesting 문법
div.container {
h4 {
color : blue;
}
p {
color : green;
}
}
JavaScript
복사
