{"id":5540,"date":"2019-12-23T10:00:00","date_gmt":"2019-12-23T01:00:00","guid":{"rendered":"https:\/\/iseed.jp\/wp\/?p=418"},"modified":"2025-09-02T11:35:01","modified_gmt":"2025-09-02T02:35:01","slug":"sass-introduction-method-koala-compile","status":"publish","type":"post","link":"https:\/\/iseed.jp\/blog\/sass-introduction-method-koala-compile\/","title":{"rendered":"Sass \u5c0e\u5165\u65b9\u6cd5(Koala\u3067\u30b3\u30f3\u30d1\u30a4\u30eb)"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Sass \u306f\u305d\u306e\u307e\u307e\u3067\u306f\u4f7f\u7528\u3067\u304d\u306a\u3044\u305f\u3081\u3001CSS \u306b\u5909\u63db\uff08\u30b3\u30f3\u30d1\u30a4\u30eb\uff09\u3057\u307e\u3059\u3002<br>\u30b3\u30f3\u30d1\u30a4\u30eb\u306e\u624b\u6bb5\u306f\u8272\u3005\u3042\u308b\u306e\u3067\u3059\u304c\u3001\u4eca\u56de\u306f Koala \u3068\u3044\u3046\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u3067\u884c\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3068\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><a href=\"http:\/\/koala-app.com\/\">\u516c\u5f0f\u30b5\u30a4\u30c8<\/a>\u304b\u3089\u30bd\u30d5\u30c8\u3092\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3057\u3001\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Koala \u306e\u8d77\u52d5<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"900\" height=\"556\" src=\"https:\/\/iseed.jp\/blog2\/wp-content\/uploads\/2019\/06\/koala.jpg\" alt=\"\" class=\"wp-image-1835\" srcset=\"https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/06\/koala.jpg 900w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/06\/koala-300x185.jpg 300w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/06\/koala-768x474.jpg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u8d77\u52d5\u5f8c\u306f\u30bf\u30b9\u30af\u30d0\u30fc\u3067\u306f\u306a\u304f\u3001\u53f3\u4e0b\u306e\u300c\u96a0\u308c\u3066\u3044\u308b\u30a4\u30f3\u30b8\u30b1\u30fc\u30bf\u30fc\u300d\u5185\u306b\u3042\u308b\u5834\u5408\u3082\u3042\u308a\u307e\u3059\u3002<br>\u30bf\u30b9\u30af\u30d0\u30fc\u304b\u3089\u8d77\u52d5\u3057\u306a\u304f\u306a\u3063\u305f\u5834\u5408\u3082\u3001\u30a4\u30f3\u30b8\u30b1\u30fc\u30bf\u30fc\u3092\u78ba\u8a8d\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"304\" height=\"154\" src=\"https:\/\/iseed.jp\/blog2\/wp-content\/uploads\/2019\/06\/indicator.jpg\" alt=\"\" class=\"wp-image-1834\" srcset=\"https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/06\/indicator.jpg 304w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/06\/indicator-300x152.jpg 300w\" sizes=\"(max-width: 304px) 100vw, 304px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Koala \u306e\u65e5\u672c\u8a9e\u5316<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u6700\u521d\u306f\u82f1\u8a9e\u306a\u306e\u3067\u3001\u65e5\u672c\u8a9e\u5316\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n\n\n\n<div class=\"swell-block-step\" data-num-style=\"circle\">\n<div class=\"swell-block-step__item\"><div class=\"swell-block-step__number u-bg-main\"><span class=\"__label\">STEP<\/span><\/div><div class=\"swell-block-step__title u-fz-l\">\u5de6\u4e0a\u306e\u6b6f\u8eca\u30a2\u30a4\u30b3\u30f3\u3092\u30af\u30ea\u30c3\u30af\uff08\u74b0\u5883\u8a2d\u5b9a\uff09<\/div><div class=\"swell-block-step__body\">\n<figure class=\"wp-block-image size-full is-style-border\"><img decoding=\"async\" width=\"900\" height=\"556\" src=\"https:\/\/iseed.jp\/blog2\/wp-content\/uploads\/2019\/06\/koala1.jpg\" alt=\"Koala \u65e5\u672c\u8a9e\u5316\" class=\"wp-image-1836\" srcset=\"https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/06\/koala1.jpg 900w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/06\/koala1-300x185.jpg 300w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/06\/koala1-768x474.jpg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"swell-block-step__item\"><div class=\"swell-block-step__number u-bg-main\"><span class=\"__label\">STEP<\/span><\/div><div class=\"swell-block-step__title u-fz-l\">\u4e00\u822c \u2192 \u8a00\u8a9e \u3092\u65e5\u672c\u8a9e\u306b\u8a2d\u5b9a<\/div><div class=\"swell-block-step__body\">\n<figure class=\"wp-block-image size-full is-style-border\"><img decoding=\"async\" width=\"900\" height=\"556\" src=\"https:\/\/iseed.jp\/blog2\/wp-content\/uploads\/2019\/06\/koala2.jpg\" alt=\"Koala \u65e5\u672c\u8a9e\u5316\" class=\"wp-image-1837\" srcset=\"https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/06\/koala2.jpg 900w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/06\/koala2-300x185.jpg 300w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/06\/koala2-768x474.jpg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30d5\u30a1\u30a4\u30eb\u304c\u3059\u3067\u306b\u3042\u308b\u5834\u5408<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f1a\u793e\u306a\u3069\u3067\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u304c\u3042\u308b\u5834\u5408\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30d5\u30a1\u30a4\u30eb\u5185\u306bkoala-config.json\u304c\u7121\u3044\u304b\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">koala-config.json \u30d5\u30a1\u30a4\u30eb\u306f\u3001koala \u306e\u8a2d\u5b9a\u30d5\u30a1\u30a4\u30eb\u306a\u306e\u3067\u3001\u3042\u308b\u5834\u5408\u306f\u4ee5\u4e0b\u306e\u30d5\u30a9\u30eb\u30c0\u69cb\u9020\u306e\u69cb\u7bc9\u3084\u521d\u671f\u8a2d\u5b9a\u306a\u3069\u304c\u3059\u3067\u306b\u7d42\u308f\u3063\u3066\u3044\u307e\u3059\u306e\u3067\u3001\u305d\u308c\u306b\u5f93\u3063\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30d5\u30a1\u30a4\u30eb\u306e\u6e96\u5099<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Sass \u3092\u4f7f\u7528\u3057\u305f\u3044\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u7528\u610f\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eca\u56de\u3053\u306e\u8a18\u4e8b\u3067\u6e96\u5099\u3059\u308b\u30d5\u30a9\u30eb\u30c0\u69cb\u6210\u306f\u4ee5\u4e0b\u3068\u306a\u308a\u307e\u3059\u3002\u203b []\u306f\u30d5\u30a9\u30eb\u30c0<\/p>\n\n\n\n<div class=\"wp-block-custom-code-with-style\"><div class=\"!p-8 !pt-10 rounded-lg bg-[#282c34] relative overflow-hidden\"><div class=\"\"><pre class=\"!m-0 !p-0\"><code class=\"!m-0 !p-0 !overflow-hidden\">[css] \u2500 [sass] \u2500 common.scss\n      \u2514 common.css\n      \u2514 reset.css\n[img]\n[js]\nindex.html\nstyle.css<\/code><\/pre><button class=\"absolute top-0 right-0 !p-4 !bg-transparent !border-0\" data-tippy-content=\"\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\"><svg width=\"14px\" height=\"16px\" viewBox=\"0 0 14 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"text-[#98A7AA] hover:text-[#EEF0F0]\"><path d=\"M5.20039 12.8C4.76039 12.8 4.38372 12.6433 4.07039 12.33C3.75706 12.0167 3.60039 11.64 3.60039 11.2V1.6C3.60039 1.16 3.75706 0.783333 4.07039 0.47C4.38372 0.156667 4.76039 0 5.20039 0H12.4004C12.8404 0 13.2171 0.156667 13.5304 0.47C13.8437 0.783333 14.0004 1.16 14.0004 1.6V11.2C14.0004 11.64 13.8437 12.0167 13.5304 12.33C13.2171 12.6433 12.8404 12.8 12.4004 12.8H5.20039ZM2.00039 16C1.56039 16 1.18372 15.8433 0.870391 15.53C0.557057 15.2167 0.400391 14.84 0.400391 14.4V4C0.400391 3.77333 0.477057 3.58333 0.630391 3.43C0.783724 3.27667 0.973724 3.2 1.20039 3.2C1.42706 3.2 1.61706 3.27667 1.77039 3.43C1.92372 3.58333 2.00039 3.77333 2.00039 4V14.4H10.0004C10.2271 14.4 10.4171 14.4767 10.5704 14.63C10.7237 14.7833 10.8004 14.9733 10.8004 15.2C10.8004 15.4267 10.7237 15.6167 10.5704 15.77C10.4171 15.9233 10.2271 16 10.0004 16H2.00039Z\" fill=\"currentColor\"><\/path><\/svg><\/button><\/div><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress \u306e\u69cb\u7bc9\u3092\u610f\u8b58\u3057\u3066\u3044\u307e\u3059\u3002<br>style.css \u306b\u306f\u3001common.css \u3068 reset.css \u3092\u30a4\u30f3\u30dd\u30fc\u30c8\u3057\u3066\u3042\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"wp-block-custom-code-with-style\"><div class=\"!p-8 !pt-10 rounded-lg bg-[#282c34] relative overflow-hidden\"><div class=\"\"><pre class=\"!m-0 !p-0\"><code class=\"!m-0 !p-0 !overflow-hidden\">@charset \"utf-8\";\n@import url(\"css\/reset.css\");\n@import url(\"css\/common.css\");\n<\/code><\/pre><button class=\"absolute top-0 right-0 !p-4 !bg-transparent !border-0\" data-tippy-content=\"\u30b3\u30d4\u30fc\u3057\u307e\u3057\u305f\"><svg width=\"14px\" height=\"16px\" viewBox=\"0 0 14 16\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"text-[#98A7AA] hover:text-[#EEF0F0]\"><path d=\"M5.20039 12.8C4.76039 12.8 4.38372 12.6433 4.07039 12.33C3.75706 12.0167 3.60039 11.64 3.60039 11.2V1.6C3.60039 1.16 3.75706 0.783333 4.07039 0.47C4.38372 0.156667 4.76039 0 5.20039 0H12.4004C12.8404 0 13.2171 0.156667 13.5304 0.47C13.8437 0.783333 14.0004 1.16 14.0004 1.6V11.2C14.0004 11.64 13.8437 12.0167 13.5304 12.33C13.2171 12.6433 12.8404 12.8 12.4004 12.8H5.20039ZM2.00039 16C1.56039 16 1.18372 15.8433 0.870391 15.53C0.557057 15.2167 0.400391 14.84 0.400391 14.4V4C0.400391 3.77333 0.477057 3.58333 0.630391 3.43C0.783724 3.27667 0.973724 3.2 1.20039 3.2C1.42706 3.2 1.61706 3.27667 1.77039 3.43C1.92372 3.58333 2.00039 3.77333 2.00039 4V14.4H10.0004C10.2271 14.4 10.4171 14.4767 10.5704 14.63C10.7237 14.7833 10.8004 14.9733 10.8004 15.2C10.8004 15.4267 10.7237 15.6167 10.5704 15.77C10.4171 15.9233 10.2271 16 10.0004 16H2.00039Z\" fill=\"currentColor\"><\/path><\/svg><\/button><\/div><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><code>css\/sass\/common.scss<\/code>\u304c\u3001Sass\u30d5\u30a1\u30a4\u30eb\u306b\u306a\u308a\u307e\u3059\u3002<br>\u30b3\u30f3\u30d1\u30a4\u30eb\u3059\u308b\u3068\u3001<code>css\/common.css<\/code>\u306e\u30d5\u30a1\u30a4\u30eb\u304c\u4e0a\u66f8\u304d\u3055\u308c\u308b\u3088\u3046\u306b\u69cb\u7bc9\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Koala \u306b Sass \u3092\u4f7f\u7528\u3057\u305f\u3044\u30d5\u30a9\u30eb\u30c0\u3092\u767b\u9332<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u5de6\u4e0a\u306e + \u30a2\u30a4\u30b3\u30f3\u3092\u62bc\u3057\u3066\u9078\u629e\u3059\u308b\u304b\u3001\u30d5\u30a9\u30eb\u30c0\u3092\u30c9\u30e9\u30c3\u30b0\u30a2\u30f3\u30c9\u30c9\u30ed\u30c3\u30d7\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-border\"><img decoding=\"async\" width=\"900\" height=\"556\" src=\"https:\/\/iseed.jp\/blog2\/wp-content\/uploads\/2019\/06\/koala3.jpg\" alt=\"Koala \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u767b\u9332\" class=\"wp-image-1838\" srcset=\"https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/06\/koala3.jpg 900w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/06\/koala3-300x185.jpg 300w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/06\/koala3-768x474.jpg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30d5\u30a1\u30a4\u30eb\u304c\u767b\u9332\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-style-border\"><img decoding=\"async\" width=\"900\" height=\"556\" src=\"https:\/\/iseed.jp\/blog2\/wp-content\/uploads\/2019\/06\/koala4.jpg\" alt=\"Koala \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u767b\u9332\u6e08\u307f\" class=\"wp-image-1839\" srcset=\"https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/06\/koala4.jpg 900w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/06\/koala4-300x185.jpg 300w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/06\/koala4-768x474.jpg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Koala \u306e\u521d\u671f\u8a2d\u5b9a<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u521d\u671f\u8a2d\u5b9a\u3092\u3057\u3066\u3044\u304d\u307e\u3059\u3002<br>\u203b\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30d5\u30a1\u30a4\u30eb\u5185\u306b\u3001<code>koala-config.json<\/code>\u304c\u3042\u308b\u5834\u5408\u306f\u3001\u305d\u306e\u8a2d\u5b9a\u304c\u512a\u5148\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"swell-block-step\" data-num-style=\"circle\">\n<div class=\"swell-block-step__item\"><div class=\"swell-block-step__number u-bg-main\"><span class=\"__label\">STEP<\/span><\/div><div class=\"swell-block-step__title u-fz-l\">\u5de6\u4e0a\u306e\u6b6f\u8eca\u30a2\u30a4\u30b3\u30f3\u3092\u30af\u30ea\u30c3\u30af\uff08\u74b0\u5883\u8a2d\u5b9a\uff09<\/div><div class=\"swell-block-step__body\">\n<figure class=\"wp-block-image size-full is-style-border\"><img decoding=\"async\" width=\"900\" height=\"556\" src=\"https:\/\/iseed.jp\/blog2\/wp-content\/uploads\/2019\/06\/koala1.jpg\" alt=\"Koala \u65e5\u672c\u8a9e\u5316\" class=\"wp-image-1836\" srcset=\"https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/06\/koala1.jpg 900w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/06\/koala1-300x185.jpg 300w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/06\/koala1-768x474.jpg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"swell-block-step__item\"><div class=\"swell-block-step__number u-bg-main\"><span class=\"__label\">STEP<\/span><\/div><div class=\"swell-block-step__title u-fz-l\">Sass \u306e \u300cSource Map\u300d\u3068\u300cAutoprefix\u300d\u306b\u30c1\u30a7\u30c3\u30af\u3092\u5165\u308c\u3001\u30a2\u30a6\u30c8\u30d7\u30c3\u30c8\u30b9\u30bf\u30a4\u30eb\u3092\u300cexpanded\u300d\u306b<\/div><div class=\"swell-block-step__body\">\n<figure class=\"wp-block-image size-full is-style-border\"><img decoding=\"async\" width=\"900\" height=\"556\" src=\"https:\/\/iseed.jp\/blog2\/wp-content\/uploads\/2019\/06\/koala5.jpg\" alt=\"Koala \u521d\u671f\u8a2d\u5b9a\" class=\"wp-image-1840\" srcset=\"https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/06\/koala5.jpg 900w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/06\/koala5-300x185.jpg 300w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/06\/koala5-768x474.jpg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-custom-box-with-style\"><div class=\"is-style-bg border-2 rounded-lg overflow-hidden bg-[#F8F8F8] border-transparent\"><div class=\"!p-5 md:!p-8 !pt-5 md:!pt-6 !m-0 [&amp;&gt;*]:!mb-4 [&amp;&gt;*]:last:!mb-0\">\n<div class=\"wp-block-custom-list-with-style\"><ul class=\"wp-block-list is-style-default flex flex-col gap-[0em] !pl-6\"><li class=\"marker:text-[#B8C4C6] \"><span class=\"!text-[14px]\">\u300cSource Map\u300d \u306f\u3001\u691c\u8a3c\u753b\u9762\u3067 Sass \u304c\u78ba\u8a8d\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u3082\u306e\u3067\u3059\u3002<br>\u30b3\u30f3\u30d1\u30a4\u30eb\u6642\u306b\u300c\u30d5\u30a1\u30a4\u30eb\u540d.css.map\u300d\u3068\u3044\u3046\u30d5\u30a1\u30a4\u30eb\u304c\u81ea\u52d5\u3067\u51fa\u6765\u4e0a\u304c\u308a\u307e\u3059\u3002<\/span><\/li><li class=\"marker:text-[#B8C4C6] \"><span class=\"!text-[14px]\">\u300cAutoprefix\u300d\u306f\u3001\u30d9\u30f3\u30c0\u30fc\u30d7\u30ec\u30d5\u30a3\u30c3\u30af\u30b9\u3092\u81ea\u52d5\u7684\u306b\u4ed8\u4e0e\u3057\u305f\u308a\u524a\u9664\u3057\u3066\u304f\u308c\u307e\u3059\u3002<\/span><\/li><li class=\"marker:text-[#B8C4C6] \"><span class=\"!text-[14px]\">\u30a2\u30a6\u30c8\u30d7\u30c3\u30c8\u30b9\u30bf\u30a4\u30eb\u300cexpanded\u300d\u306f\u3001Sass \u3092\u30b3\u30f3\u30d1\u30a4\u30eb\u3057\u305f\u5f8c\u306e\u3001css \u306e\u8a18\u8ff0\u3092\u300c\u666e\u901a\u306bCSS\u3092\u66f8\u3044\u305f\u69d8\u306b\u300d\u3057\u307e\u3059\u3002<\/span><\/li><\/ul><\/div>\n<\/div><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u8272\u3005\u8a2d\u5b9a\u306f\u3044\u3058\u308c\u307e\u3059\u304c\u3001\u3068\u308a\u3042\u3048\u305a\u306f\u30b3\u30ec\u3067\u8a2d\u5b9a\u3057\u3066\u304a\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u30b3\u30f3\u30d1\u30a4\u30eb\u5148\u3092\u8a2d\u5b9a\u3059\u308b<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Sass \u3092\u30b3\u30f3\u30d1\u30a4\u30eb\u3057\u305f\u6642\u306b\u3001\u30a2\u30a6\u30c8\u30d7\u30c3\u30c8\u3059\u308b\u5148\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<br>\u203b\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u30d5\u30a1\u30a4\u30eb\u5185\u306b\u3001<code>koala-config.json<\/code>\u304c\u3042\u308b\u5834\u5408\u306f\u3001\u3059\u3067\u306b\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u308b\u306e\u3067\u5fc5\u8981\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u4eca\u56de\u306f\u3001<code>css\/sass\/common.scss<\/code>\u3092\u30b3\u30f3\u30d1\u30a4\u30eb\u3059\u308b\u3068\u3001<code>css\/common.css<\/code>\u306e\u30d5\u30a1\u30a4\u30eb\u304c\u4e0a\u66f8\u304d\u3055\u308c\u308b\u3088\u3046\u306b\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<div class=\"swell-block-step\" data-num-style=\"circle\">\n<div class=\"swell-block-step__item\"><div class=\"swell-block-step__number u-bg-main\" data-num=\"\"><span class=\"__label\">STEP<\/span><\/div><div class=\"swell-block-step__title u-fz-l\">scss \u30d5\u30a1\u30a4\u30eb\u3092\u53f3\u30af\u30ea\u30c3\u30af\u3057\u3066\u3001\u300c\u30a2\u30a6\u30c8\u30d7\u30c3\u30c8\u30d1\u30b9\u8a2d\u5b9a\u300d\u304b\u3089\u3001css\/common.css\u3092\u9078\u629e<\/div><div class=\"swell-block-step__body\">\n<figure class=\"wp-block-image size-full is-style-border\"><img decoding=\"async\" width=\"900\" height=\"556\" src=\"https:\/\/iseed.jp\/blog2\/wp-content\/uploads\/2019\/06\/koala6.jpg\" alt=\"Koala \u30a2\u30a6\u30c8\u30d7\u30c3\u30c8\u30d1\u30b9\u8a2d\u5b9a\" class=\"wp-image-450\" srcset=\"https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/06\/koala6.jpg 900w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/06\/koala6-300x185.jpg 300w, https:\/\/iseed.jp\/blog\/wp-content\/uploads\/2019\/06\/koala6-768x474.jpg 768w\" sizes=\"(max-width: 900px) 100vw, 900px\" \/><\/figure>\n<\/div><\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">\u30b3\u30ec\u3067\u3001\u30b3\u30f3\u30d1\u30a4\u30eb\u5148\u304c\u8a2d\u5b9a\u3067\u304d\u307e\u3057\u305f\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Sass \u3092\u8a18\u8ff0\u3059\u308b<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">\u5f8c\u306f\u3001scss \u30d5\u30a1\u30a4\u30eb\u306b Sass \u3092\u8a18\u8ff0\u3057\u3066\u3044\u304f\u3060\u3051\u3067\u3059\u3002<br>\u30d5\u30a1\u30a4\u30eb\u3092\u66f4\u65b0\u3059\u308b\u3068\u3001\u81ea\u52d5\u7684\u306b\u30b3\u30f3\u30d1\u30a4\u30eb\u304c\u5b9f\u884c\u3055\u308c\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sass \u306f\u305d\u306e\u307e\u307e\u3067\u306f\u4f7f\u7528\u3067\u304d\u306a\u3044\u305f\u3081\u3001CSS \u306b\u5909\u63db\uff08\u30b3\u30f3\u30d1\u30a4\u30eb\uff09\u3057\u307e\u3059\u3002\u30b3\u30f3\u30d1\u30a4\u30eb\u306e\u624b\u6bb5\u306f\u8272\u3005\u3042\u308b\u306e\u3067\u3059\u304c\u3001\u4eca\u56de\u306f Koala \u3068\u3044\u3046\u30bd\u30d5\u30c8\u30a6\u30a7\u30a2\u3067\u884c\u3044\u307e\u3059\u3002 \u30c0\u30a6\u30f3\u30ed\u30fc\u30c9\u3068\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb \u516c\u5f0f\u30b5\u30a4\u30c8\u304b\u3089\u30bd\u30d5\u30c8\u3092\u30c0\u30a6 [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":456,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"swell_btn_cv_data":"","footnotes":""},"categories":[3],"tags":[40],"class_list":["post-5540","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-design","tag-html-css"],"_links":{"self":[{"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/posts\/5540","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/comments?post=5540"}],"version-history":[{"count":1,"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/posts\/5540\/revisions"}],"predecessor-version":[{"id":5727,"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/posts\/5540\/revisions\/5727"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/media\/456"}],"wp:attachment":[{"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/media?parent=5540"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/categories?post=5540"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/iseed.jp\/blog\/wp-json\/wp\/v2\/tags?post=5540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}