# 1 SCSS

코알라코딩

●

scss

# 목차

1. 참고자료
2. 개요
3. 개발환겅 설정
- 3.1. scss 환경설정의 개요
- 3.2. 워크스페이스에 livescss 환경설정
- 3.3. 워크스페이스 설정하기
4. 시작파일 받기

# 1. 참고자료

scss공식사이트

https://sass-lang.com/

scss튜토리얼

https://www.tutorialspoint.com/sass/index.htm/

무료교재

# 2. 개요

css 파일을 조금 더 구조적으로 작성할 수 있는 언어

css 전처리기라고도 불림

css 전처리기 언어의 종류는 sass(scss), less, stylus 등이 있다.

웹에서 바로 해석할수 없으므로 번역기(컴파일러) 가 필요하다

# 3. 개발환겅 설정

# 3.1. scss 환경설정의 개요

scss는 웹브라우저에서 바로 해석이 안되므로 별도의 해석기(compiler)가 필요하다. 우리는 VScode 의 Extention 을 사용하여 컴파일 할 것 이다.
VScode 를 실행하고 ctrl shift x 를 누른후 livescss 를 검색하여 아래의 확장 프로그램을 설치한다
livescss는 해석한 파일(css)을 환경설정에서 세팅한 경로의 폴더에 저장해준다.
livescss는 해석할때 워크스페이스 단위로 해석 한다. 즉 livescss는 워크스페이스 내의 환경설정에서 세팅한 경로로 css 파일을 저장하게 된다.
환경설정 파일은 워크스페이스 내에 .vscode/settings.json 에 저장된다.

optional 워크스페이스 설정하기

# 3.2. 워크스페이스에 livescss 환경설정

이번에는 scss 의 컴파일을 도와주는 확장프로그램의 환경을 설정해보자. 컴파일 완료시 저장되는 파일의 경로와 파일의 이름을 세팅해야 한다.

ctrl shift x 를 눌러 익스텐션을 연후 아래 이미지의 표시된 곳을 순서대로 클릭한다.
우측 설정 창에서 그림의 메뉴를 찾아 순서대로 클릭한다.
파일이 열리면 아래의 코드를 복사하여 붙여 넣는다.

{
	"liveSassCompile.settings.formats": [
		// This is Default.
		{
			"format": "expanded", //확장형
			"extensionName": ".css", //확장자
			"savePath": "~/../css" //경로 ~은 상대경로를 의미
		},
		{
			"format": "compressed", //압축형
			"extensionName": ".min.css", //확장자
			"savePath": "~/../dist/css" //경로 ~은 상대경로를 의미
		}
	]
}

optional

# 3.3. 워크스페이스 설정하기

VScode의 liveserver 이나 livecss 등의 확장 프로그램들은 워크스페이스 단위로 동작하므로

파일만 열어 작업시 해당 확장프로그램은 동작하지 않는다

워크스페이스란 프로젝트를 관리하는 폴더 단위를 의미하며 깃허브의 repository 와 유사한 개념으로 이해하면 된다.

프로젝트 작업시 관련 리소스 파일들은 항상 폴더를 생성하여 저장하는 습관을 들이도록 하자.

pc에 프로젝트 단위의 폴더를 만든다
VSCode 실행하여 워크스페이스 생성
아래의 이미지와 같은 메뉴를 선택하여 워크스페이스로 지정할 폴더를 클릭한다.
1. 워크스페이스로 저장할 폴더를 선택
2. 워크스페이스 설정 파일을 저장
3. 워크스페이스 설정파일의 저장 경로를 선택한다.
저장한 워크스페이스 열기
1. 워크스페이스 파일 선택
이후 작업시에는 4 번부터 반복한다.

# 4. 시작파일 받기

미리보기

https://qwerewqwerew.github.io/source/Scss/chap/00.html

탭의 시작코드를 복사하여 준비한다.

scss/basic.html
<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>basic</title>
    <link rel="stylesheet" href="./basic.css">
	</head>

	<body>
  <header>
    <h1 id="logo"><a href="#">logo</a></h1>
    <nav>
      <ul>
        <li><a href="#">menu1</a></li>
        <li><a href="#">menu2</a></li>
        <li><a href="#">menu3</a></li>
      </ul>
    </nav>
    <button><a href="#">login</a></button>
    <form action="#">
      <select id="theme">
        <option value="light">Light</option>
        <option value="dark">Dark</option>
        <option value="mid">Mid</option>
      </select>
    </form>
  </header>
  <main>
    <section>
      <h2>section1</h2>
      <div class="section1-box">
        <div class="section1-item">
          <span class="section1-title">title</span>
          <span class="section1-para">paragraph</span>
        </div>
        <div class="section1-item"> <span class="section1-title">title</span>
          <span class="section1-para">paragraph</span>
        </div>
        <div class="section1-item"> <span class="section1-title">title</span>
          <span class="section1-para">paragraph</span>
        </div>
    </section>
  </main>
</body>

</html>

scss/basic.css

@charset "utf-8";
@import url(https://qwerewqwerew.github.io/source/style/reset.css);

body {
	background: ivory;
}

header {
	display: flex;
	padding: 2vw 4vw;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

header h1 {
	flex: 1 1 30%;
}

header nav {
	flex: 1 1 50%;
}

header button {
	flex: 1 1 10%;
}

header ul {
	display: flex;
	width: 80%;
}

header ul li {
	flex: 1 1 30%;
}

header ul ul {
	display: block;
}

main {
	padding: 2vw 4vw;
}

.section1-box {
	background: #c9c9c9;
	max-width: 500px;
	margin: auto;
	display: flex;
	border-radius: 8px;
	border: 4px solid #d5d5d5;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
}

.section1-box > .section1-item {
	width: 30%;
	display: flex;
	flex-direction: column;
	padding: 1vw;
	box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
	border: 4px solid #6361e7;
}

.section1-box > .section1-item > .section1-title {
	color: #333;
	font-size: 32px;
}
.section1-box > .section1-item > .section1-para {
	color: #333;
	font-size: 24px;
}

scss