SASS - import

css 보다 효율적으로 관리할 수 있는 방법에 대해 알아보겠습니다

article.item*4>h2{Sub Title}+p>lorem15^a[href="#"]{view}

<section class="wrap">
        <article class="item">
            <h2>Sub Title</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione et nulla sit voluptates explicabo veniam?</p>
            <a href="#">view</a>
        </article>
        <article class="item">
            <h2>Sub Title</h2>
            <p>Voluptas quaerat laboriosam eos ea autem facere quae, laudantium ut explicabo doloribus facilis quis reprehenderit.</p>
            <a href="#">view</a>
        </article>
        <article class="item">
            <h2>Sub Title</h2>
            <p>Doloremque sunt, commodi eveniet unde consectetur iusto ullam aliquid explicabo voluptas illo consequuntur aliquam incidunt?</p>
            <a href="#">view</a>
        </article>
        <article class="item">
            <h2>Sub Title</h2>
            <p>Quas, ex enim possimus tenetur doloremque sequi odio blanditiis dolores dolore mollitia repellendus, veritatis quia.</p>
            <a href="#">view</a>
        </article>
    </section>

SASS로 통한 UI 구현

sass에서 가장 큰 특징 중 하나는 html 구조와 비슷하게 ui를 만들 수 있는 resting 이란 기능이 있습니다

import를 먼저 지정할건데 작업할 때 독립적인 ui 컴포넌트를 작업별로 만들어서 특정 파일에 불러올 수 있습니다

//reset
* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

ul,ol,li {
    list-style: none;
}

a {
    text-decoration: none;
}

  여기서 원하는 기능만 따로따로 불러내서 부분 파일로 지정할 수 있습니다

scss > _reset.scss 파일을 생성합니다 _ 를 붙이면 부분파일이라는 명시적인 느낌을 줍니다

style.scss에서 reset 코드를 잘라내서 _reset.scss에 붙여넣습니다

style.scss에서 임포트를 지정합니다 @import "reset"

따로 뭔가 추가 할 내용은 없습니다

임포트를 쓸 수 있는 조건은 style.scss가 마스터 파일(첫번째파일)로 지정되어있어야합니다

style.scss가 style.css가 연결되어있기 때문