Chemical Journey

  • 홈
  • 태그
  • 방명록

MediaQuery 1

[SCSS]변수(Variables)와 믹스인(Mixin)

피그마 같은 디자인 툴에서는 variants를 만들어서 카테고리화 하여 편리하게 사용하곤 한다. SCSS에서도 변수를 만들어 이와 비슷하게 활용할 수 있다. 변수(Variables) $font-large: 3rem; $font-medium: 1.6rem; $font-default: 1.2rem; $font-small: 0.8rem; 변수 지정은 이런식으로 해줄 수 있다. 그럼 이제, 어떤 식으로 사용하는지 보자. body { font-size: #{$font-large}; } 사용법은 간단하다. #{} 안에 $로 시작하는 변수명을 입력해주면 된다. 일종의 모듈화이며, 전체 페이지에서 반복적으로 사용되는 스타일(title, btn과 같은)에 적용하면 통일감 있고 유지보수에도 편리하게 쓸 수 있을 것 같다...

TIL/CSS 2023.03.02
이전
1
다음
프로필사진

Chemical Journey

다시 👨🏻‍🔬

  • 분류 전체보기 (16)
    • TIL (14)
      • HTML (1)
      • CSS (10)
      • Javascript (1)
      • React (0)
      • Design (0)
      • Library (2)
    • info (1)
    • Git, Github (1)

Tag

favicon #파비콘 #파비콘만들기 #티스토리파비콘 #블로그파비콘 #ico파일변환, 브라우저 리플로우, CSS 3D, Tistory, jsLibrary, css, 인접 형제 선택자, float 후처리, cssAnimation #css #backface, gsapTween, layout #float #clear:both, ScrollMagic, Til, GSAPscrollTrigger, MediaQuery, 무한 슬라이드, responsive, NAVER 레이아웃, ScrollTrigger, 1분코딩,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

  2025. 06  
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30

방문자수Total

  • Today :
  • Yesterday :

Copyright © Kakao Corp. All rights reserved.

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.