절대로 좌절하지 않는 Scss(초정중)

Scss란?

SCSS와 SASS는 Sass (Syntactically Awesome Style Sheets)라는 Ruby의 CSS 메타 언어입니다. 장점이 많기 때문에 사용자는 많습니다. 프로그래밍 언어와 매우 유사하므로 변수, mixin, 루프 처리도 가능합니다. Css에서의 기술량과 비교하면 절반 정도로 끝날지도 모릅니다. 각각, Scss로 할 수 있는 것을 설명해 가네요.

중첩 구조 (이것은 HTML 구조와 유사)

style.css

header{
width:100%;
position:relative;
clear:both;
}

header h1{
float:left;
}

header.imformation{
float:right;
width:350px;
}

↓Scss라고 이렇게 컴팩트하게 기술 할 수 있는 것입니다!

style.scss

header{
 width:100%;
 position:relative;
 clear:both;

 & h1{
 float:left;
 }

 &.imformation{
 float:right;
 width:350px;
 }
}

변수 (프로그래밍 언어에 가까운 감각)

style.css

section h2{
color:#6cc6c4;
}

.text p{
border:1px solid #6cc6c4;
}

ul.top li > p{
background-color:#6cc6c4;
}
/*何度も色番号を手入力しないといけないのってめんどくさいですよね？*/

style.scss

/* 色番号を変数に代入してしまう＝使い回しが何度でも可能だし、修正がしやすいですよね。
cssだけだと、全部書き直しもしくは、置換するしかない。 */
$color:#6cc6c4;

section h2{
color:$color;
}

.text p{
border:1px solid $color;
}

ul.top li > p{
background-color:$color;
}

mixin

style.scss

@mixin .maru{
border-radius:10px;
border:0.5px dashed #000;
}

div.bg{
@include .maru;
background-color:navy;
}

/*もしくは*/
.maru{
border-radius:10px;
border:0.5px dashed #000;
}

div.bg{
@extend .maru;
background-color:navy;
}
/*extendの場合、mixinを使用する必要が無い！*/

style.css

.maru{
border-radius:10px;
border:0.5px dashed #000;
}

div.bg{
border-radius:10px;
border:0.5px dashed #000;
background-color:navy;
}

루프 처리

style.scss

@for $j from 1 through 3 {
  /* #は文字列を表現しています。*/
  li:nth-child(#{$j}) {width: 10px * $i;}
}

style.css

li:nth-child(1){
width: 10px;
}

li:nth-child(2){
width: 20px;
}

li:nth-child(3){
width: 30px;
}

Scss 도입 정보

환경 구축이라고 하는 사람입니다. 여기서 망설이는 분은 있다고 생각합니다. (나는 여기에 3개월 정도 고민하고 있었습니다 눈물) 결론으로부터 말씀드리면, visual studio code를 사용하고 있는 분이면, 꽤 쉽습니다! !

❶ 우선, vscode를 설치합시다.
( htps : // 여기.ゔぃすあ lsつぢお。 코m/ )



❷ 설치가 끝나면 확장 기능인 Live Sass Compiler를 설치합니다.



❸ 애플리케이션 하단에 표시된 Watch Sass를 클릭합니다. (사진이라면 watching ...
되어 있는 부분)



❹ .scss 확장자를 가진 파일을 만들고 저장합니다.

이 때 화면 왼쪽 하단의 Watch Sass를 클릭하면 자동으로 파일 이름 .css.map 파일이
생성됩니다.

ーー 이것으로 컴파일이라는 작업이 끝나고 Scss가 css로 자동 변환됩니다.ーー


⬆︎ 참고로 HTML 파일로 Scss 파일을 로드하는 경우입니다만, 반드시 컴파일된 Css 파일을 읽어 주세요! ㅀ 나는 Scss 파일을 읽고있어? 컴파일 잘하지 않아? 그리고 쁘띠 패닉이되었습니다.
여러분은 곧바로 할 수 있다고 생각하므로, 꼭 도전해 보세요!