SMALL
확장프로그램 사스
sass compiler 검색 ->
Live Sass Compiler 설치
설치한 후 ,
HTML에
간단하게
작성해봅시다!
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
</body>
</html>link에 test.css를 걸어줍니다.
그런후 test.scss파일을 만들어줍니다!
(test.scss파일이 test.css가 됩니다! 그 방법을 차근차근 알려드릴게요.)
밑에 줄을 보면
눈모양으로 Watch Sass가 보이실거에요.
클릭해주면 Watching 로 변경됩니다.
그리고 test.scss 파일을 생성한후
ctrl +s 를 누르면
이렇게 파일이 생겨납니다!
/* CSS주석 */
// 한줄주석도 가능.... 한줄주석은 CSS로 변환X
// 변수설정 (자주사용하는 값을 미리 설정)
// $변수명 : 값;
// 특수문자는 - 사용가능
$white : #efefef;
$black : #111;
$gray1 : #888;
$gray2 : #999;
$txt-color : #333;
$font-1 : '맑은고딕';
$font-2 : '궁서체';
#bb { color:$white; }
#cc { font-family: $font-1;}
// Color명 사용하기
// darken(칼라명또는변수명, %값);
// lighten(칼라면또는변수명, %값);
#dd {
background-color: darken(#ccc,50%);
}
#ee {
background-color: lighten(#111,50%);
}
// 테스트
a { color:#f00; }
div h1 {
color:#0f0;
}
div h1 a {
color:#00f;
}
// Nest 중첩 문법 사용하기
div {
color:#f00;
h2 {
color:#0f0;
a {
color:#00f;
}
}
}
// 비슷한 여러번 작성하는 패턴
// CSS문법
#box p {
padding:30px;
font-size:20px;
font-family: '맑은고딕';
font-weight: bold;
background-image: 'aa.jpg';
background-repeat: no-repeat;
background-size: cover;
}
// 사스문법형태로 표현하기 Name-space 중첩
ul li {
margin:10px;
font : {
size: 20px;
family: '맑은고딕';
weight : bold;
}
background : {
image : url('aa.jpg');
repeat : no-repeat;
size : cover;
}
}
// 가상선택자 가상요소 사용하기
// CSS문법
ul li {
color:#f00;
}
ul li:hover {
color:#0f0;
}
// 사스문법을 사용하여 표현하기 &를 활용한 부모선택자 사용
a {
color:#f00;
&:hover {
color:#0f0;
}
}
.list li:first-child {
color:#f00;
}
.list {
color:#f00;
li {
width:100px;
&:first-child {
color:#00f;
}
&:not(:first-child) {
color:#0f0;
}
}
}이렇게 scss를 만들어주면 자동으로 css가 생깁니다
바로 요렇게
@charset "UTF-8";
/* CSS주석 */
#bb {
color: #efefef;
}
#cc {
font-family: "맑은고딕";
}
#dd {
background-color: #4d4d4d;
}
#ee {
background-color: #919191;
}
a {
color: #f00;
}
div h1 {
color: #0f0;
}
div h1 a {
color: #00f;
}
div {
color: #f00;
}
div h2 {
color: #0f0;
}
div h2 a {
color: #00f;
}
#box p {
padding: 30px;
font-size: 20px;
font-family: "맑은고딕";
font-weight: bold;
background-image: "aa.jpg";
background-repeat: no-repeat;
background-size: cover;
}
ul li {
margin: 10px;
font-size: 20px;
font-family: "맑은고딕";
font-weight: bold;
background-image: url("aa.jpg");
background-repeat: no-repeat;
background-size: cover;
}
ul li {
color: #f00;
}
ul li:hover {
color: #0f0;
}
a {
color: #f00;
}
a:hover {
color: #0f0;
}
.list li:first-child {
color: #f00;
}
.list {
color: #f00;
}
.list li {
width: 100px;
}
.list li:first-child {
color: #00f;
}
.list li:not(:first-child) {
color: #0f0;
}/*# sourceMappingURL=test.css.map */LIST
댓글