-css 의 확장언어
-css보다 조금 더 높은 자유도, 지켜야할 문법도 多
-변수, 반복문, 가정문 사용 가능
&
-부모 태그를 그대로 부를수 있음
css 땐 hover 할땐 .box로 불러 와서 했을텐데 괄호 안에 & : 로 하면 그대로 적용 가능하다
변수
-변하는 수 (모든 데이터 포함)
-$ + 작명 : 저장할 내용 ;
색관련함수
darken : 어둡게
lighten : 밝게
saturate : 더 선명하게 (높은 채도)
desaturate : 더 흐리게 (낮은 채도)
adjust-hue : 명도 변경
rgba : alpha 값 변경 (투명도)
<div>Div1</div>
<div>Div2</div>
<div>Div3</div>
<div>Div4</div>
<div>Div5</div>
<div>Div6</div>
<div>Div7</div>
$color:#d2e1dd;
body {
div {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: $color;
display: inline-block;
margin: 10px;
text-align: center;
&:nth-of-type(1){
&:hover {
background-color: darken($color, 30%);
}
}
&:nth-of-type(2){
background-color: darken($color,30%);
}
&:nth-of-type(3){
background-color: lighten($color,20%);
}
&:nth-of-type(4){
background-color: saturate($color,70%);
}
&:nth-of-type(5){
background-color: desaturate($color,20%);
}
&:nth-of-type(6){
background-color: adjust-hue($color,20%);
}
&:nth-of-type(7){
background-color: rgba($color,0.3);
}
}
}
&:nth-of-type(1){
&:hover {
background-color: darken($color, 30%);
}
hover 될때 어둡게, 밝게 많이 사용 됨
<extend>
<button class="btn">버튼</button>
<button class="btn-1">버튼</button>
.btn {
padding: 10px 20px;
cursor: pointer;
background-color: inherit;
border: 1px solid lightgray;
border-radius: 14px;
}
.btn-1 {
padding: 10px 20px;
cursor: pointer;
background-color: inherit;
border: 1px solid red;
color: red;
border-radius: 14px;
font-weight: bold;
}
btn과 btn-1 css 파일에서 중복되는 부분들이 너무 많아 내용들이 길어짐.
scss에서는 그걸 간결하게 해줄 수 있음.
.btn {
padding: 10px 20px;
cursor: pointer;
background-color: inherit;
border: 1px solid lightgray;
border-radius: 14px;
}
.btn-1 {
@extend .btn;
border: 1px solid red;
color: red;
font-weight: bold;
}
@extend.btn =>btn만 쓰면 btn과 btn-1 은 동일한 버튼 스타일을 입히게 되고
그 밑에 다른점들을 쓰게 되면 그걸로 적용하게 됨.
.btn, .btn-1 {
padding: 10px 20px;
cursor: pointer;
background-color: inherit;
border: 1px solid lightgray;
border-radius: 14px;
}
.btn-1 {
border: 1px solid red;
color: red;
font-weight: bold;
}/*# sourceMappingURL=main.css.map */
main.css에서는 btn, btn-1은 똑같이 적용이 되지만 .btn-1에 달라진점들이 뒤에 적용되게 되어 결국 보여지는건 밑에있는걸로 보여지됨.
<extend --- % 임시클래스>
<button class="btn-1">버튼</button>
<button class="btn-2">버튼</button>
%btn {
padding: 10px 20px;
cursor: pointer;
background-color: inherit;
border: 1px solid lightgray;
border-radius: 14px;
}
.btn-1 {
@extend %btn;
border: 1px solid red;
color: red;
font-weight: bold;
}
.btn-2 {
@extend %btn;
border: 1px solid blue;
color: blue;
font-weight: bold;
}
btn 이라는 class가 없지만 %btn 을 써서 btn들을 임시적으로 class를 입혀서 복사 붙여넣기를 하지 않아도 기본적으로 틀을 갖고 있게 할 수 있음.
.btn-1, btn-2 에 새로 입혀지게 하고 싶은 애들을 밑에 써서 수정 할 수 있음.
.btn-2, .btn-1 {
padding: 10px 20px;
cursor: pointer;
background-color: inherit;
border: 1px solid lightgray;
border-radius: 14px;
}
.btn-1 {
border: 1px solid red;
color: red;
font-weight: bold;
}
.btn-2 {
border: 1px solid blue;
color: blue;
font-weight: bold;
main css 에서는 main1,2 같은 베이스, btn-1, btn-2 모두 따로 설정된 값으로 보여지게됨.
@mixin - @include
<button class="btn-1">버튼</button>
<button class="btn-2">버튼</button>
@mixin 버튼() {
padding: 10px 20px;
cursor: pointer;
background-color: inherit;
border: 1px solid lightgray;
border-radius: 14px;
}
.btn-1 {
@include 버튼();
border: 1px solid red;
color: red;
font-weight: bold;
}
.btn-2 {
@include 버튼();
border: 1px solid blue;
color: blue;
font-weight: bold;
}
.btn-1 {
padding: 10px 20px;
cursor: pointer;
background-color: inherit;
border: 1px solid lightgray;
border-radius: 14px;
border: 1px solid red;
color: red;
font-weight: bold;
}
.btn-2 {
padding: 10px 20px;
cursor: pointer;
background-color: inherit;
border: 1px solid lightgray;
border-radius: 14px;
border: 1px solid blue;
color: blue;
font-weight: bold;
@extend 와 비슷한 구조로 표현하는데 @mixin은 인자= 변수를 지정해줄 수 있다
<button class="btn-1">버튼</button>
<button class="btn-2">버튼</button>
@mixin 버튼($테두리, $글자색) {
padding: 10px 20px;
cursor: pointer;
background-color: inherit;
border: 1px solid lightgray;
border-radius: 14px;
border: 1px solid $테두리;
color: $글자색;
font-weight: bold;
}
.btn-1 {
@include 버튼(red, red);
}
.btn-2 {
@include 버튼(blue, blue);
}
@mixin 버튼 () 안에 테두리, 글자색이 변수(인자), 그걸 지정할땐 $ 쓰기
@include 버튼 (___, ___) 는 내가 지정해놓은 @mixin 버튼($테두리, $글자색) 순서에 맞게 적용하게 됨.
대부분 한글로 치는것보다 영어로 (버튼은 btn, 테두리는 border-color, 글자색은 font-color 이런식으로 씀)
-변수(인자)를 제대로 받지 못하는것이 있다면 black 으로 해줘~
@mixin 버튼($테두리 : black, $글자색 : black)
-mixin과 동일하게 하는데 글자색만 바꾸고 싶을때 (특별한 인자만 바꾸고 싶을때)
.btn-1 {
@include 버튼($글자색:red);
}
operator : 연산자
.box {
width: calc(100px + 100px);
height: 100px;
border: 1px solid red;
}
calc를 통해서 + - * 다 할 수있음. ( 나누기 /는 css에서 이미 많은 곳에서 / 를 사용하고 있기 때문에 연산자로 사용하고 있는지 css에 있는 /를 사용한건지 알 순 없기 때문에 /를 할 순 없음)
width: calc(100px + 100px / 2);
-그렇기 때문에 + 기호와 함께 사용 하게 되면 연산 기호인지 SASS가 인지하고 계산 할 수 있음
-괄호를 사용하면 계산 가능
나머지 기호들을 사용하고 싶다면
Sass: sass:math (sass-lang.com)
Sass: sass:math
$y and $x must have compatible units or be unitless. 💡 Fun fact: math.atan2($y, $x) is distinct from atan(math.div($y, $x)) because it preserves the quadrant of the point in question. For example, math.atan2(1, -1) corresponds to the point (-1, 1) and
sass-lang.com
use : 다른 파일을 끌어다가 쓸 때 사용
html
<div class="box">안녕하세요</div>
_test.scss
$변수: red;
div {
width: 100px;
height: 100px;
border: 1px solid red;
}
변수를 지정하고 div가 보이도록 설정
@use "./test";
.box {
color: test.$변수;
}
@use "test" 라고 해도 됨 ( test에 있는 것을 불러옴)
box에 color를 test에 있는 변수를 사용한다~
@use "test" as c;
.box {
color: c.$변수 ;
}
파일명이 길어질 수 있으니 as ~ ; 하면 ~로도 불러올 수 있음