npm init -y
package.json 파일 생성
npm i -D parcel-bundler
package-lock.json
node_modules 생성
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
test부분
"dev": "parcel index.html";
"build": "parcel build index.html" 변경
& 상위 선택자 참조
.container { ul { position: absolute; .name { color: royalblue; } &:last-child { margin-right: 0; } } }
중첩된 속성
padding: { top: 10px; bottom: 20px; left: 20px; right: 30px; };
변수(Variables)
$size: 100px;
산술연산
margin: 30px/2; 사용 불가 margin: (30px/2); $size: 10px; margin: $size / 2;
재활용(Mixins)
@mixin center { display: felx; justify-content: center; align-items: center; } .container { @include center; .item { @include center; } } ====================================================== @mixin box($size: 100px, $color: tomato) { width: $size; height: $size; background-color: $color; } .container { @include box(200px, red); .item { @include center; @include box($color: green); } } ====================================================== @mixin left-top { position: absolute; top: 0; left: 0; @content; } .box { width: 100px; height: 100px; @include left-top { bottom: 0; right: 0; margin: auto; } }
반복문
@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, 9/16); @include: center; }
색상 내장 함수
&:hover { boackground-color: mix($color, red); boackground-color: lighten($color, 10%); boackground-color: darken($color, 10%); boackground-color: saturate($color, 10%); boackground-color: desaturate($color, 10%); boackground-color: grayscale($color); boackground-color: invert($color); boackground-color: rgba($color, .5); }
가져오기
@import url("경로");
@import "경로", "경로1";