색상내장함수
$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)
hello