{"id":2408,"date":"2021-03-02T21:33:26","date_gmt":"2021-03-02T12:33:26","guid":{"rendered":"http:\/\/hangunsworld.com\/blog\/?p=2408"},"modified":"2021-03-04T21:48:47","modified_gmt":"2021-03-04T12:48:47","slug":"sass%ec%97%90%ec%84%9c-%eb%8b%a4%ed%81%ac%eb%aa%a8%eb%93%9c-%ec%a0%81%ec%9a%a9%ed%95%98%ea%b8%b0","status":"publish","type":"post","link":"http:\/\/hangunsworld.com\/blog\/2408","title":{"rendered":"Sass\uc5d0\uc11c \ub2e4\ud06c\ubaa8\ub4dc \uc801\uc6a9\ud558\uae30"},"content":{"rendered":"<p>\uc810\uc810 \ub2e4\ud06c\ubaa8\ub4dc\ub97c \uc801\uc6a9\ud558\ub294 \uc0ac\uc774\ud2b8\ub4e4\uc774 \ub298\uc5b4\ub098\uace0 \uc788\ub294\ub370, Sass\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub2e4\ud06c\ubaa8\ub4dc\ub97c \uc27d\uac8c \uc801\uc6a9\ud560 \uc218 \uc788\uac8c \ucf54\ub4dc\ub97c \ub9cc\ub4e4\uc5b4 \ubd24\uc2b5\ub2c8\ub2e4.<\/p>\n<p>\uc6b0\uc120 \uc77c\ubc18 \uceec\ub7ec \ud14c\ub9c8\uc640 \ub2e4\ud06c\ubaa8\ub4dc \ud14c\ub9c8\ub97c $light-theme\uc640 $dark-theme \ub9f5\uc5d0 \uac01\uac01 \uc120\uc5b8\ud569\ub2c8\ub2e4. (4-13\uc904)<br \/>\n\uadf8\ub9ac\uace0 \uc704\uc758 \ub9f5\uc744 \uc0ac\uc6a9\ud574\uc11c CSS\uc5d0\uc11c var()\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud55c \ubcc0\uc218\ub97c \uc120\uc5b8\ud558\uace0, \ubbf8\ub514\uc5b4\ucffc\ub9ac\ub3c4 \uc801\uc6a9\ud574 \uc90d\ub2c8\ub2e4. (15-25\uc904)<br \/>\n\uadf8\ub7ec\uba74 CSS\uc758 1-13\uc904\uacfc \uac19\uc774 \ubcc0\uc218\uac00 \uc0dd\uc131\ub429\ub2c8\ub2e4.<\/p>\n<p>\uc774\uc81c \ubcf8\uaca9\uc801\uc73c\ub85c \ubbf9\uc2a4\uc778\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4. (28-41\uc904)<br \/>\n\uae30\ubcf8\uc801\uc73c\ub85c color-theme(key: value)\uc758 \ud615\ud0dc\ub85c \ud55c \uac1c \uc774\uc0c1\uc758 \ud0a4:\ubc38\ub958 \uc30d\uc73c\ub85c \ub41c \uc18d\uc131\uc744 \uc804\ub2ec\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uadf8\ub7ec\ub098 border\ub098 background \ub4f1\uacfc \uac19\uc774 \uc0c9\uc0c1 \uc774\uc678\uc5d0 \ub2e4\ub978 \uc18d\uc131\ub3c4 \uac19\uc774 \uc124\uc815\ud560 \ud544\uc694\uac00 \uc788\ub294 \uacbd\uc6b0\uc5d0 color, prefix, suffix\uc758 \uc18d\uc131\uc744 \uac00\uc9c4 \ub9f5\uc744 \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n<p>43-53\uc904\uacfc \uac19\uc774 \ubbf9\uc2a4\uc778\uc744 \uc0ac\uc6a9\ud558\uba74 CSS\uc758 14-29\uc904\uc5d0 \ud574\ub2f9\ud558\ub294 \ucf54\ub4dc\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4.<br \/>\n\uac19\uc740 \uc18d\uc131\uc774 \ub450 \uac1c\uc529 \ub9cc\ub4e4\uc5b4 \uc9c0\ub294 \uac83\uc740 CSS\uc758 \ubcc0\uc218\ub098 \ubbf8\ub514\uc5b4\ucffc\ub9ac\ub97c \uc9c0\uc6d0\ud558\uc9c0 \uc54a\ub294 \uad6c\ud615 \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c\ub294 \uccab \ubc88\uc9f8 \uc18d\uc131\uc758 \uceec\ub7ec\ub97c \uc0ac\uc6a9\ud558\uace0, \uc9c0\uc6d0\ud558\ub294 \ube0c\ub77c\uc6b0\uc800\ub294 \ubcc0\uc218\uc640 \ubbf8\ub514\uc5b4\ucffc\ub9ac\uac00 \uc801\uc6a9\ub418\ub3c4\ub85d \ud558\uae30 \uc704\ud574\uc11c \uc785\ub2c8\ub2e4.<br \/>\nIE\uc640 \uac19\uc740 \uad6c\ud615 \ube0c\ub77c\uc6b0\uc800\ub97c \uc9c0\uc6d0\ud560 \ud544\uc694\uac00 \uc5c6\ub2e4\uba74 31, 37\uc904\uc758 \ucf54\ub4dc\ub294 \uc0ad\uc81c\ud558\uba74 \ub429\ub2c8\ub2e4.<\/p>\n<style>.preWrap:after{content:\"\";display:block;height:0;clear:both;}.preWrap .wp_syntax{display:block;width:50% !important;box-sizing:border-box;float:left;}<\/style>\n<div class=\"preWrap\">\n<pre line=\"1\" lang=\"sass\">@use \"sass:map\";\n@use \"sass:meta\";\n\n$light-theme: (\n    bgc: #fff,\n    txt: #333,\n    brd: #ff6\n);\n$dark-theme: (\n    bgc: #333,\n    txt: #eee,\n    brd: #339\n);\n\n:root{\n    @each $k, $v in $light-theme{\n        #{\"--\" + $k}: #{$v};\n    }\n}\n@media (prefers-color-scheme: dark){\n    :root{\n        @each $k, $v in $dark-theme{\n            #{\"--\" + $k}: #{$v};\n        }\n    }\n}\n\n@mixin color-theme($args...){\n    @each $k, $v in meta.keywords($args){\n        @if(meta.type-of($v) == \"string\"){\n            #{$k}: map.get($light-theme, $v);\n            #{$k}: #{\"var(--\" + $v + \")\"};\n        }@else if(meta.type-of($v) == \"map\"){\n            $c: map.get($v, color);\n            $p: map.get($v, prefix);\n            $s: map.get($v, suffix);\n            #{$k}: $p map.get($light-theme, $c) $s;\n            #{$k}: $p #{\"var(--\" + $c + \")\"} $s;\n        }\n    }\n}\n\nhtml, body{\n\t@include color-theme($color: txt, $background-color: bgc);\n}\n\n.border{\n\t@include color-theme($border: (prefix: 1px solid, color: brd));\n}\n\n.background{\n    @include color-theme($background: (color: bgc, suffix: url(bg.jpg) no-repeat 50% 50%));\n}<\/pre>\n<pre line=\"1\" lang=\"css\">:root {\n  --bgc:#fff;\n  --txt:#333;\n  --brd:#ff6;\n}\n\n@media (prefers-color-scheme: dark) {\n  :root {\n    --bgc:#333;\n    --txt:#eee;\n    --brd:#339;\n  }\n}\nhtml, body {\n  color: #333;\n  color: var(--txt);\n  background-color: #fff;\n  background-color: var(--bgc);\n}\n\n.border {\n  border: 1px solid #ff6;\n  border: 1px solid var(--brd);\n}\n\n.background {\n  background: #fff url(bg.jpg) no-repeat 50% 50%;\n  background: var(--bgc) url(bg.jpg) no-repeat 50% 50%;\n}<\/pre>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\uc810\uc810 \ub2e4\ud06c\ubaa8\ub4dc\ub97c \uc801\uc6a9\ud558\ub294 \uc0ac\uc774\ud2b8\ub4e4\uc774 \ub298\uc5b4\ub098\uace0 \uc788\ub294\ub370, Sass\ub97c \uc0ac\uc6a9\ud558\uc5ec \ub2e4\ud06c\ubaa8\ub4dc\ub97c \uc27d\uac8c \uc801\uc6a9\ud560 \uc218 \uc788\uac8c \ucf54\ub4dc\ub97c \ub9cc\ub4e4\uc5b4 \ubd24\uc2b5\ub2c8\ub2e4. \uc6b0\uc120 \uc77c\ubc18 \uceec\ub7ec \ud14c\ub9c8\uc640 \ub2e4\ud06c\ubaa8\ub4dc \ud14c\ub9c8\ub97c $light-theme\uc640 $dark-theme \ub9f5\uc5d0 \uac01\uac01 \uc120\uc5b8\ud569\ub2c8\ub2e4. (4-13\uc904) \uadf8\ub9ac\uace0 \uc704\uc758 \ub9f5\uc744 \uc0ac\uc6a9\ud574\uc11c CSS\uc5d0\uc11c var()\ub97c \uc0ac\uc6a9\ud558\uae30 \uc704\ud55c \ubcc0\uc218\ub97c \uc120\uc5b8\ud558\uace0, \ubbf8\ub514\uc5b4\ucffc\ub9ac\ub3c4 \uc801\uc6a9\ud574 \uc90d\ub2c8\ub2e4. (15-25\uc904) \uadf8\ub7ec\uba74 CSS\uc758 1-13\uc904\uacfc \uac19\uc774 \ubcc0\uc218\uac00 \uc0dd\uc131\ub429\ub2c8\ub2e4. \uc774\uc81c \ubcf8\uaca9\uc801\uc73c\ub85c \ubbf9\uc2a4\uc778\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4. (28-41\uc904) \uae30\ubcf8\uc801\uc73c\ub85c color-theme(key: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[466,591],"class_list":["post-2408","post","type-post","status-publish","format-standard","hentry","category-htmlcss","tag-css","tag-sass"],"_links":{"self":[{"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/posts\/2408","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/comments?post=2408"}],"version-history":[{"count":0,"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/posts\/2408\/revisions"}],"wp:attachment":[{"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/media?parent=2408"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/categories?post=2408"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/hangunsworld.com\/blog\/wp-json\/wp\/v2\/tags?post=2408"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}