PrestoMusic

마크업

BEM과 Sass의 nesting기능을 함께 사용하니 가독성과 유지보수가 쉬워졌다.

Block:

Element

Modifier:

nesting의 depth를 너무 깊게 만들지 않기 위해 속성을 block과 element단위로 나눠서 작성

학습 키워드

$ : 변수. 속성 값을 담을 수 있다.
@mixin : 속성의 집합.
& : nesting 구조에서 상위의 selector를 가리키는 기호
interpolation bracket #{} : js의 template literal과 유사하게 값을 문자열로 바꿔 속성명과 같은 문자열에 추가할 수 있다.
@import : sass의 file structure
@for과 @each
브라우저 resize에 동적으로 변하는 레이아웃 : vh, vw 사용
calc사용시 변수 주의

$my-width: 100px

// not working
.e { width: calc(100% - $my-width) }
    
// good
.e { width: calc(100% - #{$my-width}) }

선 화살표 만들기:

line-arrow {
    width: 12px; height: 12px; 
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    transform: skew(10deg);
}

면 화살표 만들기:

arrow {
    width: 0; height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 10px solid #000;
}