2. sass practice - 1

• sass compiler

핵심내용

1. em 단위는 em 단위가 적용된 요소의 font-size를 기준으로한다.
2. rem 단위는 root (html 태그)에 지정된 font-size를 기준으로한다.

3. % 단위는 %가 적용된 요소가 물려받는 font-size를 기준으로 한다.

    html {
       font-size: 62.5%; /* 16 x 0.625 = 10px = 1rem */
    }
   

4. vw viewport width, vh viewport height : 주의 스크롤바 너비를 포함한다.

5. 배경이미지에 칼라를 입히려면 아래와 같은형식으로 작성하면된다.

    .class {
      background-image: linear-gradient(to right, #285a91 0%, #1f9cfd 100%), url(header-image.jpg);
      background-blend-mode: multiply;
    }
   

6. background-size: contain은 배경이미지가 다 보이게 하는 것이고, background-size: cover는 요소안에 꽉차게 (잘리더라도) 이미지를 키운다.
7. transition: font-size 5s, opacity 10s 이렇게 요소별로 트랜지션 시간을 달리 설정할 수도 있다.

8. animation

    @keyframes anim1 {
        0% {
            opacity: .2;
            transform: translate(100px, -30px);
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: .1;
        }
    }
       
    .class {
        animation-name: anim1;
        animation-duration: 5s;
        animation-fill-mode: both; /* forwards, backwards, both */
        animation-iteration-count: 3;
        animation-delay: 3s;
    }
   

9. scss 파일정리

    _common.scss            : css reset 
    _variables.scss         : scss 변수
    _mixins.scss            : scss mixin 함수
    _animations.scss        : @keyframes 애니메이션
    _components.scss        : 컴포넌트
    _pages.scss             : 페이지
       
    style.scss
       
        @import "common";
        @import "variables";
        @import "mixins";
        @import "animations";
        @import "components";
        @import "pages";
   

10. PSEUDO ELEMENT

    .class {
        &:before {
            content: "before";
        }
        &:after {
            content: "after";
        }
    }
    

    .clearFix {
        :after {
            display: block;
            clear: both;
            content: "";
        }
    }
    

    @mixin clearfix() {
      &:after {
        clear: both;
        display: block;
        content: "";
      }
    }
    

    .class {
      p:nth-child(1) { // 첫번째 p 태그에만 속성을 주고싶을 때
            
      }
    }
    

11. 단을 나누는 css 속성 - column-count

    p {
      column-count: 3;
      column-gap: 30px;
      column-rule-style: dashed;
      column-rule-width: 1px;
      column-rule-color: #888;
      column-width: 1rem; // 별 의미는 없음. 없어도 되는 속성
    }
    

12. 텍스트 color 그라데이션

    .text {
      text-transform: uppercase;
      background: linear-gradient(left, $color-primary, $color-secondary);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    

13. 요소 선택자 ^ 캐럿

    .class {
      [id^="etc-"] { // id 속성이 etc- 로 시작하는 선택자를 모두 선택함
          
      }
      [src^="image1/"] { // src 속성이 image1/ 로 시작하는 선택자를 모두 선택함
          
      }
    }
    

14. checkbox로 메뉴 구성하는 거 아무 문제 없어보이는데… 여기서도 사용하고.. 일단 이 기법 계속 기억하고 있자.

    .input-type-checkbox {
      &-bg {
      
      }
      &-icon {
        &:before {
        
        }
        &:after {
        
        }
        &, &:before, &:after {
        
        }
      }
      &:checked ~ &-bg {
        transition: all 1s;
        transform: scale(80);
      }
      &:checked ~ &-icon:before {
      
      }
      &:checked ~ &-icon:after {
          
      }
    }
    

15. transform: skew() 말고도 background: linear-gradient로도 좀 비틀어져있도록 보이게할 수 있음 (각도조절해서)

    .class {
      background-image: linear-gradient(120deg, transparent 0%, transparent 50%, $color-white 50%);
      background-size: 220%;
        
      &:hover {
        background-position: 100%; // background-position 에서 100%는 translate, left 100%와 다르다. 그냥 오른쪽 끝에 붙는거다.
      }
    }
    

16. media query

    @mixin mq($screen-width) {
      @if ($screen-width == 'small-screen-1') {
        @media screen and (min-width: 900px) and (max-width: 1200px) {
          @content;
        }
      }
      @else if ($screen-width == 'small-screen-2') {
        @media screen and (min-width: 701px) and (max-width: 899px) {
          @content;
        }
      }
    }
        
    .class {
      @include mq('small-screen-1') {
        width: 100%;
      }
      @include mq('small-screen-2') {
        width: 100%;
      }
    }