[SASS] _reset 파일과 SASS 문법

728x90

reset 파일
- 후에 @use 로 임포트 해줌.
- 파일이름은 _reset.scss 으로 생성.

/* CSS - 기본 설정 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
  // pointer-events: none;
  text-decoration: none;
  list-style: none;
}

html {
  font-size: 16px;
}

a,
a:link,
a:visited {
  color: inherit; //하단 밑줄 색깔 없애기
}

전체에 position:relative 를 준 경우
주의 사항

전체 요소에 position: relative를 적용하는 접근은 일반적으로 권장되지 않음.

필요한 요소에만 position: relative를 적용하는 것이 더 좋을 수 있다.

개선된 접근 방법 >>

reset 파일에서 전체에 position: relative를 제거:
모든 요소에 적용된 position: relative를 제거하고, 필요한 곳에만 적용/

SCSS 예제:
필요한 요소에만 position: relative를 적용하여 명확하게 설정합니다.

_reset 파일에서 position:relative 제거

/* CSS - 기본 설정 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  // position: relative;  // 이 줄은 제거합니다.
  text-decoration: none;
  list-style: none;
}

html {
  font-size: 16px;
}

a,
a:link,
a:visited {
  color: inherit; /* 하단 밑줄 색깔 없애기 */
}

기존 main.scss 에서 필요한 부분에만 relative 추가.

@use "reset";

/* 색상 변수 */
$main_color: #f5e44f;
$sub_color: #e33258;

/* header */
.banner-top {
  background-color: $main_color;
  width: 100%;
  padding: 11px;
  text-align: center; /* a 태그를 가운데 정렬 */
  font-size: 12px;
  position: relative; /* .close 버튼의 기준점 설정 */
  .close {
    position: absolute; /* .banner-top을 기준으로 배치 */
    right: 15px; /* 오른쪽 끝에서 15px 떨어짐 */
    top: 50%; /* 세로 중앙 정렬 */
    transform: translateY(-50%); /* 세로 중앙 정렬 */
    cursor: pointer; /* 마우스 커서 포인터로 변경 */
  }
}

.banner-top 에다가 relative 추가.

< Sass 문법 >

1. 변수 만드는 문법 
: 최상단에 써주기(?)
= $색상1 : #000000;
사용방법
= $색상1
 CSS의 변수는 이후에 JS를 이용해서
요소의 속성 값을 변형할 수 있음.

2. @use 사용
: @import와 동일(유사)
: rest 파일( css 기본설정 ) 갖고오기.
- reset.scss 파일 생성하고 코드 입력
- @use "reset"; 사용
+ reset.scss 파일은 굳이 컴파일할 이유가 없음.
> _reset.scss 로 작명 수정하기.
> 나머지 css파일하고 reset.css.map 파일은 지워주기

728x90