<div id="readability-page-1" class="page"><div><h2 id="scss"><a href="#scss" aria-label="scss permalink"></a>SCSS</h2><ul><li>SCSS는 SASS의 3번째 버전에 추가 </li><li>SASS의 모든 기능을 쓸 수 있음 </li><li>CSS와 호환도 잘됨 </li></ul><h3 id="특징-및-주요-문법"><a href="#%ED%8A%B9%EC%A7%95-%EB%B0%8F-%EC%A3%BC%EC%9A%94-%EB%AC%B8%EB%B2%95" aria-label="특징 및 주요 문법 permalink"></a>특징 및 주요 문법</h3>자세한 내용은 <a href="https://sass-lang.com/guide">sass-lang.com/guide</a>, <a href="https://sass-lang.com/documentation">sass-lang.com/documentation</a> 참고 <h4 id="를-통한-변수-선언---중복-제거-및-재사용"><a href="#%EB%A5%BC-%ED%86%B5%ED%95%9C-%EB%B3%80%EC%88%98-%EC%84%A0%EC%96%B8---%EC%A4%91%EB%B3%B5-%EC%A0%9C%EA%B1%B0-%EB%B0%8F-%EC%9E%AC%EC%82%AC%EC%9A%A9" aria-label="를 통한 변수 선언 중복 제거 및 재사용 permalink"></a>$를 통한 변수 선언 -&gt; 중복 제거 및 재사용</h4><div data-language="scss"><pre><code>$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
 font: 100% $font-stack;
 color: $primary-color;
}</code></pre></div><h4 id="중첩-작성-방식을-통한-시각적-계층-구조-표현"><a href="#%EC%A4%91%EC%B2%A9-%EC%9E%91%EC%84%B1-%EB%B0%A9%EC%8B%9D%EC%9D%84-%ED%86%B5%ED%95%9C-%EC%8B%9C%EA%B0%81%EC%A0%81-%EA%B3%84%EC%B8%B5-%EA%B5%AC%EC%A1%B0-%ED%91%9C%ED%98%84" aria-label="중첩 작성 방식을 통한 시각적 계층 구조 표현 permalink"></a>중첩 작성 방식을 통한 시각적 계층 구조 표현</h4><div data-language="scss"><pre><code> div {
 background-color: green
 &amp;:hover { background-color: blue }
 }
 
 .div {
 background-color: green
 &amp;_blue { background-color: blue }
 }</code></pre></div><h4 id="일부-scss-분리를-통한-css-모듈화---use-사용"><a href="#%EC%9D%BC%EB%B6%80-scss-%EB%B6%84%EB%A6%AC%EB%A5%BC-%ED%86%B5%ED%95%9C-css-%EB%AA%A8%EB%93%88%ED%99%94---use-%EC%82%AC%EC%9A%A9" aria-label="일부 scss 분리를 통한 css 모듈화 use 사용 permalink"></a>일부 SCSS 분리를 통한 CSS 모듈화 -&gt; @use 사용</h4><div data-language="scss"><pre><code>nav {
 ul {
 margin: 0;
 padding: 0;
 list-style: none;
 }

 li { display: inline-block; }

 a {
 display: block;
 padding: 6px 12px;
 text-decoration: none;
 }
}</code></pre></div><h4 id="mixins-사용으로-css-선언-그룹을-만들-수-있음-함수처럼-사용"><a href="#mixins-%EC%82%AC%EC%9A%A9%EC%9C%BC%EB%A1%9C-css-%EC%84%A0%EC%96%B8-%EA%B7%B8%EB%A3%B9%EC%9D%84-%EB%A7%8C%EB%93%A4-%EC%88%98-%EC%9E%88%EC%9D%8C-%ED%95%A8%EC%88%98%EC%B2%98%EB%9F%BC-%EC%82%AC%EC%9A%A9" aria-label="mixins 사용으로 css 선언 그룹을 만들 수 있음 함수처럼 사용 permalink"></a>mixins 사용으로 CSS 선언 그룹을 만들 수 있음, 함수처럼 사용</h4><div data-language="scss"><pre><code>@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);
}</code></pre></div><h4 id="extend-사용으로-속성-집합을-공유할-수-있음"><a href="#extend-%EC%82%AC%EC%9A%A9%EC%9C%BC%EB%A1%9C-%EC%86%8D%EC%84%B1-%EC%A7%91%ED%95%A9%EC%9D%84-%EA%B3%B5%EC%9C%A0%ED%95%A0-%EC%88%98-%EC%9E%88%EC%9D%8C" aria-label="extend 사용으로 속성 집합을 공유할 수 있음 permalink"></a>@extend 사용으로 속성 집합을 공유할 수 있음</h4><div data-language="scss"><pre><code>%message-shared {
 border: 1px solid #ccc;
 padding: 10px;
 color: #333;
}

.message {
 @extend %message-shared;
}

.success {
 @extend %message-shared;
 border-color: green;
}</code></pre></div><h4 id="------mathdiv--연산자를-사용-할-수-있음"><a href="#------mathdiv--%EC%97%B0%EC%82%B0%EC%9E%90%EB%A5%BC-%EC%82%AC%EC%9A%A9-%ED%95%A0-%EC%88%98-%EC%9E%88%EC%9D%8C" aria-label=" mathdiv 연산자를 사용 할 수 있음 permalink"></a>- +, -, *, math.div(), % 연산자를 사용 할 수 있음</h4><div data-language="scss"><pre><code>@use "sass:math";

.container {
 display: flex;
}

article[role="main"] {
 width: math.div(600px, 960px) * 100%;
}</code></pre></div><h3 id="설치"><a href="#%EC%84%A4%EC%B9%98" aria-label="설치 permalink"></a>설치</h3>npm install을 통해 다음 패키지들을 설치 <ul><li>node-sass </li><li>open-color </li><li>sass-loader </li><li>classnames </li></ul></div>쿠팡 파트너스 활동을 통해 일정액의 커미션을 제공받을 수 있습니다.</div>

아웃풋 트레이닝

BAEKDEV

SCSS
SCSS는 SASS의 3번째 버전에 추가  
SASS의 모든 기능을 쓸 수 있음 
CSS와 호환도 잘됨  
특징 및 주요 문법
자세한 내용은 sass-lang.com/guide, sass-lang.com/documentation 참고  
$를 통한 변수 선언 -> 중복 제거 및 재사용
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
  font: 100% $font-stack;
  color: $primary-color;
}
중첩 작성 방식을 통한 시각적 계층 구조 표현
    div {
    background-color: green
      &:hover { background-color: blue }
    }
    
    .div {
      background-color: green
      &_blue { background-color: blue }
    }
일부 SCSS 분리를 통한 CSS 모듈화 -> @use 사용
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  li { display: inline-block; }
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
mixins 사용으로 CSS 선언 그룹을 만들 수 있음, 함수처럼 사용
@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);
}
@extend 사용으로 속성 집합을 공유할 수 있음
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
.message {
  @extend %message-shared;
}
.success {
  @extend %message-shared;
  border-color: green;
}
- +, -, *, math.div(), % 연산자를 사용 할 수 있음
@use "sass:math";
.container {
  display: flex;
}
article[role="main"] {
  width: math.div(600px, 960px) * 100%;
}
설치
npm install을 통해 다음 패키지들을 설치  
node-sass  
open-color  
sass-loader  
classnames

[React Basic] SASS의 세번째 버전 SCSS

댓글