구글에 있는 css 템플릿을 긁어오기 위해서 sass에 대한 공부가 필요함을 느꼈다.. 들어가보자고..
scss는 css와 별반 다를게 없다고 생각하자 (이름만큼 쉬움)
Sass 파일 컴파일시 생성되는 css.map 파일의 용도는 크롬 개발자도구 디버깅용
어려운 단어 기억해야할 때 변수문법을 쓴다.
$변수명 : 저장해서 쓸 (클래스화를 해버림)
ex) $main-color : #2a4cb2
규칙적인 스타일을 만들때 도움이 된다.(변수로 저장, 사칙연산)
//scss
$main__size : 16px;
.background{
font-size: $main__size - 2px;
}
.box{
font-size: $main__size + 2;
}
//css 컴파일링
.background {
font-size: 14px;
}
.box {
font-size: 18px;
}
사실 원래 css 자체 변수 함수문법도 있다
:root{
--main-color : red;
}
.background{
background: var(--main-color);//들고올때는 var로.. 불편함
width: calc(40% - 20px); //calc 사용하면 사칙연산도 가능
}
비슷하지만 sass 문법이 더 사용하기 더 편하다.
.sass 파일은 Sass 문법 사용가능한데 괄호를 안써도 된다. 그 차이뿐 scss 파일을 사용하자(더익숙)
//sass
.background
color : red
//css
.background {
color: red;
}/*# sourceMappingURL=test2.css.map */
-관련있는 class들 묶을 때 좋다.
-nesting은 두개 이상 중첩 안하는게 좋다
.main-bg h4{
font-size: 16px;
}
.main-bg button{
color: red;
}
.main-bg{
h4{
font-size: 16px
}
button{
color: red;
}
}
여러색의 버튼을 만들어야 한다고 (여러종류일때 ) 가정했을때 중복을 없애려면 뼈와 살을 분리하는게 중요하다
sass를 사용하면 중복을 없앨수 있다.
.btn-green{
width: 100px;
height: 100px;
padding: 20px;
color: green;
}
.btn-red{
width: 100px;
height: 100px;
padding: 20px;
color: red;
}
.btn-blue{
width: 100px;
height: 100px;
padding: 20px;
color: blue;
}
@extend를 이용해서 코드 재사용성을 높일 수 있음
//sass
%button{ // 중복된 스타일을 %로 클래스화 해주고 (임시클래스)
width: 100px;
height: 100px;
padding: 20px;
}
.btn-green{
@extend %button; // @extend 문법으로 불러오기
color: green;
}
.btn-red{
@extend %button;
color: red;
}
.btn-blue{
@extend %button;
color: blue;
}
//css //css에서도 보기 편해짐
.btn-blue, .btn-red, .btn-green {
width: 100px;
height: 100px;
padding: 20px;
}
.btn-green {
color: green;
}
.btn-red {
color: red;
}
.btn-blue {
color: blue;}
//@extend 문법은 일반 클래스 전체를 불러올 수 있다.
@extend .box{
(원래있던 clas box ~~~~) // %를 사용한 임시클래스는 불로오는 것중 일부
}
// %임시클래스 특징 - 단독으로 컴파일이 되지 않는다
/sass
%button{
width: 100px;
height: 100px;
padding: 20px;
}
/css
//컴파일 되지 않음
//scss
@mixin 폰트스타일(){ // 임시클래스화
font-size: 30px;
letter-spacing: -1px;;
}
h2{
@include 폰트스타일() // 임시클래스사용
}
//css
h2 {
font-size: 30px;
letter-spacing: -1px;
}
//scss
@mixin 폰트스타일($폰트사이즈){//파라미터자리에 $ 쓰는것이 중요
font-size: $폰트사이즈; //불러올 $파라미터
letter-spacing: -1px;
}
h2{
@include 폰트스타일(60px);
}
h3{
@include 폰트스타일(30px);
}
//css
h2 {
font-size: 60px;
letter-spacing: -1px;
}
h3 {
font-size: 30px;
letter-spacing: -1px;}
만약 값이 아닌 글자중간에 변수나 파라미터를 넣을때는? #{$변수명}
파라미터를 받아 함수가 작동방식으로 css를 짤 수 있다!
//scss
@mixin 폰트스타일($폰트속성){
#{ $폰트속성 }: 16px;
letter-spacing: -1px;
}
h2{
@include 폰트스타일(font-size);
}
h3{
@include 폰트스타일(padding);
}
//css
h2 {
font-size: 16px;
letter-spacing: -1px;
}
h3 {
padding: 16px;
letter-spacing: -1px;}
@import
문법과 같은기능이라고 보면된다@use '불러올css파일경로'
사용하여 불러온다 끝//reset.scss 가지고올파일
$main_color : red;
@mixin main_font(){
color:blue;
font-size: 16px;
}
//main.scss 적용할파일
@use 'reset.scss'
a{
color : reset.$main_color //파일명.$변수이름
@include reset.main_font{} // @include 파일명.mixin이름
}
짧은회고
일단은 Sass를 배운 목적은 멋진 로그인 템플릿을 긁어오기 위했기 때문에 그 목적을 달성한 후에,
bootstrap 사용없이 sass로만 프론트 미니프로젝트를 만들어 보기!