주석
주석은 아주 간단합니다. 그룹단위의 주석과 한줄 단위의 주석을 모두 사용할 수 있는데, 아랫쪽에 자세히 살펴 보겠습니다.
body {
//그룹단위 주석
/*
display: block;
margin: 0;
padding: 0
*/
//한줄 주석
//background: black;
}
변수
css와는 다르게 마치 프로그램처럼 변수를 사용할 수 있습니다. 아래 예문을 보고 실습해보시겠습니다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<Link href="css/style.css" rel="stylesheet" />
<title>scss연습</title>
</head>
<body>
<div class="box"></div>
</body>
</html>
css/style.scss
//변수선언
$variable: 10px;
.box {
width: $variable * 20;
height: $variable * 10;
background: red;
}
변수의 값을 바꾸고 저장해보세요. 잘 바뀌나요?
대표 폰트도 설정할 수 있어요.
한번 해볼까요?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<Link href="css/style.css" rel="stylesheet" />
<title>scss연습</title>
</head>
<body>
<div class="box">박스 입니다.</div>
</body>
</html>
css/style.scss
$variable: 10px;
$font-stack: ('Helvetica', 'Arial', sans-serif);
.box {
width: $variable * 20;
height: $variable * 10;
background: red;
font-family: $font-stack;
}
이렇게 대표폰트로 지정해놓고, 어디서든 $font-stack을 부르면 간편하게 사용할 수 있습니다.
읽어주셔서 감사드리고, 다음 강의에서 뵙겠습니다.
2019/07/11 - [프로그램 강좌] - [SASS]#1 설치방법, 환경구성, 작성규칙 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS
2019/07/15 - [프로그램 강좌] - [SASS]#3 Extend, Mixin : 디자이너, 퍼블리셔들을 위한 쉬운 SASS
2019/07/17 - [프로그램 강좌] - [SASS]#4 Function placeholder : 디자이너, 퍼블리셔들을 위한 쉬운 SASS
2019/07/19 - [프로그램 강좌] - [SASS]#5 조건문, 삼항연산자 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS
2019/07/21 - [프로그램 강좌] - [SASS]#6 반복문 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS
728x90
'프로그램 강좌' 카테고리의 다른 글
| [SASS]#4 Function placeholder : 디자이너, 퍼블리셔들을 위한 쉬운 SASS (0) | 2019.07.17 |
|---|---|
| [SASS]#3 Extend, Mixin : 디자이너, 퍼블리셔들을 위한 쉬운 SASS (0) | 2019.07.15 |
| [SASS]#1 설치방법, 환경구성, 작성규칙 : 디자이너, 퍼블리셔들을 위한 쉬운 SASS (0) | 2019.07.11 |
| [html03]CSS가 뭔데? 텍스트 꾸며보기 (0) | 2019.07.11 |
| [html02]html = head + body (0) | 2019.07.08 |
