SCSS (3)

Haze1·2023년 3월 14일
0

공부

목록 보기
5/5

색상내장함수

$color: royalblue;

mix($color, red); //인수의 색을 섞음

lighten($color, 10%); // %만큼 밝게 만들어줌
darken($color, 10%); // %만큼 어둡게 만들어줌

saturate($color, 10%); // %만큼 채도가 올라감
desaturate($color, 10%); // %만큼 채도가 내려감

grayscale($color); // 인수의 색의 grayscale
invert($color); // 인수의 색을 반전

rgba($color, .5); // 인수의 색의 투명도 (.5) 설정 //2개의 인수
/* css */
rgba(0,0,0,.5); //4개의 인수 사용

// 사용예시

&:hover {
	background-color: darken($color, 10%);
}

//버튼에 마우스를 올리면 (hover) 버튼 색이 어두워짐

데이터 종류

$number: 1;       // .5, 100px, 1em
$string: bold;    // relative, "../images/a.png"
$color: red;      // blue, #FFFF00, rgba(0,0,0,.1)
$boolean: true;   // false
$null: null;
$list: orange, royalblue, yellow;
$map: (
	o: orange,
    r: royalblue,
    y: yellow
);

map : 객체데이터 (key: value) (자바스크립트의 object)

profile
hello

0개의 댓글