scss @import 파일가져오기 / css > scss 변경(parcel bundler)과 url 리팩토링

**@import  3가지 방식

// @import url("./sub.scss");
// @import "./sub.scss";
//scss는 다른 scss 파일 가져올때 url 제거가능, 여러개의 scss 가져올때 확장자 제거가능
@import "./sub","./sub2";

$color: royalblue;
.container{
  h1 {
    color:$color;
  }
}

 

*** css 파일을 scss로 변경 후 리팩토링 진행(parcel bundler 설치)

해당 폴더에 접속

> 터미널에서 npm init -y 입력

>npm i-D parcel bundler

(package.json에 parcel 번들러 깔려있는지 확인, css 파일을 scss 파일로 변경,html 연결 확장자 변경, package.json script  {"div":"parcel index.html","build":"parcle build index.html")입력})

>터미널에서 npm run dev로 localhost 열수 있음

//scss 리팩토링
$url:"	https://images.unsplash.com/photo";

body{
  background-image:url("#{$url}/bg.jpg")
}

.hero{
  @for $i from 1 through 5{
    //.hero
    &:nth-child(#{$i}).image{
      background-image:url("#{$url}/hero#{$i}.png")
    }
  }
}

//css
body {
  background-image: url("	https://images.unsplash.com/photo/bg.jpg");
}

.hero:nth-child(1).image {
  background-image: url("	https://images.unsplash.com/photo/hero1.png");
}
.hero:nth-child(2).image {
  background-image: url("	https://images.unsplash.com/photo/hero2.png");
}
.hero:nth-child(3).image {
  background-image: url("	https://images.unsplash.com/photo/hero3.png");
}
.hero:nth-child(4).image {
  background-image: url("	https://images.unsplash.com/photo/hero4.png");
}
.hero:nth-child(5).image {
  background-image: url("	https://images.unsplash.com/photo/hero5.png");
}