scss 핵심 이론 활용

@mixin 중첩 활용해서 텍스트 세팅하기

$font-base: 15px;
$font-family-base: 'Raleway';
$font-family-headline: 'Roboto';

// Mixins
@mixin font-default {
  font: {
    size: $font-base;
    weight: 300;
    family: $font-family-base;
  }
  line-height: 1.6em;
}
@mixin font-headline {
  font: {
    family: $font-family-headline;
    weight: 500;
  }
  text-transform: uppercase;
}
@mixin large-headline {
  @include font-headline;
  font-size: $font-base * 3;
  color: crimson;
}
@mixin medium-headline {
  @include font-headline;
  font-size: $font-base * 2;
  color: royalblue;
}
@mixin small-headline {
  @include font-headline;
  font-size: $font-base * 1.5;
  color: yellowgreen;
}

body {
  @include font-default;
}
h1 {
  @include large-headline;
}
h2 {
  @include medium-headline;
}
h3 {
  @include small-headline;
}

자주 사용하는 이펙트를 @mixin과 @include로 재사용

// Mixin
@mixin shadow-item {
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.35);
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}
.items {
  display: flex;
  gap: 40px;
  > div {
    flex: 1;
    height: 400px;
    border-radius: 10px;
    overflow: hidden;
    transition: 0.5s;
    &:hover {
      @include shadow-item;
      transform: translateY(-15px);
    }
    a {
      width: inherit;
      height: inherit;
      img {
        object-fit: cover;
        width: inherit;
        height: inherit;
      }
    }
  }
}

1) flex: 1 은 width값을 지정한 것이다.

2) 이미지를 감싸고 있는 div에 border-radius를 적용해야 할 때,

img 태그보다 div 태그에 border-radius를 주고 overflow: hidden을 준다.

이럴 경우, 이미지 원본 크기가 div 크기보다 크면 (위의 경우 height: 400px, width: (flex:1)) 이미지가 깨진다.

해결방법은 이미지 div의 하위요소에 모두 width, height값을 지정하고 img 태그는 object-fit: cover를 주는 것이다.

플레이스 홀드 선택자로 css 선택자를 연결선택자로 정리하기