TIL 013 | Sass(SCSS) Mixin & Extend

dhforb123·2021년 12월 1일
0

HTML/CSS TIL

목록 보기
13/14
post-thumbnail

Today, I Learned.
[멋쟁이 사자처럼 프론트엔드 스쿨]에서 배운 내용 정리.
- Sass(SCSS) Mixin & Extend.

✏️ Sass ✏️

1. Mixin

Mixin은 코드를 재사용하기 위해 만들어진 기능으로 선택자들 사이에서 반복되고 있는 코드들은 mixin으로 만들어 놓고 원하는 선택자 블럭에 mixin을 include하면 되기 때문에 코드 반복을 줄일 수 있다.

1-1. @mixin 사용법

@mixin 이름(parameter) {} //생성
@include 이름(argument)  //사용
  • @Mixin 이름(parameter) { } 안에 반복되는 코드를 넣어준다.
  • @include를 통해 스타일 하고자 하는 요소에 포함 시키면 된다.
  • mixin은 파일을 만들어서 import하여 사용하거나, mixin을 사용할 파일 내에서 선언 후 사용할 수 있으며 여러 개의 mixin을 만들어 사용한다면, _mixins.scss 파일을 만들어서 관리한다.

- SCSS

// mixin
@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.card {
    @include flex-center;
	background: gray;
}

.aside {
    @include flex-center;
	background: white;
}

- CSS

.card {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: gray;
}

.aside {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: white;
}

반복하는 모든 코드를 하나의 mixin에 몰아넣어서 사용하는 건 바른 mixin 사용법이 아니며 위에 코드처럼 스타일별로 나누어서 mixin을 만든다. 서로 연관 있는 스타일 속성끼리 묶어서 만들어야 좀 더 사용성이 높은 mixin을 만들 수 있기 때문이다.

1-2. @content

@content를 사용하면 원하는 부분에 스타일을 추가하여 전달할 수 있다.

- SCSS

@mixin custom-font($x, $y) {
    font-size: $x + $y + px;
    @content;
}

div {
    @include custom-font(10, 10){
        color: red;
    };
}

- CSS

div {
  font-size: 20px;
  color: red;
}

2. Extend

Extend는 연관 있는 요소들끼리 스타일 코드가 중복된 경우에 사용한다. 이미 스타일이 작성된 선택자의 클래스를 extend하거나 , %를 사용해서 따로 스타일을 정의한 후 extend하여 원하는 선택자에게 스타일을 적용해 줄 수 있다.

  • mixin는 (관계 없는) 선택자에서 조금 다른 스타일을 적용할 때 사용
  • extend는 관계 있는 선택자들의 동일한 소스코드 적용시 사용

2-1. extend 하는 2가지 방법

2-1-1. class이름 가져오기

기존에 작성한 클래스 내에 코드를 가져올 수 있습니다. @extend 에 클래스 명을 함께 적으면, 클래스에 있는 코드 전체가 extend 됩니다.

- SCSS

.profile-user {
    background-image: url("../assets/user.jpg");
    background-size: cover;
    background-position : 50% 50%;
    border-radius: 50%;
    width : 50px;
    height : 50px;
}

.comment-user {
    @extend .profile-user;
}

- CSS

.profile-user,
.comment-user {
  background-image: url("../assets/user.jpg");
  background-size: cover;
	background-position : 50% 50%;
  border-radius: 50%;
	width : 50px;
	height : 50px;
}

.profile-user 코드 전체를 .comment-user 에게 extend 해준다.

2-1-2. %placeholder

%로 extend 용도의 선택자를 만들어 사용하는 방법이다.
@extend를 사용해서 앞서 %placeholder 스타일 블럭을 불러오면 된다.
(%선택자는 CSS로 컴파일되지 않는다.)

1-1. 방법보다 1-2. 방법을 권장한다.

- SCSS

%base-button {
    width: 133px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    border-radius: 10px;
}

.follow-button {
    @extend %base-button;
    background-color: #ffffff;
    color: #ff375f;
    border: 3px solid #ff375f;
}

.message-button {
    @extend %base-button;
    background-color: #ff375f;
    color: white;
}

- CSS

/*CSS*/
.follow-button,
.message-button {
  width: 133px;
  height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  border-radius: 10px;
}

.follow-button {
  background-color: #ffffff;
  color: #ff375f;
  border: 3px solid #ff375f;
}

.message-button {
  background-color: #ff375f;
  color: white;
}

2-2. 예시

2-2-1. 예시 : 모달

웹페이지 안에서 생성되는 여러가지 모달에 대한 코드이다.
%를 사용하여 스타일 블럭을 만들고, 각각의 모달에 스타일을 적용해준다.

- SCSS

%modal {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 6px;
}

.login-modal {
  @extend %modal;
  width: 272px;
  height: 405px;
  padding: 10px 20px;
}

.event-modal {
  @extend %modal;
  width: 340px;
  height: 160px;
  padding: 18px;
}

- CSS

/*CSS*/
.login-modal,
.event-modal {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  border-radius: 6px;
}

.login-modal {
  width: 272px;
  height: 405px;
  padding: 10px 20px;
}

.event-modal {
  width: 340px;
  height: 160px;
  padding: 18px;
}

2-2-2. 예시 : 포토 링크 박스

두 개의 div는 포스팅 링크로 이동하는 기능은 같지만, 조금 다른 형태의 스타일이 적용되어 있어서 반복되는 코드를 box-frame으로 묶어주었다.

- SCSS

%box-frame {
  border: 2px solid #bb6bd9;
  border-radius: 15px;
  width: 574px;
  height: 310px;
}

.phoster-span {
  @extend %box-frame;
  span {
    display: inline-block;
    border-top: 2px solid #bb6bd9;
    padding: 16px 0 17px;
    text-align: center;
  }
}

.phoster-none {
  @extend %box-frame;
}

- CSS

/*CSS*/
.phoster-span,
.phoster-none {
  border: 2px solid #bb6bd9;
  border-radius: 15px;
  width: 574px;
  height: 310px;
}

.phoster-span span {
  display: inline-block;
  border-top: 2px solid #bb6bd9;
  padding: 16px 0 17px;
  text-align: center;
}

0개의 댓글