sass 설치
일반 css 구문을 효율적으로 관리하기 위한 전용 라이브러리
1. node js 설치, sass 설치
sass를 사용하려면 npm을 사용해야 하기 때문에 node를 먼저 설치한다. (가능하면, 20이상.)
웹사이트에 접속해서 설치한다.
2. sass를 설치한다.
다운로드 받을 필요 없이, cmd 창에 다음 명령어 입력.npm i -g sass
cmd 창에서 설치 확인
- node --version
- npm --version
- sass --version
VS를 관리자 권한으로 실행
- 터미널 명령어
- sass --watch scss/style.scss:css/style.css
- 오류 뜰 경우 아래 명령어 순서대로 입력
- ExecutionPolicy
- Set-ExecutionPolicy Unrestricted
- 터미널에서 watching 으로 뜨는지 확인.
scss 폴더 구성
style.scss 작성
@use 'reset';
@use 'common';
@use 'profile';
_reset.scss 작성
:root {
}
* {
}
_common 작성 (모든 html 공통 사용)
body {
}
...
_login 작성 (login.html 전용으로 사용할 경우)
.login{
width: 400px;
margin: 0px auto;
padding: 40px;
// border: 1px solid gray;
h1{
margin-bottom: 60px;
text-align: center;
}
article{
margin: 35px 0px;
padding: 5px 10px;
border: 1px solid gray;
border-style: solid;
border-width: 0 0 1px 0;
border-color: lch(var(--gray-lch-code));
display: flex;
gap: 20px;
align-items:center;
}
}
login.html 사용시
<main class="login">
<h1>Login</h1>
<form>
<article>
<input type="text" name="userid" id="userid" />
</article>
<article>
<input type="password" name="password" id="password" />
</article>
<p>
<button type="submit" class="btn1">Login</button>
</p>
</form>
</main>
scss 변수 사용법
- _variable.scss 변수등록 전용 파일 생성
- 해당 파일 안쪽에 $변수명: 값; 으로 변수 선언
- 해당 변수 호출하려고 하는 파일에 @use '파일명'
- 변수사용: 파일명.변수명
Tags:
웹개발_Tool
