변수의 개념과 @mixin 매개변수

변수 : sass에서도 변수 개념을 활용하여 다양한 값을 저장할 수 있다. 데이터를 저장하기 위한 하나의 공간

문법 : $변수명:값;

변수에 들어갈 값은 '문자열', '숫자', '색상', 불표현식(boolean), 리스트, null


1. 변수의 범위

- 전역변수 : 문서에 바로 작성한 변수로 모든 요소에서 사용가능

- 지역변수 : 특정 코드블록({})에서 작성한 변수로 코드블록을 벗어나면 사용 불가능


2. @mixin함수에 매개변수 처리하기

@mixin함수에는 매개변수와 인수값을 가질 수 있다.

@매개변수를 활용하여 다양한 결과물을 만들 수 있다.

@mixin 믹스인명($매개변수){
    //재사용할 스타일 서식
  }
  @include 믹스인명(인수)
box01
box02

실습하기1

로그인, 네이버, 카카오 로그인 버튼을 만들고 @mixin과 매개변수 대입하기


실습하기2

목록태그를 작성하여 목록별 테두리 서식을 각각 다르게 적용하기