css 전처리도구Preprocessor
sass->css(컴파일)
vscode - 터미널 -
npm init -y
- npm i -D parcel-bundler
-package.json열기
-"scripts": {
"dev": "parcel index.html",
"build": "parcel build index.html"},
-index.html생성
-main.scss생성
-파일수정
$color: royalblue;
.container {
h1 {
color: $color;
}
}
-터미널
-npm run dev주석: /* */, //
중첩 with SassMeister
https://www.sassmeister.com/
{}로 하면 후손 선택자로 compile되므로,
자식선택자로 하려면
.container {
> ul {
font-size: 40px;
}
}꺽쇠>를 사용
상위(부모) 선택자 참조
&사용
.btn {
position: absolute;
&.active {
color: red;
}
}=> .btn.active
.list {
li {
&:last-child {
margin-right: 0;
}
}
}=>.list li:last-child
.fs {
&-small {font-size: 12px;}
&-medium {font-size: 14px;}
}중첩된 속성
.box {
font: {
weight: bold;
size: 10px;
};
margin: {
top: 10px;
left: 20px;
};
}.box {
font-weight: bold;
font-size: 10px;
margin-top: 10px;
margin-left: 20px;
}font라는 네임스페이스, margin이라는 네임스페이스
변수
$size: 100px;
산술연산
div {
width: 20px + 20px;
height: 40px - 10px;
font-size: 10px *2;
margin: 30px / 2;
padding: 20px % 7;
}div {
width: 40px;
height: 30px;
font-size: 20px;
margin: 30px/2;
padding: 6px;
}font-size,line-height,font-family를
font: 10px / 10px serif;로 단축속성을 사용하여 나타낼 수 있다.
그래서 나누기 기호가 사용불가
해결방법
margin: (30px / 2); ()로 묶기
margin: $size / 2; 변수사용
margin: 10px + 12px / 2; 다른 연산자와 함께 사용
margin: (10px + 12px) / 2;기본적으로 연산은 단위가 같아야 하지만 clac함수를 이용하면 다른 단위끼리의 연산결과를 표시가능
width: calc(100% - 200px);
재활용(Mixins)
@mixin center {
display: flex;
justify-content: center;
align-items: center;
}
.container {
@include center;
.item {
@include center;
}
}.container {
display: flex;
justify-content: center;
align-items: center;
}
.container .item {
display: flex;
justify-content: center;
align-items: center;
}매개변수 사용
@mixin box($size) {
width: $size;
height: $size;
}
.container {
@include box(200px);
.item {
@include box(100px);
}
}.container {
width: 200px;
height: 200px;
}
.container .item {
width: 100px;
height: 100px;
}기본값 사용
@mixin box($size: 100px) {
width: $size;
height: $size;
}
.container {
@include box(200px);
.item {
@include box;
}
}.container {
width: 200px;
height: 200px;
}
.container .item {
width: 100px;
height: 100px;
}2번째 매개변수 사용
@mixin box($size: 100px, $color: tomato) {
width: $size;
height: $size;
background-color: $color;
}
.container {
@include box(200px, red);
.item {
@include box;
}
}.container {
width: 200px;
height: 200px;
background-color: red;
}
.container .item {
width: 100px;
height: 100px;
background-color: tomato;
}키워드인수
@mixin box($size: 100px, $color: tomato) {
width: $size;
height: $size;
background-color: $color;
}
.container {
@include box(200px, red);
.item {
@include box($color: green); 키워드 인수
}
}.container {
width: 200px;
height: 200px;
background-color: red;
}
.container .item {
width: 100px;
height: 100px;
background-color: green;
}반복문
@for $i from 1 through 10 {
.box {
width: 100px;
}
}.box {
width: 100px;
}
10번 실행보간
@for $i from 1 through 10 {
.box:nth-child(#{$i}) {
width: 100px;
}
}@for $i from 1 through 10 {
.box:nth-child(#{$i}) {
width: 100px * $i; 값을 넣는 부분은 그대로
}
}함수
@function ratio($size, $ratio) {
@return $size * $ratio
}
.box {
$width: 100px;
width: $width;
height: ratio($width, 1/2);
}.box {
width: 100px;
height: 50px;
}색상 내장 함수
mix
$color: royalblue;
.box {
background-color: mix($color, red);
}.box {
background-color: #a03571;
}lighten 색상을 밝게 만들어 준다
$color: royalblue;
.box {
background-color: lighten($color, 10%);
}darken 색상을 어둡게 만들어 준다
$color: royalblue;
.box {
background-color: darken($color, 10%);
}saturate 채도를 올려준다.
$color: royalblue;
.box {
background-color: saturate($color, 10%);
}desaturate 채도를 낮혀준다.
$color: royalblue;
.box {
background-color: desaturate($color, 10%);
}grayscale 주어진 색상을 회색으로 만들어 준다.
$color: royalblue;
.box {
background-color: grayscale($color);
}invert 색상을 반전시킨다
$color: royalblue;
.box {
background-color: invert($color);
}rgba 투명도 조절
$color: royalblue;
.box {
background-color: rgba($color, .5);
}가져오기
@import url("./sub.scss");
@import "./sub.scss";
@import "./sub"; 확장자를 명시안해도됨
@import "./sub", "./sub2";
데이터 종류
$number: 1;
$string: bold;
$color: red;
$boolean: true;
$null: null;
$list: orange, royalblue, yellow; 배열과 비슷
$map: ( 객체와 비슷
o: orange,
r: royalblue,
y: yellow
);반복문 @each
$list: orange, royalblue, yellow;
$map: (
o: orange,
r: royalblue,
y: yellow
);
@each $c in $list {
.box {
color: $c;
}
}map
$map: (
o: orange,
r: royalblue,
y: yellow
);
@each $k, $v in $map {
.box-#{$k} {
color: $v;
}
}.box-o {
color: orange;
}
.box-r {
color: royalblue;
}
.box-y {
color: yellow;
}재활용 @content
@mixin left-top {
position: absolute;
top: 0;
left: 0;
@content;
}
.box {
width: 200px;
height: 300px;
@include left-top {
bottom: 0;
right: 0;
margin: auto;
}
}.box {
width: 200px;
height: 300px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}