css의 확장언어이다
css + 기능첨가
css보다 조금 더 높은 자유도를 개발자들에게 부여
변수, 반복문, 가정문 ...
브라우저 : html, js, css, sass, scss
SCSS
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color<index.html>
<body>
<div class="box"></div>
</body>
-------------------------------------
<main.scss>
body {
.box {
width: 100px;
height: 100px;
border: 1px solid black;
&:hover{
background-color: white
}
}//변수 : 변하는 수 (모든것...?)
$ : 기호+ 작명" : 저장할 내용";
$primary-color: #333;
SASS에 내장되어 있는 색관련 함수
/*
- darken : 어둡게
- lighten : 밝게
- saturate : 더 선명하게(높은 채도)
- desaturate : 더 흐리게(낮은 채도)
- adjust-hue : 명도 변경
- rgba : alpha값 변경
*/
background-color: darken($color, 20%);
background-color: lighten($color, 20%);
background-color: saturate($color, 20%);
background-color: desaturate($color, 20%);
background-color: adjust-hue($color, 60deg);
background-color: rgba($color, 0.3)/ extend : css 스타일 확장/
.btn {
padding: 10px 20px;
cursor: pointer;
background-color: inherit;
border: 1px solid lightgray;
border-radius: 14px;
}
.btn-1 {
@extend .btn; // btn스타일 상속 .btn .btn1 {}
border: 1px solid red;
color: red;
font-weight: bold;
} / % : 임시클래스 /
//css에서만 임시 스타일 선언
%btn {
padding: 10px 20px;
cursor: pointer;
background-color: inherit;
border: 1px solid lightgray;
border-radius: 14px;
}
.btn-1 {
@extend %btn;
border: 1px solid blue;
color: blue;
font-weight: bold;
}
.btn-2 {
@extend %btn;
border: 1px solid blue;
color: blue;
font-weight: bold;
}/ mixin /
@mixin 버튼($테두리 : black, $글자색 : black) {
padding: 10px 20px;
cursor: pointer;
background-color: inherit;
border: 1px solid lightgray;
border-radius: 14px;
border: 1px solid $테두리;
color: $글자색;
}
.btn-1 {
@include 버튼($r글자색 :red);
}
.btn-2 {
@include 버튼(blue, blue);
}/ operator : 연산자, + - */
.box {
width: (200px / 2);
height: 100px;
border: 1px solid red;
font: italic small-caps bold 16px/2 cursive;
}/ use를 통해 다른 파일 가져오기/
<_test.scss>
$변수 : red;
div {
width: 100px;
height: 100px;
border: 1px solid red;
}
<main_scss>
/* 반복문, 가정문(조건문), 변수 : 배열, 오브젝트*/
@use "test" as c;
@import url();
.box {
color: $변수;
}