SCSS

김덕근·2023년 5월 16일
0

SCSS

목록 보기
1/1

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";

profile
안녕하세요!

0개의 댓글