📚TIL

day33

SCSS 재활용

• 스타일을 정의해서 필요한 곳에 재활용 할 수 있음
• @mixin : 이름을 지정 후 브라켓 내부에 재활용할 내용을 입력
• @include : 정해놓은 스타일을 가져와서 사용할 수 있음
• 변수와 기본값의 사용

@minxin large-text($size : 30px){
	@if( $size < 30px ){
    	font-size : 30px;
    } @else{
    	font-size : $size;
    }
    font-weight : bold;
    font-family : sans-serif;
}

.box-a{
	width : 100px;
    height : 200px;
    @include large-text;	//30px
}

.box-b{
	width : 100px;
    height : 200px;
    @include large-text(10px);	//10px
}

• 삼항 연산자 : if(condition, true, false)
• mixin 내부에서 include를 사용하여 minxin을 중첩으로 사용 가능
• 가변인수 : 인수의 갯수가 명확하게 하지 않고 전달하는 것을 특정한 매개변수를 한번에 받기 위해서 사용
• SCSS의 list 펼치기

@mixin spread($top : 10px, $right : 10px, $bottom : 10px, $left : 10px){
	margin-top : $top;
    margin-right : $right;
    margin-bottom : $bottom;
    margin-left : $left;
}

.box{
	//list data
	$list : 10px 20px 30px 40px;
    @include spread($list...);
}

• keyword : 인수를 순서대로 넣지 않고도 어떤 매개변수 이름에 해당 값을 넣기 위해 인수를 기입할 때 변수명과 값을 함께 넣음
• @content : 선언된 mixin에 @content가 포함되어 있다면 styleblock을 전달할 수 있음

//SCSS
@mixin icon($url){
	&::after{	// &를 통해 상위선택자를 가져옴
    	content : url($url);
        @content;
    }
}

.box{
	@include icon('/images/icon.png'){
    	//styleblock
    	position : absolute;
        top : 0;
        left : 50px;
    }
}

//CSS
.box::after {
  content: url("/images/icon.png");
  position: absolute;
  top: 0;
  left: 50px;
}

🌊하루를 마치며

SCSS에서 스타일을 재활용 하는 방법을 공부했다. 다른 부분은 이해가 잘 됐는데 @content부분의 개념으 부족했다. 내가 이해한 것을 얘기해 보자면 mixim 내부에 들어있는 @content에 또 다른 컨텐츠가 들어갈 수 있다는 것을 의미하고 @include를 통해서 스타일을 재활용할 경우에 styleblock에 들어있는 style들을 전달하여 @content위치에 넣는다. 이렇게 생각하고 이해했다! 또 강의에 나왔던 내용이긴 하지만 SASS에서 원래는 후손선택자를 가져오지만 '&'를 통해서 상위 선택자를 가져올 수 있다는 사실을 @content 예시를 통해서 다시 한번 공부할 수 있었다.
스터디 준비하느라 강의를 다 듣지 못해서 내일은 강의를 끝내고 과제를 시작할 계획이다! 추석 안쪽으로 과제를 다 끝내고 마음 편히 방학을 보낼 수 있었으면 좋겠다😊