[SCSS] SCSS 기초

 

scss란

SCSS : Sassy CSS - 문법적으로 짱 멋진(Sassy) CSS

 

 

 

## 알아야할 것

1. 변수 할당

$변수명으로 변수를 설정할 수 있습니다.

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

 

2. 중첩(Nesting) 구문

css는 선택자로 부모부터 하나하나 지정해야 하지만

scss 는 스코프안에서 들여쓰기로 중첩을 처리합니다.

 

- css

// CSS
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

 

- scss

// SCSS
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    @at-root li { // 중첩에서 벗어나기 위한 문법 @at-root
    	margin-top:0;
    }
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

@at-root를 이용해 중첩에서 벗어날 수 있다.(중첩된 선택자에만 사용가능)

 

 

3. 파일 분리

종속시킬 파일들을 _파일명.scss 로 작명해서 import 시킵니다. (컴파일이 되지 않음)

 

- style.scss

@import 'reset';

import로 불러올 때 _와 확장자명은 생략가능합니다.

 

4. mixin

minxin 으로 스타일을 저장해 사용할 수 있습니다

 

- css

// css
.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}

.alert {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}

.success {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;
}

 

- scss

// SCSS
@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

default값 세팅도 가능합니다.

 

5. & 앰퍼샌드

& 는 상위에 있는 부모선택자를 가리킨다

& 을 이용하여 after, hover 등의 가상요소, 가상클래스, class나 id 셀렉터 등을 참조할 수 있음.

 

// Scss
.box {
    &:focus{} // 가상선택자
    &:hover{}
    &:active{}
    &:first-child{} 
    &:nth-child(2){}
    &::after{} // 가상요소
    &::before{} 
}

 

6. @extend

 

기존에 작성한 클래스 내에 있는 코드 가져오기 @extend 에 클래스 명을 함께 적으면, 클래스에 있는 코드 전체가 extend 됨

 

// SCSS
.profile-user {
    background-image: url("../assets/user.jpg");
    background-size: cover;
    background-position : 50% 50%;
    border-radius: 50%;
    width : 50px;
    height : 50px;
}
.comment-user {
    @extend .profile-user;
}

 

7. 반복문

문법은

@for 변수 from 시작수 through 또는 to 끝 수

through = 이하

to = 미만

 

@for $i from 1 through 12 {
    .profile-#{$i}{
        background-color: red;
        font-size: #{$i * 10}px;
    }
}