wiki:sass:sass_nesting

차이

문서의 선택한 두 판 사이의 차이를 보여줍니다.

차이 보기로 링크

--- wiki:sass:sass_nesting [2021/04/08 17:59]
emblim98 만듦
+++ wiki:sass:sass_nesting [2023/01/13 18:44] (현재)
@@ 줄 12: / 줄 12: @@
 =====Sass Nested Rules=====
-%%Sass%%를 사용하면 HTML과 동일한 방식으로 CSS 셀렉터를 중첩할 수 있습니다.\\
+%%Sass%%를 사용하면 %%HTML%%과 동일한 방식으로 %%CSS%% 셀렉터를 중첩할 수 있습니다.\\
 \\
 사이트 네비게이션에 대한 일부 %%Sass%% 코드의 예제를 살펴보겠습니다.\\
@@ 줄 61: / 줄 61: @@
 많은 %%CSS%% 속성에는 font-family, font-size 및 font-weight 또는 text-align, text-transform 및 text-overflow와 같은 동일한 접두사(prefix)가 있습니다.\\
 \\
-%%Sass%%를 사용하면 네스트된 속성으로 CSS 속성을 작성할 수 있습니다.\\
+%%Sass%%를 사용하면 네스트된 속성으로 %%CSS%% 속성을 작성할 수 있습니다.\\
 ====SCSS Syntax====
 <code sass>
+font: {
+  family: Helvetica, sans-serif;
+  size: 18px;
+  weight: bold;
+}
+text: {
+  align: center;
+  transform: lowercase;
+  overflow: hidden;
+}
 </code>
 \\
@@ 줄 70: / 줄 80: @@
 ====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>

/volume1/web/dokuwiki/data/attic/wiki/sass/sass_nesting.1617872381.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)