7/27 TIL : CSS 애니메이션 기반 페이지, Sass

CSS 애니메이션 기반 페이지

📌 코드: https://github.com/ebulsok/KDT-727-animation.git

📌 결과물: https://kdt-727-animation.netlify.app/

• 애니메이션 기준점 속성: transform-origin
• @keyframes 애니메이션이름 { }
• animation: 애니메이션이름 진행형태 진행시간 진행횟수

---

🔎 Sass(Syntactically Awesome Style Sheets) 설치

1. Node.js 설치(https://nodejs.org/ko/)
2. [터미널] node --version 정상적으로 설치되었는지 확인
3. [터미널] npm install sass -g NPM을 통해 Sass 설치
4. [터미널] sass --version 정상적으로 설치되었는지 확인

 

🔎 Sass+SCSS 사용하기

• [터미널] sass --watch 경로/파일이름.scss 경로/파일이름.css
• 다른 scss 파일 가져오기
  • @import "경로/파일이름";
  • 부분 파일의 경우 _제거하여 불러옴 (ex. _reset.scss => @import "reset";
• Nesting 방식
• 자기 자신 선택자로 & 활용
• $로 변수 지정
• _mixin.scss 파일 => @mixin 이름( 매개변수 ) { }, 원래 파일 => @include 이름( 매개변수 );
• @for 변수 from 숫자 to 숫자, @for 변수 from 숫자 through 숫자
• @each $el in 배열
• @if 조건 { }