문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.

====== Sass Tutorial ======
<WRAP left notice 80%>
  * description : Sass Nested Rules and Properties
  * author      : 오션
  * email       : shlim@repia.com
  * lastupdate  : 2021-04-08
</WRAP>
<WRAP clear></WRAP>
\\
====Ref====
[[https://www.w3schools.com/sass/sass_nesting.php|Sass Nested Rules and Properties]]\\

=====Sass Nested Rules=====
%%Sass%%를 사용하면 %%HTML%%과 동일한 방식으로 %%CSS%% 셀렉터를 중첩할 수 있습니다.\\
\\
사이트 네비게이션에 대한 일부 %%Sass%% 코드의 예제를 살펴보겠습니다.\\
====SCSS Syntax====
<code sass>
nav {
    ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }
    li {
        display: inline-block;
    }
    a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
    }
}
</code>
\\
%%Sass%%에서 ''%%ul%%'', ''%%li%%'' 및 ''%%a%%'' 셀렉터는 ''%%nav%%'' 셀렉터 내부에 네스트되어 있습니다.\\
\\
반면, %%CSS%%에서 규칙은 하나 씩 정의됩니다 (네스트되지 않음).\\
====CSS Syntax====
<code 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;
}
</code>
\\
%%Sass%%에서 속성을 네스트할 수 있기 때문에, 표준 CSS보다 더 깔끔하고 읽기 쉽습니다.\\

=====Sass Nested Properties=====
많은 %%CSS%% 속성에는 font-family, font-size 및 font-weight 또는 text-align, text-transform 및 text-overflow와 같은 동일한 접두사(prefix)가 있습니다.\\
\\
%%Sass%%를 사용하면 네스트된 속성으로 %%CSS%% 속성을 작성할 수 있습니다.\\
====SCSS Syntax====
<code sass>
font: {
  family: Helvetica, sans-serif;
  size: 18px;
  weight: bold;
}

text: {
  align: center;
  transform: lowercase;
  overflow: hidden;
}
</code>
\\
%%Sass%% 트랜스파일러(transpiler)는 위의 SCSS 파일을 일반 CSS로 변환합니다:\\
====CSS Output====
<code css>
font-family: Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;

text-align: center;
text-transform: lowercase;
text-overflow: hidden;
</code>









{{tag>오션, Sass Nested Rules and Properties}}

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

문서 도구