[SCSS] SCSS 기본 문법 정리

CSS작성(생성)을 위한 작고 가벼운 언어이고, SASS 와 SCSS가 있다.

SASS  : SCSS와 작성하는데 있어서 구조적 차이가 있고 작성이 번거롭고 복잡할 수 있다.
SCSS : 기존에 알던 CSS와 유사하게 작성할 수 있기 때문에 친근하게 느껴져 배우기가 쉽다.

이 둘은 같은 계열의 언어이지만 요즘은 SCSS를 많이 쓴다.

SCSS => SASS 컴파일러 => CSS변환

Sass 컴파일러 방식

- VS Code + Live Sass Compiler

- Compiler1 Ruby Gem 이용

- Compiler2 Node.js NPM 이용


VScode를 깔고 간단한 셋팅 뒤 sass관련 확장 프로그램을 다운받는다. 
sass, sass compiler, sass lint 

- scss 파일을 생성하고, VScode 하단에 watch sass를 클릭하면 css파일로 컴파일된다. 

---

 

SCSS 변수 만들기


$bk123-_

$영문으로 시작해야 한다. 변수는 영어, 숫자, -, _ 만 가능하다.  값은 CSS값을 사용. 주석은 컴파일시 나타나지 않는다.

---

NESTING  (Tree 구조)

&은 자기 자신을 뜻한다.(상위요소) 

#box1{  
    font-size: 30px;  
    background-color: #ffcccc;  
    border-radius: 20px;  
    border: 3px solid #f00;  
    box-shadow: 0 3px 11px 0 rgba(0,0,0,0.75);  

    & > a{  
        color:#a22;  
        text-decoration: none;  
    }  

    a:hover{  
        color:#000;  
        text-decoration: underline  
    }  
}



#box1 { 
  font-size: 30px; 
  background-color: #ffcccc; 
  border-radius: 20px; 
  border: 3px solid #f00; 
  -webkit-box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.75); 
          box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.75); 
} 

#box1 > a { 
  color: #a22; 
  text-decoration: none; 
} 

#box1 a:hover { 
  color: #000; 
  text-decoration: underline; 
} 

 

---

mixin
 
함수 생성하듯이 만든 후에, 인클루드로 값을 넣는다.

@mixin fontSizeBgColor( $fontSize, $bgColor ) { 
  font-size: $fontSize; 
  background-color: $bgColor; 
} 

//mixin 
@include fontSizeBgColor(40px, #ffcccc);​ 

 

---

extend

함수 재사용에 용이하다. %는 extend only이다.

%boxShape { 
  border-radius: 20px; 
  border: 3px solid #f00; 
  box-shadow: 0 3px 11px 0 rgba(0, 0, 0, 0.75); 
} 

@extend %boxShape;​ 

 

 
mixin은 속성은 같은데 값이 다를때  
extend는 완전히 같은 코드가 여러군데 쓰일 때 사용한다. 

 

 

---

 
partial

코드들을 묶어서 별도의 파일에 저장한 뒤 사용하는 기능

// partial(부분적인) 
// _mixin.scss 파일 불러오기 
// scss 파일이 _로 시작되면 컴파일이 안된다. 

@import "mixin"; 
@import "partial/style"; 

#test { 
  @include fontSizeBgColor(); 
  @extend %boxShape; 
}​ 

 

---

@if

@mixin textAndBgClolor ($textColor, $bgColor){ 
color:$textColor; 
background-color: $bgColor; 
} 

//if 
@mixin thema($mood) { 
@if $mood == 'light' { 
	@include textAndBgClolor(#333, #ff0 ); 
} 
@else if $mood == 'dark' { 
	@include textAndBgClolor(#fff, #000 ); 
} 
@else { 
	@include textAndBgClolor(#f00, #aaa ); 
} 
} 

#box1{ @include thema('light');} 
#box2{ @include thema('dark');} 
#box3{ @include thema('');}​ 

 

---

 

@for

// @for 
@for $i from 1 through 5 { 
  .col-#{$i} { 
  	width: (100/5*$i)+em; 
  } 
} 

.col-1 { width: 20em;} 
.col-2 { width: 40em;} 
.col-3 { width: 60em;} 
.col-4 { width: 80em;} 
.col-5 { width: 100em;}

 

---

@each

// @each 
@each $user in bob,john,bill { 
  .#{$user}-icon{ 
  	width:50px; 
  } 
} 
.bob-icon { width: 50px;} 
.john-icon { width: 50px;} 
.bill-icon { width: 50px;} 


// map 
$ppl: (usr1:bob, usr2:john); 
@each $key, $usr in $ppl{ 
  .#{$usr}-avator{ 
  	height: 10px; 
  } 
} 
.bob-avator { height: 10px;} 
.john-avator { height: 10px;} 

한 개 이상의 변수값 사용시

@each $usr, $color, $value in (usr1, black, 1),(usr2, white, 2),(usr3, red, 3){ 
    .#{$usr}-icon{ 
        border: $value+px solid $color; 
    } 
} 

// map 
$usr1 : usr1, black, 1; 
$usr2 : usr2, white, 2; 
$usr3 : usr3, red, 3; 
@each $usr, $color, $value in $usr1, $usr2, $usr3{ 
    .#{$usr}-icon{ 
        border: $value+px solid $color; 
    } 
} 

.usr1-icon {  border: 1px solid black;} 
.usr2-icon {  border: 2px solid white;} 
.usr3-icon {  border: 3px solid red;} 

 

 

---

@while

 

$i:1;

@while $i < 5 {
  .col-sm-#{$i}{width:50 * $i + px}
  $i : $i + 1;
}

.col-sm-1 {width: 50px;}
.col-sm-2 {width: 100px;}
.col-sm-3 {width: 150px;}
.col-sm-4 {width: 200px;}