📚TIL

day32

SCSS 재활용

• content(data) : 소괄호로 데이터를 전달하여 using을 통해서 받아 styleblock에서 사용 가능

@use "sass:map";

@mixin media($name)(
	$breakpoints{
    	small-device: 576px,
        medium-device: 992px,
        large-device: 1400px;
    );
	@media all and(max-width:map.get($breakpoints, $name)){
    	@content(map.get($breakpoints, $name));
    }
}

.box{
	width: 400px;
    heigh: 400px;
    @include media(medium-device) using($size){
    	width: $size;	//992px
        height: $size;	//992px
    }
}

• SCSS와 SASS의 차이 : 대부분 중괄호와 세미콜론의 차이이지만 SASS는 @mixin을 =으로 @include을 +으로 사용

SCSS - 확장

• @extend : 작성해놓은 선택자의 이름을 @extend를 통해 명시하면 선택자가 가지고있는 스타일이 확장되어 해당 부분에 적용함

//SCSS
.btn{
	display : inline-block;
    font-weight : bold;
    padding: 10px 20px;
}

.btn-primary{
	@extend .btn;
    background-color: tomato;
}

//CSS
.btn, .btn-primary{
	display : inline-block;
    font-weight : bold;
    padding: 10px 20px;
}

.btn-primary{
	background-color: tomato;
}

• @mixin과 @extend
  + @mixin : 별도의 스타일을 따로 정해두고 그것을 가져와서 사용
  • @extend : 이미 특정한 선택자로 만들어진 부분을 가져와서 사용
• @extend 사용시 주의할 점 : 의도하지 않은 선택자가 만들어지는 선택자 폭발이 발생할 수 있음
• @extend는 최대한 중첩을 피해서 사용해야하며 대체할 수 있을시 @mixin을 통해 재사용하는 것을 권장
• % - placeholder 선택자 : @extend를 사용해서 확장할 수 있으며 컴파일되지 않음
• % 사용시 주의할 점 : @media 규칙 내부에서 @extend를 사용할 경우 내부의 선택자에만 사용할 수 있음, 복잡한 구조에 사용할 시 제한사항이 있음

@media all and(max-width: 1400px){
	%box{
    	color: red;
    }
    .box{
    	@extend %box;
    }
}

• Gzip 압축 방식 : 반복되는 코드가 많아지면서 CSS의 용량을 최적화 하기 위한 방법

SCSS - 함수

• function : JS함수, @mixin와 유사하며 매개변수에 기본값을 지정하거나 가변인수 개념도 사용 가능
• 함수명은 내장 모듈과의 중복을 피하기 위해 두개 이상의 단어로 생성하는 것을 권장
• 프로젝트 내에서 사용할 수 있는 함수들은 _utils.scss 파일로 구분해서 만들며 !default를 사용하여 확장성 고려

SCSS - 조건

• @if : 조건이 일치하는지 확인하여 true일 경우 실행
• @if, @else if, @else를 사용하여 판단

@mixin theme-colors($white-color : true){
	@if $white-color{
		background-color: black;    
    }@else{
    	background-color: white;
    }
}

.banner{
	@include theme-colors($white-color: true);
    body .dark & {
    	@include theme-colors($white-color : flase);
    }
}

SCSS - 반복

• @each-in을 통한 List 반복

@use "sass:list";

$colors : royalblue, gold, tomato;

@each $color in $colors{
	.item-#{$color}{
    	width : 100px;
        height: 100px;
        background-color: $color;
    }
}

• @each-in을 통한 Map 반복

$blocks : { A : royalblue, B : gold, C : tomato };

@each $key, $value in $blocks{
	.block-#{$key}{
    	width : 100px;
        height: 100px;
        background-color: $value;
    }
}

• @for through 사용

.list{
    @for $i from 1 through 3{
    	.item:nth-child(#{$i}){
        	width: 100px * ( $i - 1 );
        }
    }
}

• @for to 사용

.list{
    @for $i from 1 to 3{
    	.item:nth-child(#{$i}){
        	width: 100px * ( $i - 1 );
        }
    }
}

• @for through/to의 차이점
  • @for through : through 뒷쪽 숫자와 같거나 작을 경우
  • @for to : to 뒷쪽 숫자와 작을 경우
• @while : 조건이 true일 때 까지 반복

.list{
	.item{
    	$i : 1;
        $n : 8;
    	@while $n > 0 {
        	&:nth-child(#{$i}){
            	width : 100px * $n;
                height : 100px * $i;
            }
            $i : $i + 1;
        	$n : $n - 2;
        }
    }
}

SCSS-가져오기

• sass 설치 : npm install -g sass
• @import : 파일을 불러와서 사용하는 개념
• 컴파일러 방식 : 폴더에 들어가서 sass 폴더명:css
• scss나 sass파일은 확장자 없이도 사용 가능
• 컴파일 했을 시 비어있는 파일이 생기지 않도록 하기위해서 컴파일이 필요 없는 파일 이름에 _붙이기
• 붙인 파일을 @import할 경우 생략 가능
• @import url('./utils.scss') : 웹 브라우저에서 scss 확장자를 가진 파일은 동작하지 않기 때문에 문제 발생
• css파일이나 url을 @import할 경우에는 컴파일된 결과로 출력

SCSS - 모듈

• 모듈화 : @import 대신 @use를 사용
• 네임스페이스 : 변수의 이름이 같아서 발생할 수 있는 충돌 방지
• 불러오는 파일의 이름으로 네임스페이스를 사용하고 싶지 않다면 경로 뒷쪽에 as 키워드를 사용해서 새로운 이름 부여 가능
• @forward : 다른 파일의 모듈을 가져와서 사용할 수 있도록 하는 규칙
• @forward "./mixins" as mix- : 해당하는 변수와 mixin규칙의 이름이 붙을 수 있도록 을 붙여서 사용 - main.$mix-primary;

SCSS - 내장모듈

• SCSS에선 내장된 여러가지 기능들을 활용할 수 있음
• 내장함수 list : https://sass-lang.com/documentation
• @use "sass:사용할 함수"를 통해 내장모듈을 가져올 수 있음
• 전역함수(global function) : 불러오지 않아도 언제든지 사용할 수 있는 함수
• 전역함수의 예시 : 삼항연산자, hsl(a), rgb(a)

SASS 전역함수

• darken/lighten(color, amount) : 색상의 밝기를 조정
• staturate/destaturate(color, amount) : 색상 채도를 변경
• grascale(color) : 선택한 색상을 흑백처리
• invert(color) : 선택한 색상을 반전시킴

sass:color

• color.adjust(color, red, green, blue) : 선택한 색상의 RGB값 조정
• color.adjust(color, lighteness, alpah) : 선택한 색상의 명도와 투명도 조정
• color.adjust(color, staturation) : 선택한 색상의 채도 변경
• color.grayscale(color) : 선택한 색상을 흑백처리
• color.invert(color) : 선택한 색상을 반전시킴

sass:list

• list.append(list, data) : list data를 list에 넣어서 반환
• list.index(list, data) : list 안에 특정한 테이터의 index를 반환
• list.join(list, list) : list 합쳐서 새로운 데이터 반환
• list.length(list) : list길이를 반환
• list.nth(list, index) : list에서 해당 index의 값 반환

sass:map

• map.get(map, key) : map에서 key에 맞는 value값을 가져옴
• map.has-key(map, key) : map에서 key가 들어있는지 없는지를 boolean값으로 반환
• map.keys(map) : map에서 모든 key값을 담은 list를 반환
• map.values(map) : map에서 모든 value값을 담은 list를 반환
• map.merge(map, map) : 두개의 map을 병합하여 새로운 map반환하며 중복되는 key가 존재할 경우 더 뒤에 작성된 key의 vlaue를 덮어씌움
• map.remove(map, key) : 특정한 key를 제거하여 새로운 map을 반환

sass:math

• math.ceil(number) : 올림
• math.floor(number) : 내림
• math.round(number) : 반올림
• math.max(list) : list에서 최대값 반환
• math.min(list) : list에서 최소값 반환
• math.abs(number) : 절대값 반환
• math.is-unitless(number) : 해당하는 값에 단위가 붙어있는지를 확인하여 boolean 값으로 반환
• math.compatible(number, number) : 주어진 인수들이 연산이 될 수 있는지 판단하여 boolean 값으로 반환하며 단위가 동일해야 함

sass:meta

• meta.call(callbackFunction, parameter) : 함수를 데이터처럼 인수로 사용하기 위해서 사용

@use "sass:meta"

@function a($callback){
	// callback에 b를 넣었을 경우 b함수의 $size에 
	// 100px이 들어가 res에 400px이 들어가
	$res:meta.call($callback, 100px);	
    @return $res;
}

@function b($size){
	@return $size + 300px;
}

.box{
	width: a(b);
}

• meta.type-of(data) : 들어온 data의 타입을 반환

sass:string

• string.quote(string) : ""가 붙지 않은 string에 ""를 붙여서 반환
• string.unquote(string) : ""가 붙은 string에 ""를 붙여서 제거한 후 반환
• string.index(string, string) : 첫번째 문자열에서 두번째 문자열이 시작하는 index를 반환
• string.inset(string, string, index) : 문자열을 넣은 index에 삽입하며 음수일 경우 뒤에서부터 숫자를 세서 넣기
• string.length(string) : 문자열의 길이 반환
• string.slice(string, index, index) : index부터 index, index인수가 하나인 경우는 index부터 끝까지 자른 문자열을 반환
• string.to-upeer-case(string) : 대문자로 변경
• string.to-lower-case(string) : 소문자로 변경
• string.unique-id() : 실행될 때마다 고유한 문자열을 반환하며 선택자거나 중복되면 안되는 값을 필요로 할 경우 사용

SCSS - 디버그 메시지 규칙

• @debug : 터미널에 출력 - JS의 console.log와 동일
• @warn : 경고메세지 출력 - JS의 console.warn와 동일
• @error : 에러메시지 출력하며 파일이 정상적으로 컴파일되지 않았다는 것을 의미 - JS의 throw와 유사

SCSS 지식

• grid 시스템 : 시스템에 따라서 9, 12, 15의 그리드로 column을 나눌 수 있으며 대부분 12column의 시스템을 사용
• SASS에서는 소수점 자리를 최대 10개까지 출력
• At 규칙 : @를 붙여서 사용하는 키워드
• SASS의 list index는 1부터 시작
• SASS에서도 JavaScript와 같이 함수를 데이터처럼 사용할 수 있음

🌊하루를 마치며

드디어 CSS를 완강했다!!!!! 강의 내용이 매우 알차서 한강 듣는데에 굉장히 많은 시간이 걸려서 쉽지 않은 주였다. SCSS는 배울수록 JS랑 비슷한 부분이 많아서 생소한 개념 없이 잘 습득할 수 있었던 것 같다. 다만 scss를 처음 컴파일 해보기 때문에 설치했을 때에 에러가 발생해서 당황했다. 에러를 서칭해보니 window에서 발생하는 문제였고 해결책을 찾아서 잘 해결했다. 한번 경험해 봤으니 다음번엔 당황하지 않고 에러를 해결할 수 있을 것이다! 들은 강의를 완전히 외우지는 못했지만 과제를 하며 직접 코딩해보고 찾아보면서 복습하다보면 익숙해질 것이라고 생각한다. 내일은 과제를 시작할 계획이당! ! !