SASS문법_믹싱기법(mixin,include)

1. $mixin 문법

웹사이트 전체에 재사용할 css코드를 정의하는 문법

    @mixin mixin명{
      //반복해서 사용할 스타일 서식을 작성한다.
    }
  

• 실습1. input 태그 2개의 버튼에 각각 mixin 함수를 적용하여 공통서식을 적용하고, 배경색상만 다르게 적용하기

• 실습2. 믹스인 함수(txt_over)를 사용하여 글자생략기호 나오게 하는 서식을 사용하는 지시문 만들기

2. $include 문법

@mixin을 선택자에 포함하는데 사용하는 지시문

    선택자{
      @include mixin명;
    }
  

3. @mixin을 중첩하여 새로운 @mixin 만들기

    @mixin 믹스인명 A{
      //재사용할 스타일 서식을 작성
    }

    @mixin 믹스인명 B{
      //재사용할 스타일 서식을 작성
    }

    @mixin 믹스인명 A{
      @include 믹스인명 A;
      @include 믹스인명 B;
    }
  

• 실습3. '상세보기', '담기'버튼을 작성하고 각각 서식을 다르게 적용하기

상세보기 담기

• 실습4. @mixin, @include문법을 활용하여 모바일 토글버튼 구현하기

• 실습5. sns 아이콘(페이스북, 인스타, 카카오)을 삽입하여 믹싱기법으로 스타일 서식 적용하기

sns아이콘에 마우스 오버시 배경색 빨강을 적용하시오.