sass문법 @mixin

2021. 8. 11. 15:50TIL/웹퍼블리셔취업과정

728x90

        SASS: 코드 입력시 중괄호 생략

        SCSS: 코드 입력시 중괄호 입력

 

        SCSS 문법으로 작성된 코드를 실시간으로 일반 CSS파일로 변환

            - HTML파일은 CSS파일밖에 인식을 못함

 

        SCSS파일 분리하기

            1 분리할 SCSS구문을 _파일명.scss로 분리

            2 style.scss파일에 @import '파일명.scss'; 로 연결

 

        변수

        - 자주 변경될만한 값을 특정 공간에 저장해서 해당 값을 필요한 곳에 재활용할 때 사용

          ($변수이름:값 | $fontSize:20px)

 

        nesting

        - HTML 중첩 구조와 동일하게 SCSS구문을 변경

 

 

        sass --watch -E utf-8 scss/파일명.scss:css/파일명.css

 

 

        @mixin / @include

        - 자주 쓰는 구문들을 패키지 형태로 묶어놓은 형태

        - 인수를 활용하여 기본틀을 유지하면서 다양한 옵션값을 변경 가능

 

        @for(반복문)

        - 반복되는 구문을 자동으로 생성

'TIL > 웹퍼블리셔취업과정' 카테고리의 다른 글

display: flex 속성  (0) 2021.08.24
javascript 기초  (0) 2021.08.20
transform3d / animaition  (0) 2021.08.06
form태그 input태그 select태그 필수값  (0) 2021.08.04
웹접근성을 생각한 table태그 작성법  (0) 2021.08.03