** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요.
** SASS주석 처리
//CSS로 컴파일되지 않는 주석
/* CSS로 컴파일되는 주석 */
1. SASS에서의 변수
1) 정의 : 변수는 추후에 재사용할 값을 저장하기 위한 용도로 사용
2) 변수 문법
$변수명: 값;
3) 변수에서 사용가능한 값
- 문자열, 숫자, 색상, 불표현식(booleans), 리스트, null
2. 다양한 변수를 활용
1) cmd에서 사용할 폴더를 선택(여기서는 D드라이브의 [sassTest]폴더 선택)
d:
cd sassTest
[VS CODE]의 [LIVE SASS COMPILER]를 사용하면 위 작업은 하지 않아도 된다.
2) [index.html]에 요소 생성 및 스타일연결
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>SASS 변수</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h1>제목태그</h1>
<p>문단태그</p>
<div>구역태그</div>
</body>
</html>
3) [test.scss]에 아래와 같은 코드 작성
$myFont: '맑은 고딕', sans-serif;
$myColor: pink;
$bigFontSize: 30px;
$baseFontSize: 14px;
$boxWidth: 500px;
body{
font-family: $myFont;
font-size: $baseFontSize;
color: $myColor;
}
h1{
font-size: $bigFontSize;
}
div{
width: $boxWidth;
background-color: $myColor;
}
4) watch를 통한 실시간 업데이트
- 여기선 [test.scss]를 [test.css]로 처리
sass --watch test.scss:test.css[VS CODE]의 [LIVE SASS COMPILER]를 사용한다면 하단의 [Watch Sass]버튼을 클릭
5) [test.css] 확인
6) [index.html]을 크롬에서 확인
3. 변수의 범위
- 전역변수 : 문서에 바로 작성한 변수로 모든 요소에서 사용가능
- 지역변수 : 특정 코드블록({ })에서 작성한 변수로 코드블록을 벗어나면 사용 불가능
1) [index.html]은 위와 같이 그대로 작성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>SASS 변수</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
<h1>제목태그</h1>
<p>문단태그</p>
<div>구역태그</div>
</body>
</html>
2) [test.scss]에 변수 작성
/* 전역 변수 */
$myColor: red;
h1{
/* 지역변수 - h1에만 선언한 변수 */
$myColor: green;
color: $myColor; /* h1의 글자색은 녹색으로 적용 */
}
p{
color: $myColor; /* p의 글자색은 빨간색으로 적용 */
}
3) [test.css] 결과 확인
4. !global 키워드를 이용
- !global키워드를 사용하면 지역변수는 무시되고 전역변수만 사용된다.
1) 위와 같은 코드에서 [test.scss]만 변경
$myColor: red;
h1{
$myColor: green !global; /* 이부분만 변경 */
color: $myColor;
}
p{
color: $myColor;
}
2) [test.css] 확인
5. 지역변수 사용
1) 에러 없이 지역변수 사용([test.scss])
- 해당 코드블록 내부에서만 사용
$myColor: red;
h1{
$bgColor: yellow; /* 지역변수 */
color: $myColor;
background-color: $bgColor;
}
p{
color: $myColor;
}
2) 다른 코드블록에서 지역변수 사용시 에러
$myColor: red;
h1{
$bgColor: yellow; /* 지역변수 */
color: $myColor;
background-color: $bgColor;
}
p{
color: $myColor;
background-color: $bgColor; /* 다른 코드블록에서 사용 */
}
3) !global키워드를 사용하면 오류가 나지 않음
$myColor: red;
h1{
$bgColor: yellow !global; /* 지역변수를 전역변수로 처리 */
color: $myColor;
background-color: $bgColor;
}
p{
color: $myColor;
background-color: $bgColor;
}
6. #{ }
- 위의 키워드를 사용하여 변수를 문자열로 보관하여 코드의 어디든지 사용가능합니다.
## 문법
#{$변수명}
## 예시
$basicFont: unquote('Noto Sans KR');
@import url('https://fonts.googleapis.com/css2?family=#{$basicFont}&display=swap');- 위는 한가지 예시를 든 것 뿐입니다.
- @for에서도 많이 이용됩니다.
- unquote()는 sass의 내장함수로 문자에서 따옴표를 제거하는 함수입니다.
** 영상으로 보고 싶은 분은 아래 주소를 클릭하세요!
7. 변수에 담을 수 있는 데이터 종류(Data Types)
| 데이터 | 설명 | 예시 |
| Numbers | 숫자 | 0, 1, .25, 20px, 2em, .... |
| Strings | 문자 | relative, italic, "images/test.jpg", "궁서", ... |
| Colors | 색상 표현 | red, green, #FF0000, rgba(0,0,0,0.7), ... |
| Booleans | 논리 | true, false |
| Nulls | 비어있음, 아무것도 없음 | null |
| Lists | 목록(JS의 배열과 같음) | (html, css, js) 혹은 html, css, js 혹은 html css js |
| Maps | 목록(JS의 객체와 같음) | (markup: html, style: css, interactive: js) |
- 숫자는 단위를 사용해도 되고, 작성하지 않아도 됩니다.
- 문자열을 따옴표가 있을 수도 있고, 없을 수도 있습니다.
- Nulls는 null 을 작성하지 않으면 컴파일되지 않습니다.
- Lists는 소괄호()를 작성할 수 도, 하지 않을 수도 있습니다.
- Maps는 소괄호()를 꼭 작성해야하고, key: value 형태로 작성해야 합니다.
- Lists와 Maps는 추후에 반복문 쪽을 배울 때 더 자세히 배우도록 하겠습니다.
** 영상으로 보고 싶은 분은 아래 주소를 클릭해주세요.
8. 연산(Operations)
- Sass는 기본적인 연산기능을 지원합니다.
- 상황에 맞게 크기를 계산하거나, 정해진 값으로 연산할 때 유용합니다.
1) 산술 연산자
| 종류 | 설명 |
| + | 더하기 연산자 |
| - | 빼기 연산자 |
| * | 곱하기 연산자 - 한쪽이 반드시 숫자 |
| / | 나누기 연산자 - 오른쪽 값이 반드시 숫자 조건이 잘 안맞으면 연산자 잘 안될 수 있음 |
| & | 나머지 연산자 |
- 연산시 같은 단위를 사용해야 합니다.
- 단위가 다른 경우는 calc() 함수를 사용하세요.
2) 비교연산자
| 종류 | 설명 |
| > | 크다(초과) |
| >= | 크거나 같다(이상) |
| < | 작다(미만) |
| <= | 작거나 같다(이하) |
| == | 같다(항등) |
| != | 같지 않다(부등) |
3) 논리연산자
| 종류 | 설명 |
| and | 조건이 여러 개인 경우 모든 조건이 맞아야 true를 반환, JS의 &&와 같음 |
| or | 조건이 여러 개인 경우 하나라도 맞으면 true를 반환, JS의 ||와 같음 |
| nor | true면 false를 반환, false면 true를 반환, JS의 !와 같음 |
- JS에서 사용되는 연산자와 다르다는 점, 잘 기억해주세요.
- 엑셀을 써보신 분들은 익숙할 수 있습니다.
'웹언어 > SASS' 카테고리의 다른 글
| [SASS] 6강 SASS의 @mixin과 @include - OSSAM강좌 (0) | 2020.08.04 |
|---|---|
| [SASS] 5강 SASS의 @import - OSSAM강좌 (0) | 2020.04.09 |
| [SASS] 4강 SASS의 중첩규칙과 속성 (0) | 2020.04.08 |
| [SASS] 3강 SASS의 CSS작성스타일 설정 (0) | 2020.04.08 |
| [SASS] 1강 SASS소개 및 설치 - OSSAM강좌 (0) | 2020.04.07 |
