※블로그 내용은 저 '개인'의 기준으로 더 필요하다고 생각되는, 또는 한번 더 짚어보는 의미로 직접 필기한 것입니다. 수희 혼자 볼라고 쓴 블로그
1. css도 계층적으로! sass >
sass(scss): css의 확장 언어
css보다 조금 더 높은 자유도를 개발자들에게 부여
개발자들이 지켜야될 문법들이 많아진다.
변수, 반복문, 가정문 등도 사용 가능
scss와 sass는 문법적으로 약간 차이가 있다.
sass 어플(watch sass기능) 사용 안될때 컨트롤+시프트+p 해서 live sass검색.
아래 내려서 watch sass 선택하면 vscode 하단에 watching sass 나옴.(누르면 stop도 가능)
main.scss파일 누르고 watch sass버튼 ->자동으로 main.css와 main.css.map 파일 만들어짐
main.css와 main.css.map삭제해도 main.scss에서 저장누르면 다시 생김.
map파일은 디버깅을 위한 파일.별로 필요 없음..
scss에서 편집하면 자동으로 css파일에 업데이트 됨.
2.sass에서 다루는 css - nesting 구조>
div .클래스이름 확장자 { } 등, 선택자 일일이 쓰는 스타일을 넥스팅이라고 한다.
html에서 css를 중첩해서 사용한다는 느낌이 넥스팅이다.
body {
.box { }
} 이런식으로 2~3개정도만 중첩하는 넥스팅을 선호.
그 이상의 갯수는 그냥 새로운 클래스 이름으로 쓰는게 낫다.
3.sass에서 다루는 css - 기초 문법>
body {
.box {
&:hover { background-color: black; }
} 라 하면 &는 부모태그(box)를 가르킨다. &로 짧게 쓰기 가능.
4.sass에서 다루는 변수> 변하는 수. $써서 사용.
$ : 기호 +"작명" : "저장할 내용"; ( 예시 $primary-color: #333;)
color: $primary-color; 로 바로씀. 즉, 칼라 번호 굳이 안외우고 바로 사용(변수 저장)
5. sass에 내장되어 있는 색관련 함수
- darken 업둡게
- Lighten 밝게
- saturate 높은 채도
- desaturate 낮은 채도
- adjust-hue 명도 변경
- rgba alpha값 변경
예를 들어 color: darken($color, 30%);
명도 조절은 좀 다름. color: darken($color, 60deg); 로 각도 조절
6.확장(extend)으로 css 템플릿 구성하기>
css스타일 확장!
다른 클래스에 공통된 css내용 또넣기 번거로울때 사용!
.btn { padding 10px 20px; cursor: pointer; color: red; }
.btn-1 { @extend .btn;}
color: black;}
바뀌는 부분만 다음 부분에 쓰면 됨
마치 .btn, .btn-1 { }와 같은 효과~
- % 란? 임시 클래스를 의미한다.
%btn { padding 10px 20px; cursor: pointer; color: red; }
.btn-1 { @extend %btn; color: black;}
html에 없는 css 내용을 css에만 임시로 만들어 놓음.
7.mixin을 통한 css 맞춤 템플릿>
extend와 아주 유사함
@mixin 버튼($테두리, $글자색) {
padding 10px 20px; cursor: pointer; color: red; }
.btn-1 { @include 버튼(red, red); color: black;}
차이점은 인자값을 받을 수 있다. 조금 더 유용하다.
받는 곳에서 반드시 2개의 값을 입력해야 한다 -> @include 버튼(red, red);
- 만약에 그 2개의 값을 입력 안했다면 mixin에 값이 없을 경우를 적어주면 된다.
padding 10px 20px; cursor: pointer; color: red; } .btn-1 { @include 버튼(); color: black; }
@mixin 버튼($테두리 : black, $글자색 : black) 는
(테두리색,글자색) 순서대로 의미.
@include 버튼();로 받을때 글자색만 변경하고 싶다면 ?
padding 10px 20px; cursor: pointer; color: red; } .btn-1 { @include 버튼($글자색 : red); color: black;}```
로 적어줘야 한다!
8.sass에서 사용할 수 있는 연산자>
operator 연산자(+ - *)
★★width: calc(200px - 100px);에서 100px값이 계산 됨.즉 연산한 것!
calc(200px - 10rem); 단위를 신경써, 4칙연산 곱하기 나누기 다된다.
그런데 sass에서는 굳이 calc를 사용하지 않아도 된다. 단! 나누기는 아님.
왜냐면 / 슬래시 부호를 다른 방법으로 사용하고 있기 때문이다
단!width: (100px + 100px) /2;는 됨. 앞에 연산 부호 붙였으니 나누기로 인식!
sass에서 나누기 사용하는 다른, 정석적인 방법!
@use "sass:math"; 이거쓰고~
.box { width: math.div(100px, 2); }100px(분자) 나누기 2(분모)라는 의미다.
9. use를 통해 다른 파일 가져오기>
@use "sass:math"; 는 sass에서 math라는 기능을 가져오겠다는 뜻.
use로 자주 사용하는 방법은? test.scss파일이 따로 있다면 다른 scss에
@use "test"; 라고 써서 가져올수 있다. 파일명만 써도 불러와짐.경로 쓸필요x
@use "엄청나게긴파일명이름" as c;
.box { color: c.$변수; } 엄청 긴 파일명 이름을 c라고 간략하게 줄여서도 사용가능.
@import url();는 일반 css에서도 사용 가능. scss에서는 url() 적을 적을 필요 없다.
sass에서는 @import; 라써도 됨. 근데 @use가 @import보다 최신임.
그러니까 임폴트 보다는 @use를 사용하자
10. sass에서 사용할 수 있는 다른 기능들>
반복문, 가정문(조건문), 변수 : 배열, 오브젝트 등도 있다.
- 반복문 :
- @for i from 1 through 10 { .box:nth-of-type(#(i)) {
width: 100px; }
}
- $i변수가 1에서 10까지 반복.
즉, box:nth-of-type(1부터10까지) 만들어짐.
$list : orange, blue, red, yellow;라는 변수 배열문을 만듬.
@each $color in list {
.box { color: $color; } } 를 하면 css에 각각의 색을 가진 .box가 4개(배열수) 생김
object : ( 1: orange, 2: blue, 3: red ); @each $key, $color in $object { .box-#(key) {
background-color: $color; } } 를하면 css에
.box-1 { background-color: orange; }
.box-2 { background-color: blue; }
.box-3 { background-color: red; }
가 생긴다. #은 배열수만큼 카운터 된것.
★가정문(조건문):
$statement: blue;
p { @if $statement == blue {
color: blue;
}
@else {
color: red;
}
}
statement변수가 파란색이면 파란색으로 나오고, 아니면 빨간색으로 나옴
현재 이 값은 파란색으로 나올것임.
$statement: yellow;
p { @if $statement == blue {
color: blue;
}
@else {
color: red;
}
}
그럼 여기선 블루가 아니니까 값은 빨간색으로 나옴.
※이러한 코드가 썩 좋은 코드일지 생각해봐야한다.. 이것은 많은 배경지식이 필요 html이나 css는 직관적으로 짜야 협업에 좋다. 주석을 일부로 쓰는것도 마찬가지 시멘틱 태그(의미가 있는 태그)말고 웬만하면 div태그 쓰는것
코드를 직관적으로 짜는 것은 정말 중요하다
sass통해 가정문이나 반복문 쓸수도 있지만 직관적인 코드는 아닐 수 있다.
자바스크립트로 가정문, 반복문 쓰면 직관적이고 간단하다
