wiki:sass:sass_mixin

차이

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

차이 보기로 링크

--- wiki:sass:sass_mixin [2021/07/22 08:48]
emblim98 [Defining a Mixin]
+++ wiki:sass:sass_mixin [2023/01/13 18:44] (현재)
@@ 줄 4: / 줄 4: @@
   * author      : 오션
   * email       : shlim@repia.com
-  * lastupdate  : 2021-04-08
+  * lastupdate  : 2021-07-22
 </WRAP>
 <WRAP clear></WRAP>
@@ 줄 18: / 줄 18: @@
 =====Defining a Mixin=====
 %%mixin%%은 ''%%@mixin%%'' 지시어로 정의됩니다.\\
+\\
 ====Sass @mixin Syntax====
 <code sass>
@@ 줄 40: / 줄 41: @@
 **Tip:**\\
 %%Sass%%의 하이픈 및 밑줄에 대한 팁:하이픈과 밑줄은 동일한 것으로 간주됩니다.\\
-이는 %%@mixin important-text {}%% 및 %%@mixin important_text {}%%가 동일한 mixin으로 간주된다는 것을 의미합니다!\\
+이는 %%@mixin important-text { }%% 및 %%@mixin important_text { }%%가 동일한 mixin으로 간주된다는 것을 의미합니다!\\
 =====Using a Mixin=====
-''@include'' 지시문은 mixin을 포함하는 데 사용됩니다.\\
+''@include'' 지시문은 mixin을 포함시키기 위해 사용됩니다.\\
 ====Sass @include mixin Syntax:====
 <code sass>
@@ 줄 51: / 줄 52: @@
 </code>
 \\
-위에서 생성된 important-text minin을 포함하기 위해서,
+위에서 생성된 중요-텍스트 mixin을 포함시키기 위해서, 아래와 같은 구문을 포함시킵니다.\\
+\\
 ====SCSS Syntax:====
 <code sass>
@@ 줄 60: / 줄 63: @@
 </code>
 \\
+====SCSS 구문 정리 (파일 명: mystyle.scss)====
+<code sass>
+@mixin important-text {
+  color:red;
+  font-size: 25px;
+  font-weight: bold;
+  border: 1px solid blue;
+}
+.danger {
+  @include importan-text;
+  background-color: green;
+}
+</code>
+\\
 %%Sass%% 트랜스파일러는 상기의 예제를 일반 CSS로 변환합니다.\\
-====CSS output====
+====CSS output (파일 명:mystyle.css)====
 <code css>
 .danger {

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