{"id":1568,"date":"2025-03-24T08:50:23","date_gmt":"2025-03-23T23:50:23","guid":{"rendered":"https:\/\/dexall.co.jp\/articles\/?p=1568"},"modified":"2025-03-24T08:50:23","modified_gmt":"2025-03-23T23:50:23","slug":"%e3%80%902024%e5%b9%b4%e4%bf%9d%e5%ad%98%e7%89%88%e3%80%91rails%e9%96%8b%e7%99%ba%e8%80%85%e3%81%ae%e3%81%9f%e3%82%81%e3%81%aesass%e5%ae%8c%e5%85%a8%e3%82%ac%e3%82%a4%e3%83%89%ef%bc%9acss%e7%ae%a1","status":"publish","type":"post","link":"https:\/\/dexall.co.jp\/articles\/?p=1568","title":{"rendered":"\u30102024\u5e74\u4fdd\u5b58\u7248\u3011Rails\u958b\u767a\u8005\u306e\u305f\u3081\u306eSass\u5b8c\u5168\u30ac\u30a4\u30c9\uff1aCSS\u7ba1\u7406\u3092\u5287\u7684\u306b\u6539\u5584\u3059\u308b7\u3064\u306e\u5b9f\u8df5\u30c6\u30af\u30cb\u30c3\u30af"},"content":{"rendered":"\n<div class=\"toc\"><br \/>\n<b>Warning<\/b>:  Undefined array key \"is_admin\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>116<\/b><br \/>\n<br \/>\n<b>Warning<\/b>:  Undefined array key \"is_category_top\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>121<\/b><br \/>\n<br \/>\n<b>Warning<\/b>:  Undefined array key \"is_top\" in <b>\/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/sango-theme\/library\/gutenberg\/dist\/classes\/Toc.php<\/b> on line <b>128<\/b><br \/>\n    <div id=\"toc_container\" class=\"sgb-toc--bullets js-smooth-scroll\" data-dialog-title=\"\u76ee\u6b21\">\n      <p class=\"toc_title\">\u76ee\u6b21 <\/p>\n      <ul class=\"toc_list\">  <li class=\"first\">    <a href=\"#i-0\">Sass\u3068\u306f\uff1aRails\u3067\u306eCSS\u7ba1\u7406\u3092\u5909\u9769\u3059\u308b\u30d7\u30ea\u30d7\u30ed\u30bb\u30c3\u30b5\u30fc<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-1\">\u5f93\u6765\u306eCSS\u304c\u62b1\u3048\u308b3\u3064\u306e\u8ab2\u984c<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-2\">Sass\u304c\u63d0\u4f9b\u3059\u308b\u554f\u984c\u89e3\u6c7a\u30a2\u30d7\u30ed\u30fc\u30c1<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-3\">Rails\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u59cb\u3081\u308bSass\u5c0e\u5165\u624b\u9806<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-4\">Asset Pipeline\u3067\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u65b9\u6cd5<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-5\">Webpacker\u3092\u4f7f\u7528\u3059\u308b\u5834\u5408\u306e\u8a2d\u5b9a\u65b9\u6cd5<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-6\">CSS\u7ba1\u7406\u3092\u6539\u5584\u3059\u308b7\u3064\u306eSass\u30c6\u30af\u30cb\u30c3\u30af<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-7\">\u5909\u6570\u5b9a\u7fa9\u3067\u30d6\u30e9\u30f3\u30c9\u30ab\u30e9\u30fc\u3092\u7d71\u4e00\u7ba1\u7406<\/a>      <\/li>      <li>        <a href=\"#i-8\">\u30cd\u30b9\u30c8\u306b\u3088\u308b\u30bb\u30ec\u30af\u30bf\u306e\u8996\u8a8d\u6027\u5411\u4e0a<\/a>      <\/li>      <li>        <a href=\"#i-9\">mixin\u3067\u30b3\u30fc\u30c9\u306e\u518d\u5229\u7528\u6027\u3092\u6700\u5927\u5316<\/a>      <\/li>      <li>        <a href=\"#i-10\">\u30d1\u30fc\u30b7\u30e3\u30eb\u306b\u3088\u308b\u30e2\u30b8\u30e5\u30fc\u30eb\u5316\u6226\u7565<\/a>      <\/li>      <li>        <a href=\"#i-11\">\u95a2\u6570\u3092\u6d3b\u7528\u3057\u305f\u30c0\u30a4\u30ca\u30df\u30c3\u30af\u306a\u5024\u306e\u8a08\u7b97<\/a>      <\/li>      <li>        <a href=\"#i-12\">\u30a8\u30af\u30b9\u30c6\u30f3\u30c9\u306b\u3088\u308b\u30b9\u30bf\u30a4\u30eb\u306e\u7d99\u627f\u8a2d\u8a08<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-13\">\u30ab\u30b9\u30bf\u30e0\u95a2\u6570\u3067\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u3092\u62e1\u5f35<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-14\">Sass\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u306b\u3088\u308b\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-15\">\u30b3\u30f3\u30d1\u30a4\u30eb\u5f8c\u306e\u30d5\u30a1\u30a4\u30eb\u30b5\u30a4\u30ba\u3092\u524a\u6e1b\u3059\u308b\u30c6\u30af\u30cb\u30c3\u30af<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-16\">\u30d6\u30e9\u30a6\u30b6\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u8003\u616e\u3057\u305f\u30a2\u30bb\u30c3\u30c8\u7ba1\u7406<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-17\">\u5b9f\u8df5\u7684\u306aSass\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u69cb\u6210\u3068\u30b3\u30fc\u30c9\u7ba1\u7406<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-18\">7-1\u30d1\u30bf\u30fc\u30f3\u306b\u3088\u308bSass\u30d5\u30a1\u30a4\u30eb\u8a2d\u8a08<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-19\">\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u6307\u5411CSS\u306e\u5b9f\u73fe\u65b9\u6cd5<\/a>      <\/li>    <\/ul>  <\/li>  <li>    <a href=\"#i-20\">Sass\u30c7\u30d0\u30c3\u30b0\u3068\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-21\">\u4e00\u822c\u7684\u306a\u30b3\u30f3\u30d1\u30a4\u30eb\u30a8\u30e9\u30fc\u306e\u89e3\u6c7a\u65b9\u6cd5<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-22\">\u958b\u767a\u30c4\u30fc\u30eb\u3092\u4f7f\u7528\u3057\u305f\u30c7\u30d0\u30c3\u30b0\u30c6\u30af\u30cb\u30c3\u30af<\/a>      <\/li>    <\/ul>  <\/li>  <li class=\"last\">    <a href=\"#i-23\">\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\uff1a\u3055\u3089\u306a\u308bSass\u30b9\u30ad\u30eb\u5411\u4e0a\u306e\u305f\u3081\u306b<\/a>    <ul class=\"menu_level_1\">      <li class=\"first\">        <a href=\"#i-24\">\u304a\u3059\u3059\u3081\u306eSass\u5b66\u7fd2\u30ea\u30bd\u30fc\u30b9<\/a>      <\/li>      <li class=\"last\">        <a href=\"#i-25\">\u95a2\u9023\u3059\u308b\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u6280\u8853\u3068\u306e\u7d44\u307f\u5408\u308f\u305b<\/a>      <\/li>    <\/ul>  <\/li><\/ul>\n      <a href=\"#\" class=\"sgb-toc-button js-toc-button\" rel=\"nofollow\" data-open-dialog=\"true\"><i class=\"fa fa-list\"><\/i><span class=\"sgb-toc-button__text\">\u76ee\u6b21\u3078<\/span><\/a>\n    <\/div><\/div><h2 class=\"wp-block-heading\" id=\"i-0\">Sass\u3068\u306f\uff1aRails\u3067\u306eCSS\u7ba1\u7406\u3092\u5909\u9769\u3059\u308b\u30d7\u30ea\u30d7\u30ed\u30bb\u30c3\u30b5\u30fc<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-1\">\u5f93\u6765\u306eCSS\u304c\u62b1\u3048\u308b3\u3064\u306e\u8ab2\u984c<\/h3>\n\n\n\n<p>Web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u898f\u6a21\u304c\u62e1\u5927\u3059\u308b\u306b\u3064\u308c\u3066\u3001\u5f93\u6765\u306eCSS\u306b\u3088\u308b\u30b9\u30bf\u30a4\u30eb\u7ba1\u7406\u306f\u69d8\u3005\u306a\u8ab2\u984c\u306b\u76f4\u9762\u3057\u307e\u3059\u3002Rails\u958b\u767a\u306b\u304a\u3044\u3066\u3082\u3001\u4ee5\u4e0b\u306e3\u3064\u306e\u554f\u984c\u304c\u7279\u306b\u9855\u8457\u3067\u3059\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30b3\u30fc\u30c9\u306e\u91cd\u8907\u3068\u518d\u5229\u7528\u6027\u306e\u4f4e\u3055<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u540c\u3058\u30ab\u30e9\u30fc\u30b3\u30fc\u30c9\u3084\u30d5\u30a9\u30f3\u30c8\u30b5\u30a4\u30ba\u3092\u8907\u6570\u7b87\u6240\u3067\u5b9a\u7fa9<\/li>\n\n\n\n<li>\u30e1\u30c7\u30a3\u30a2\u30af\u30a8\u30ea\u306e\u7e70\u308a\u8fd4\u3057\u8a18\u8ff0<\/li>\n\n\n\n<li>\u5171\u901a\u306e\u30b9\u30bf\u30a4\u30eb\u30bb\u30c3\u30c8\u3092\u4f55\u5ea6\u3082\u8a18\u8ff0<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u4fdd\u5b88\u6027\u3068\u30b9\u30b1\u30fc\u30e9\u30d3\u30ea\u30c6\u30a3\u306e\u554f\u984c<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30bb\u30ec\u30af\u30bf\u306e\u6df1\u3044\u968e\u5c64\u5316\u306b\u3088\u308b\u53ef\u8aad\u6027\u306e\u4f4e\u4e0b<\/li>\n\n\n\n<li>\u30b9\u30bf\u30a4\u30eb\u306e\u4f9d\u5b58\u95a2\u4fc2\u304c\u4e0d\u660e\u78ba<\/li>\n\n\n\n<li>\u5909\u66f4\u306e\u5f71\u97ff\u7bc4\u56f2\u304c\u628a\u63e1\u3057\u3065\u3089\u3044<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u958b\u767a\u52b9\u7387\u306e\u4f4e\u4e0b<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30b9\u30bf\u30a4\u30eb\u306e\u4e00\u62ec\u5909\u66f4\u304c\u56f0\u96e3<\/li>\n\n\n\n<li>\u547d\u540d\u898f\u5247\u306e\u7d71\u4e00\u304c\u96e3\u3057\u3044<\/li>\n\n\n\n<li>\u30b3\u30fc\u30c9\u306e\u69cb\u9020\u5316\u304c\u9650\u5b9a\u7684<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-2\">Sass\u304c\u63d0\u4f9b\u3059\u308b\u554f\u984c\u89e3\u6c7a\u30a2\u30d7\u30ed\u30fc\u30c1<\/h3>\n\n\n\n<p>Sass\uff08Syntactically Awesome Style Sheets\uff09\u306f\u3001\u3053\u308c\u3089\u306e\u8ab2\u984c\u306b\u5bfe\u3059\u308b\u5305\u62ec\u7684\u306a\u30bd\u30ea\u30e5\u30fc\u30b7\u30e7\u30f3\u3092\u63d0\u4f9b\u3057\u307e\u3059\uff1a<\/p>\n\n\n\n<p><strong>1. \u5909\u6570\u3068\u30ab\u30b9\u30bf\u30e0\u95a2\u6570\u306b\u3088\u308b\u5024\u306e\u7ba1\u7406<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u5168\u4f53\u3067\u4f7f\u7528\u3059\u308b\u5909\u6570\u306e\u5b9a\u7fa9\n$primary-color: #3498db;\n$secondary-color: #2ecc71;\n$base-font-size: 16px;\n\n\/\/ \u95a2\u6570\u3092\u4f7f\u7528\u3057\u305f\u5024\u306e\u8a08\u7b97\n@function calculate-rem($size) {\n  @return ($size \/ $base-font-size) * 1rem;\n}<\/pre>\n\n\n\n<p><strong>2. \u30cd\u30b9\u30c8\u6a5f\u80fd\u306b\u3088\u308b\u76f4\u611f\u7684\u306a\u69cb\u9020\u5316<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.article {\n  padding: 20px;\n\n  \/\/ \u968e\u5c64\u69cb\u9020\u304c\u8996\u899a\u7684\u306b\u7406\u89e3\u3057\u3084\u3059\u3044\n  h1 {\n    font-size: calculate-rem(24px);\n    color: $primary-color;\n\n    &amp;:hover {\n      color: darken($primary-color, 10%);\n    }\n  }\n}<\/pre>\n\n\n\n<p><strong>3. Mixin\u306b\u3088\u308b\u30b3\u30fc\u30c9\u518d\u5229\u7528<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u3088\u304f\u4f7f\u7528\u3059\u308b\u30b9\u30bf\u30a4\u30eb\u30bb\u30c3\u30c8\u3092\u5b9a\u7fa9\n@mixin flex-center {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n\/\/ \u4f7f\u7528\u4f8b\n.container {\n  @include flex-center;\n  background: $secondary-color;\n}<\/pre>\n\n\n\n<p><strong>Sass\u304c\u5b9f\u73fe\u3059\u308b\u4fa1\u5024<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u958b\u767a\u52b9\u7387\u306e\u5411\u4e0a<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30b3\u30fc\u30c9\u306e\u91cd\u8907\u3092\u6700\u5c0f\u9650\u306b\u6291\u5236<\/li>\n\n\n\n<li>\u5909\u66f4\u306e\u4e00\u62ec\u9069\u7528\u304c\u5bb9\u6613<\/li>\n\n\n\n<li>\u76f4\u611f\u7684\u306a\u8a18\u6cd5\u306b\u3088\u308b\u958b\u767a\u901f\u5ea6\u306e\u5411\u4e0a<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u6027\u306e\u6539\u5584<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u5909\u6570\u306b\u3088\u308b\u5024\u306e\u4e00\u5143\u7ba1\u7406<\/li>\n\n\n\n<li>\u30e2\u30b8\u30e5\u30fc\u30eb\u5316\u3055\u308c\u305f\u30b3\u30fc\u30c9\u69cb\u9020<\/li>\n\n\n\n<li>\u660e\u78ba\u306a\u4f9d\u5b58\u95a2\u4fc2\u306e\u628a\u63e1<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30c1\u30fc\u30e0\u958b\u767a\u306e\u4fc3\u9032<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u7d71\u4e00\u3055\u308c\u305f\u547d\u540d\u898f\u5247\u306e\u9069\u7528<\/li>\n\n\n\n<li>\u30b3\u30fc\u30c9\u306e\u518d\u5229\u7528\u6027\u5411\u4e0a<\/li>\n\n\n\n<li>\u30c9\u30ad\u30e5\u30e1\u30f3\u30c6\u30fc\u30b7\u30e7\u30f3\u306e\u5bb9\u6613\u3055<\/li>\n<\/ul>\n\n\n\n<p>Rails\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u304a\u3044\u3066Sass\u3092\u5c0e\u5165\u3059\u308b\u3053\u3068\u3067\u3001\u3053\u308c\u3089\u306e\u5229\u70b9\u3092\u6700\u5927\u9650\u306b\u6d3b\u7528\u3057\u3001\u52b9\u7387\u7684\u306a\u30b9\u30bf\u30a4\u30eb\u7ba1\u7406\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u5177\u4f53\u7684\u306a\u5c0e\u5165\u624b\u9806\u306b\u3064\u3044\u3066\u89e3\u8aac\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-3\">Rails\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u59cb\u3081\u308bSass\u5c0e\u5165\u624b\u9806<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-4\">Asset Pipeline\u3067\u306e\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u65b9\u6cd5<\/h3>\n\n\n\n<p>Rails 6.0\u4ee5\u524d\u306e\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3084\u3001Asset Pipeline\u3092\u4f7f\u7528\u3057\u3066\u3044\u308b\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306f\u3001\u4ee5\u4e0b\u306e\u624b\u9806\u3067Sass\u3092\u5c0e\u5165\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p><strong>1. Gemfile\u306e\u8a2d\u5b9a<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># Gemfile\ngem 'sass-rails', '~&gt; 6.0'<\/pre>\n\n\n\n<p>\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3092\u5b9f\u884c\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">bundle install<\/pre>\n\n\n\n<p><strong>2. \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u8a2d\u5b9a\u306e\u78ba\u8a8d<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># config\/application.rb\nmodule YourApp\n  class Application &lt; Rails::Application\n    # Sass\u306e\u30b3\u30f3\u30d1\u30a4\u30eb\u306b\u95a2\u3059\u308b\u8a2d\u5b9a\n    config.assets.enabled = true\n    config.sass.preferred_syntax = :scss\n  end\nend<\/pre>\n\n\n\n<p><strong>3. \u30d5\u30a1\u30a4\u30eb\u69cb\u9020\u306e\u8a2d\u5b9a<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">app\/\n\u2514\u2500\u2500 assets\/\n    \u2514\u2500\u2500 stylesheets\/\n        \u251c\u2500\u2500 application.scss    # \u30e1\u30a4\u30f3\u306eSass\u30d5\u30a1\u30a4\u30eb\n        \u251c\u2500\u2500 _variables.scss     # \u5909\u6570\u5b9a\u7fa9\n        \u251c\u2500\u2500 _mixins.scss       # Mixin\u5b9a\u7fa9\n        \u2514\u2500\u2500 components\/         # \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5225\u306e\u30b9\u30bf\u30a4\u30eb<\/pre>\n\n\n\n<p><strong>4. \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u30d5\u30a1\u30a4\u30eb\u306e\u8a2d\u5b9a<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ app\/assets\/stylesheets\/application.scss\n\n\/\/ \u5909\u6570\u3068Mixin\u306e\u30a4\u30f3\u30dd\u30fc\u30c8\n@import \"variables\";\n@import \"mixins\";\n\n\/\/ \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30a4\u30f3\u30dd\u30fc\u30c8\n@import \"components\/*\";<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-5\">Webpacker\u3092\u4f7f\u7528\u3059\u308b\u5834\u5408\u306e\u8a2d\u5b9a\u65b9\u6cd5<\/h3>\n\n\n\n<p>Rails 6.0\u4ee5\u964d\u3084Webpacker\u3092\u4f7f\u7528\u3059\u308b\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306f\u3001\u4ee5\u4e0b\u306e\u624b\u9806\u3067\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<p><strong>1. \u5fc5\u8981\u306a\u30d1\u30c3\u30b1\u30fc\u30b8\u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">yarn add sass sass-loader<\/pre>\n\n\n\n<p><strong>2. Webpacker\u8a2d\u5b9a\u306e\u66f4\u65b0<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ config\/webpack\/environment.js\nconst { environment } = require('@rails\/webpacker')\n\n\/\/ Sass\u30ed\u30fc\u30c0\u30fc\u306e\u8a2d\u5b9a\nenvironment.loaders.append('sass', {\n  test: \/\\.(scss|sass)$\/i,\n  use: [\n    'style-loader',\n    'css-loader',\n    'sass-loader'\n  ]\n})\n\nmodule.exports = environment<\/pre>\n\n\n\n<p><strong>3. \u30a8\u30f3\u30c8\u30ea\u30fc\u30dd\u30a4\u30f3\u30c8\u306e\u8a2d\u5b9a<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ app\/javascript\/packs\/application.js\nimport '..\/stylesheets\/application.scss'<\/pre>\n\n\n\n<p><strong>4. \u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u306e\u69cb\u6210<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">app\/\n\u2514\u2500\u2500 javascript\/\n    \u2514\u2500\u2500 stylesheets\/\n        \u251c\u2500\u2500 application.scss\n        \u251c\u2500\u2500 _variables.scss\n        \u251c\u2500\u2500 _mixins.scss\n        \u2514\u2500\u2500 components\/<\/pre>\n\n\n\n<p><strong>\u78ba\u8a8d\u3068\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30b3\u30f3\u30d1\u30a4\u30eb\u306e\u78ba\u8a8d<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># Asset Pipeline\u4f7f\u7528\u6642\nrails assets:precompile\n\n# Webpacker\u4f7f\u7528\u6642\nbin\/webpack<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>\u958b\u767a\u74b0\u5883\u3067\u306e\u52d5\u4f5c\u78ba\u8a8d<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># Asset Pipeline\u306e\u30c7\u30d0\u30c3\u30b0\u30e2\u30fc\u30c9\nrails s -e development\n\n# Webpacker\u306e\u958b\u767a\u30b5\u30fc\u30d0\u30fc\u8d77\u52d5\nbin\/webpack-dev-server<\/pre>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><strong>\u4e00\u822c\u7684\u306a\u30a8\u30e9\u30fc\u5bfe\u51e6<\/strong><\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><code>File to import not found or unreadable<\/code>: \u30d1\u30b9\u304c\u6b63\u3057\u3044\u304b\u78ba\u8a8d<\/li>\n\n\n\n<li><code>Sass::SyntaxError<\/code>: SCSS\u306e\u6587\u6cd5\u30a8\u30e9\u30fc\u3092\u78ba\u8a8d<\/li>\n\n\n\n<li><code>Webpacker::Manifest::MissingEntryError<\/code>: \u30b3\u30f3\u30d1\u30a4\u30eb\u5b9f\u884c\u3092\u78ba\u8a8d<\/li>\n<\/ul>\n\n\n\n<p><strong>\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7\u5b8c\u4e86\u5f8c\u306e\u78ba\u8a8d\u9805\u76ee<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>[ ] \u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u304c\u6b63\u3057\u304f\u30b3\u30f3\u30d1\u30a4\u30eb\u3055\u308c\u3066\u3044\u308b<\/li>\n\n\n\n<li>[ ] \u958b\u767a\u74b0\u5883\u3067\u30db\u30c3\u30c8\u30ea\u30ed\u30fc\u30c9\u304c\u6a5f\u80fd\u3057\u3066\u3044\u308b<\/li>\n\n\n\n<li>[ ] SCSS\u30d5\u30a1\u30a4\u30eb\u306e\u5909\u66f4\u304c\u53cd\u6620\u3055\u308c\u308b<\/li>\n\n\n\n<li>[ ] \u30d7\u30ea\u30b3\u30f3\u30d1\u30a4\u30eb\u304c\u6b63\u5e38\u306b\u5b8c\u4e86\u3059\u308b<\/li>\n\n\n\n<li>[ ] \u672c\u756a\u74b0\u5883\u7528\u306e\u30a2\u30bb\u30c3\u30c8\u304c\u751f\u6210\u3055\u308c\u308b<\/li>\n<\/ul>\n\n\n\n<p>\u3053\u308c\u3067Rails\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067Sass\u3092\u4f7f\u7528\u3059\u308b\u6e96\u5099\u304c\u6574\u3044\u307e\u3057\u305f\u3002\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u5b9f\u969b\u306eSass\u6d3b\u7528\u30c6\u30af\u30cb\u30c3\u30af\u306b\u3064\u3044\u3066\u8a73\u3057\u304f\u89e3\u8aac\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-6\">CSS\u7ba1\u7406\u3092\u6539\u5584\u3059\u308b7\u3064\u306eSass\u30c6\u30af\u30cb\u30c3\u30af<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-7\">\u5909\u6570\u5b9a\u7fa9\u3067\u30d6\u30e9\u30f3\u30c9\u30ab\u30e9\u30fc\u3092\u7d71\u4e00\u7ba1\u7406<\/h3>\n\n\n\n<p>Sass\u306e\u5909\u6570\u6a5f\u80fd\u3092\u6d3b\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u5168\u4f53\u3067\u4e00\u8cab\u6027\u306e\u3042\u308b\u8272\u4f7f\u3044\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ _variables.scss\n\n\/\/ \u30ab\u30e9\u30fc\u30d1\u30ec\u30c3\u30c8\n$colors: (\n  'primary': (\n    'base': #3498db,\n    'light': #5faee3,\n    'dark': #2980b9\n  ),\n  'secondary': (\n    'base': #2ecc71,\n    'light': #54d98c,\n    'dark': #27ae60\n  ),\n  'gray': (\n    'lighter': #f8f9fa,\n    'light': #e9ecef,\n    'base': #dee2e6,\n    'dark': #ced4da,\n    'darker': #adb5bd\n  )\n);\n\n\/\/ \u30a2\u30af\u30bb\u30b9\u7528\u95a2\u6570\n@function color($key, $variant: 'base') {\n  @return map-get(map-get($colors, $key), $variant);\n}\n\n\/\/ \u4f7f\u7528\u4f8b\n.button {\n  background-color: color('primary');\n  &amp;:hover {\n    background-color: color('primary', 'dark');\n  }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-8\">\u30cd\u30b9\u30c8\u306b\u3088\u308b\u30bb\u30ec\u30af\u30bf\u306e\u8996\u8a8d\u6027\u5411\u4e0a<\/h3>\n\n\n\n<p>\u30cd\u30b9\u30c8\u6a5f\u80fd\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001HTML\u306e\u69cb\u9020\u306b\u8fd1\u3044\u76f4\u611f\u7684\u306a\u30b9\u30bf\u30a4\u30eb\u5b9a\u7fa9\u304c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ components\/_card.scss\n.card {\n  background: white;\n  border-radius: 8px;\n  padding: 20px;\n\n  \/\/ \u30d8\u30c3\u30c0\u30fc\u90e8\u5206\u306e\u30b9\u30bf\u30a4\u30eb\n  &amp;__header {\n    border-bottom: 1px solid color('gray', 'light');\n    margin-bottom: 15px;\n\n    h2 {\n      font-size: 1.5rem;\n      color: color('primary', 'dark');\n    }\n  }\n\n  \/\/ \u30b3\u30f3\u30c6\u30f3\u30c4\u90e8\u5206\u306e\u30b9\u30bf\u30a4\u30eb\n  &amp;__content {\n    line-height: 1.6;\n\n    p {\n      margin-bottom: 1rem;\n    }\n  }\n\n  \/\/ \u72b6\u614b\u306b\u3088\u308b\u5909\u5316\n  &amp;--featured {\n    border: 2px solid color('primary');\n  }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-9\">mixin\u3067\u30b3\u30fc\u30c9\u306e\u518d\u5229\u7528\u6027\u3092\u6700\u5927\u5316<\/h3>\n\n\n\n<p>\u3088\u304f\u4f7f\u7528\u3059\u308b\u30b9\u30bf\u30a4\u30eb\u30d1\u30bf\u30fc\u30f3\u3092mixin\u3068\u3057\u3066\u5b9a\u7fa9\u3059\u308b\u3053\u3068\u3067\u3001\u30b3\u30fc\u30c9\u306e\u91cd\u8907\u3092\u9632\u304e\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ _mixins.scss\n\n\/\/ \u30d5\u30ec\u30c3\u30af\u30b9\u30dc\u30c3\u30af\u30b9\u306e\u30bb\u30f3\u30bf\u30ea\u30f3\u30b0\n@mixin flex-center {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n\/\/ \u30ec\u30b9\u30dd\u30f3\u30b7\u30d6\u306a\u30e1\u30c7\u30a3\u30a2\u30af\u30a8\u30ea\n@mixin respond-to($breakpoint) {\n  @if $breakpoint == 'small' {\n    @media (max-width: 576px) { @content; }\n  } @else if $breakpoint == 'medium' {\n    @media (max-width: 768px) { @content; }\n  } @else if $breakpoint == 'large' {\n    @media (max-width: 992px) { @content; }\n  }\n}\n\n\/\/ \u30dc\u30bf\u30f3\u306e\u57fa\u672c\u30b9\u30bf\u30a4\u30eb\n@mixin button-base($bg-color: color('primary')) {\n  padding: 0.5rem 1rem;\n  border-radius: 4px;\n  background-color: $bg-color;\n  color: white;\n  border: none;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n\n  &amp;:hover {\n    background-color: darken($bg-color, 10%);\n  }\n}\n\n\/\/ \u4f7f\u7528\u4f8b\n.container {\n  @include flex-center;\n\n  @include respond-to('small') {\n    flex-direction: column;\n  }\n}\n\n.button {\n  @include button-base;\n\n  &amp;--secondary {\n    @include button-base(color('secondary'));\n  }\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-10\">\u30d1\u30fc\u30b7\u30e3\u30eb\u306b\u3088\u308b\u30e2\u30b8\u30e5\u30fc\u30eb\u5316\u6226\u7565<\/h3>\n\n\n\n<p>\u30b3\u30fc\u30c9\u3092\u6a5f\u80fd\u3054\u3068\u306b\u30d1\u30fc\u30b7\u30e3\u30eb\u30d5\u30a1\u30a4\u30eb\u306b\u5206\u5272\u3057\u3001\u52b9\u7387\u7684\u306a\u7ba1\u7406\u3092\u5b9f\u73fe\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u63a8\u5968\u3055\u308c\u308b\u30d1\u30fc\u30b7\u30e3\u30eb\u306e\u69cb\u6210\n\/\/ _base.scss - \u57fa\u672c\u30b9\u30bf\u30a4\u30eb\n\/\/ _variables.scss - \u5909\u6570\u5b9a\u7fa9\n\/\/ _mixins.scss - \u30df\u30c3\u30af\u30b9\u30a4\u30f3\n\/\/ _functions.scss - \u95a2\u6570\n\/\/ _reset.scss - \u30ea\u30bb\u30c3\u30c8CSS\n\/\/ components\/_buttons.scss - \u30dc\u30bf\u30f3\n\/\/ components\/_forms.scss - \u30d5\u30a9\u30fc\u30e0\n\/\/ components\/_cards.scss - \u30ab\u30fc\u30c9\n\n\/\/ application.scss\n@import 'variables';\n@import 'functions';\n@import 'mixins';\n@import 'reset';\n@import 'base';\n\n\/\/ \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u30a4\u30f3\u30dd\u30fc\u30c8\n@import 'components\/buttons';\n@import 'components\/forms';\n@import 'components\/cards';<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-11\">\u95a2\u6570\u3092\u6d3b\u7528\u3057\u305f\u30c0\u30a4\u30ca\u30df\u30c3\u30af\u306a\u5024\u306e\u8a08\u7b97<\/h3>\n\n\n\n<p>Sass\u95a2\u6570\u3092\u4f7f\u7528\u3057\u3066\u3001\u52d5\u7684\u306a\u5024\u306e\u8a08\u7b97\u3084\u5909\u63db\u3092\u884c\u3044\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ _functions.scss\n\n\/\/ px\u304b\u3089rem\u3078\u306e\u5909\u63db\n@function rem($pixels) {\n  @return ($pixels \/ 16px) * 1rem;\n}\n\n\/\/ \u30b3\u30f3\u30c8\u30e9\u30b9\u30c8\u6bd4\u306b\u57fa\u3065\u304f\u30c6\u30ad\u30b9\u30c8\u30ab\u30e9\u30fc\u306e\u9078\u629e\n@function get-text-color($background) {\n  @if (lightness($background) &gt; 60%) {\n    @return #333333;\n  } @else {\n    @return #ffffff;\n  }\n}\n\n\/\/ \u30ab\u30e9\u30fc\u306e\u900f\u660e\u5ea6\u8abf\u6574\n@function alpha-color($color, $opacity) {\n  @return rgba($color, $opacity);\n}\n\n\/\/ \u4f7f\u7528\u4f8b\n.element {\n  font-size: rem(20px);\n  background-color: color('primary');\n  color: get-text-color(color('primary'));\n  box-shadow: 0 2px 4px alpha-color(#000, 0.1);\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-12\">\u30a8\u30af\u30b9\u30c6\u30f3\u30c9\u306b\u3088\u308b\u30b9\u30bf\u30a4\u30eb\u306e\u7d99\u627f\u8a2d\u8a08<\/h3>\n\n\n\n<p>\u5171\u901a\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u30d7\u30ec\u30fc\u30b9\u30db\u30eb\u30c0\u30fc\u30bb\u30ec\u30af\u30bf\u3068\u3057\u3066\u5b9a\u7fa9\u3057\u3001\u5fc5\u8981\u306a\u5834\u6240\u3067\u7d99\u627f\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ _placeholders.scss\n%button-base {\n  display: inline-block;\n  padding: 0.5em 1em;\n  border-radius: 4px;\n  text-decoration: none;\n  text-align: center;\n  cursor: pointer;\n}\n\n%card-shadow {\n  box-shadow: 0 2px 4px alpha-color(#000, 0.1);\n  transition: box-shadow 0.3s ease;\n\n  &amp;:hover {\n    box-shadow: 0 4px 8px alpha-color(#000, 0.2);\n  }\n}\n\n\/\/ \u4f7f\u7528\u4f8b\n.button {\n  @extend %button-base;\n  background-color: color('primary');\n  color: white;\n}\n\n.card {\n  @extend %card-shadow;\n  padding: 20px;\n  background: white;\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-13\">\u30ab\u30b9\u30bf\u30e0\u95a2\u6570\u3067\u30e6\u30fc\u30c6\u30a3\u30ea\u30c6\u30a3\u3092\u62e1\u5f35<\/h3>\n\n\n\n<p>\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u56fa\u6709\u306e\u30cb\u30fc\u30ba\u306b\u5408\u308f\u305b\u305f\u30ab\u30b9\u30bf\u30e0\u95a2\u6570\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ _utilities.scss\n\n\/\/ \u30b0\u30ea\u30c3\u30c9\u30b7\u30b9\u30c6\u30e0\u306e\u8a08\u7b97\n@function calculate-width($columns, $total-columns: 12) {\n  @return percentage($columns \/ $total-columns);\n}\n\n\/\/ z-index\u306e\u7ba1\u7406\n$z-layers: (\n  'modal': 5000,\n  'overlay': 4000,\n  'dropdown': 3000,\n  'header': 2000,\n  'footer': 1000\n);\n\n@function z($layer) {\n  @return map-get($z-layers, $layer);\n}\n\n\/\/ \u30b9\u30da\u30fc\u30b7\u30f3\u30b0\u30b9\u30b1\u30fc\u30eb\u306e\u8a08\u7b97\n@function spacing($multiplier) {\n  $base-spacing: 8px;\n  @return $base-spacing * $multiplier;\n}\n\n\/\/ \u4f7f\u7528\u4f8b\n.grid-column {\n  width: calculate-width(3);\n  margin-bottom: spacing(2);\n}\n\n.modal {\n  z-index: z('modal');\n  padding: spacing(3);\n}<\/pre>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u30c6\u30af\u30cb\u30c3\u30af\u3092\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001\u4fdd\u5b88\u6027\u304c\u9ad8\u304f\u3001\u52b9\u7387\u7684\u306aCSS\u7ba1\u7406\u304c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u3053\u308c\u3089\u306e\u30c6\u30af\u30cb\u30c3\u30af\u3092\u6d3b\u7528\u3059\u308b\u969b\u306e\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u306b\u3064\u3044\u3066\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-14\">Sass\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9\u306b\u3088\u308b\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-15\">\u30b3\u30f3\u30d1\u30a4\u30eb\u5f8c\u306e\u30d5\u30a1\u30a4\u30eb\u30b5\u30a4\u30ba\u3092\u524a\u6e1b\u3059\u308b\u30c6\u30af\u30cb\u30c3\u30af<\/h3>\n\n\n\n<p><strong>1. \u30cd\u30b9\u30c8\u306e\u6df1\u3055\u3092\u5236\u9650<\/strong><\/p>\n\n\n\n<p>\u904e\u5ea6\u306a\u30cd\u30b9\u30c8\u306f\u3001\u30b3\u30f3\u30d1\u30a4\u30eb\u5f8c\u306eCSS\u30d5\u30a1\u30a4\u30eb\u30b5\u30a4\u30ba\u3092\u4e0d\u5fc5\u8981\u306b\u5897\u5927\u3055\u305b\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u60aa\u3044\u4f8b\n.container {\n  .section {\n    .article {\n      .title {\n        \/\/ \u6df1\u3059\u304e\u308b\u30cd\u30b9\u30c8\n        h1 {\n          font-size: 2rem;\n        }\n      }\n    }\n  }\n}\n\n\/\/ \u826f\u3044\u4f8b\n.article-title {\n  font-size: 2rem;\n}<\/pre>\n\n\n\n<p><strong>2. Mixin\u306e\u6700\u9069\u5316<\/strong><\/p>\n\n\n\n<p>\u5f15\u6570\u306e\u306a\u3044Mixin\u306f<code>@extend<\/code>\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u30b3\u30fc\u30c9\u91cf\u3092\u524a\u6e1b\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u975e\u52b9\u7387\u306a\u4f8b\n@mixin card-base {\n  border-radius: 4px;\n  padding: 1rem;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.card-1 { @include card-base; }\n.card-2 { @include card-base; }\n.card-3 { @include card-base; }\n\n\/\/ \u52b9\u7387\u7684\u306a\u4f8b\n%card-base {\n  border-radius: 4px;\n  padding: 1rem;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.card-1 { @extend %card-base; }\n.card-2 { @extend %card-base; }\n.card-3 { @extend %card-base; }<\/pre>\n\n\n\n<p><strong>3. \u672a\u4f7f\u7528\u30b3\u30fc\u30c9\u306e\u524a\u9664<\/strong><\/p>\n\n\n\n<p>PurgeCSS\u7b49\u306e\u30c4\u30fc\u30eb\u3092\u4f7f\u7528\u3057\u3066\u3001\u672a\u4f7f\u7528\u306e\u30b9\u30bf\u30a4\u30eb\u3092\u81ea\u52d5\u7684\u306b\u524a\u9664\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ postcss.config.js\nmodule.exports = {\n  plugins: [\n    require('@fullhuman\/postcss-purgecss')({\n      content: [\n        '.\/app\/**\/*.html.erb',\n        '.\/app\/**\/*.rb',\n        '.\/app\/javascript\/**\/*.js'\n      ],\n      defaultExtractor: content =&gt; content.match(\/[\\w-\/:]+(?&lt;!:)\/g) || []\n    })\n  ]\n}<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-16\">\u30d6\u30e9\u30a6\u30b6\u30ad\u30e3\u30c3\u30b7\u30e5\u3092\u8003\u616e\u3057\u305f\u30a2\u30bb\u30c3\u30c8\u7ba1\u7406<\/h3>\n\n\n\n<p><strong>1. \u30a2\u30bb\u30c3\u30c8\u306e\u30d5\u30a3\u30f3\u30ac\u30fc\u30d7\u30ea\u30f3\u30c8<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># config\/environments\/production.rb\nRails.application.configure do\n  # \u30a2\u30bb\u30c3\u30c8\u306e\u30d5\u30a3\u30f3\u30ac\u30fc\u30d7\u30ea\u30f3\u30c8\u3092\u6709\u52b9\u5316\n  config.assets.digest = true\n\n  # \u30d0\u30fc\u30b8\u30e7\u30f3\u7ba1\u7406\n  config.assets.version = '1.0'\nend<\/pre>\n\n\n\n<p><strong>2. \u6761\u4ef6\u4ed8\u304d\u30ea\u30af\u30a8\u30b9\u30c8\u5bfe\u5fdc<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># app\/controllers\/application_controller.rb\nclass ApplicationController &lt; ActionController::Base\n  # ETtag\u306e\u8a2d\u5b9a\n  etag { current_user.try(:id) }\n\n  # Last-Modified\u30d8\u30c3\u30c0\u30fc\u306e\u8a2d\u5b9a\n  before_action :set_last_modified\n\n  private\n\n  def set_last_modified\n    headers['Last-Modified'] = Time.current.httpdate\n  end\nend<\/pre>\n\n\n\n<p><strong>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>\u30e1\u30c7\u30a3\u30a2\u30af\u30a8\u30ea\u306e\u6700\u9069\u5316<\/strong><\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u975e\u52b9\u7387\u306a\u4f8b\uff08\u91cd\u8907\u304c\u591a\u3044\uff09\n.element {\n  width: 100%;\n  @media (min-width: 768px) { width: 50%; }\n}\n.other-element {\n  padding: 1rem;\n  @media (min-width: 768px) { padding: 2rem; }\n}\n\n\/\/ \u52b9\u7387\u7684\u306a\u4f8b\uff08\u30e1\u30c7\u30a3\u30a2\u30af\u30a8\u30ea\u3092\u307e\u3068\u3081\u308b\uff09\n@media (min-width: 768px) {\n  .element { width: 50%; }\n  .other-element { padding: 2rem; }\n}<\/pre>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><strong>Critical CSS\u306e\u62bd\u51fa<\/strong><br>\u91cd\u8981\u306a\u30b9\u30bf\u30a4\u30eb\u3092\u7279\u5b9a\u3057\u3001\u30a4\u30f3\u30e9\u30a4\u30f3\u3067\u8aad\u307f\u8fbc\u3080\u3053\u3068\u3067\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u3092\u5411\u4e0a\u3055\u305b\u307e\u3059\u3002<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;%# app\/views\/layouts\/application.html.erb %&gt;\n&lt;style&gt;\n  &lt;%= Rails.application.assets['critical.css'].to_s.html_safe %&gt;\n&lt;\/style&gt;\n\n&lt;%# \u975e\u30af\u30ea\u30c6\u30a3\u30ab\u30eb\u306aCSS\u306f\u975e\u540c\u671f\u8aad\u307f\u8fbc\u307f %&gt;\n&lt;link rel=\"preload\" href=\"&lt;%= asset_path('application.css') %&gt;\" as=\"style\" onload=\"this.onload=null;this.rel='stylesheet'\"&gt;<\/pre>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u6700\u9069\u5316\u30c6\u30af\u30cb\u30c3\u30af\u3092\u9069\u5207\u306b\u7d44\u307f\u5408\u308f\u305b\u308b\u3053\u3068\u3067\u3001Sass\u3092\u52b9\u7387\u7684\u306b\u904b\u7528\u3057\u306a\u304c\u3089\u3001\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u306e\u9ad8\u3044Web\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u5b9f\u73fe\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-17\">\u5b9f\u8df5\u7684\u306aSass\u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u69cb\u6210\u3068\u30b3\u30fc\u30c9\u7ba1\u7406<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-18\">7-1\u30d1\u30bf\u30fc\u30f3\u306b\u3088\u308bSass\u30d5\u30a1\u30a4\u30eb\u8a2d\u8a08<\/h3>\n\n\n\n<p>7-1\u30d1\u30bf\u30fc\u30f3\u306f\u3001Sass\u30d5\u30a1\u30a4\u30eb\u30927\u3064\u306e\u30d5\u30a9\u30eb\u30c0\u30681\u3064\u306e\u30e1\u30a4\u30f3\u30d5\u30a1\u30a4\u30eb\u306b\u5206\u985e\u3059\u308b\u3001\u9ad8\u5ea6\u306b\u7d44\u7e54\u5316\u3055\u308c\u305f\u69cb\u9020\u3092\u63d0\u4f9b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">app\/assets\/stylesheets\/\n\u251c\u2500\u2500 abstracts\/             # \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u5168\u4f53\u3067\u4f7f\u7528\u3059\u308b\u30d8\u30eb\u30d1\u30fc\n\u2502   \u251c\u2500\u2500 _variables.scss    # \u5909\u6570\u5b9a\u7fa9\n\u2502   \u251c\u2500\u2500 _functions.scss    # Sass\u95a2\u6570\n\u2502   \u251c\u2500\u2500 _mixins.scss      # Mixin\u30e9\u30a4\u30d6\u30e9\u30ea\n\u2502   \u2514\u2500\u2500 _placeholders.scss # \u30d7\u30ec\u30fc\u30b9\u30db\u30eb\u30c0\u30fc\n\u2502\n\u251c\u2500\u2500 base\/                  # \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306e\u57fa\u790e\u3068\u306a\u308b\u30b9\u30bf\u30a4\u30eb\n\u2502   \u251c\u2500\u2500 _reset.scss       # \u30ea\u30bb\u30c3\u30c8CSS\n\u2502   \u251c\u2500\u2500 _typography.scss  # \u30bf\u30a4\u30dd\u30b0\u30e9\u30d5\u30a3\u898f\u5247\n\u2502   \u2514\u2500\u2500 _animations.scss  # \u30a2\u30cb\u30e1\u30fc\u30b7\u30e7\u30f3\u5b9a\u7fa9\n\u2502\n\u251c\u2500\u2500 components\/            # \u518d\u5229\u7528\u53ef\u80fd\u306a\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\n\u2502   \u251c\u2500\u2500 _buttons.scss     # \u30dc\u30bf\u30f3\u30b9\u30bf\u30a4\u30eb\n\u2502   \u251c\u2500\u2500 _forms.scss       # \u30d5\u30a9\u30fc\u30e0\u8981\u7d20\n\u2502   \u2514\u2500\u2500 _modal.scss       # \u30e2\u30fc\u30c0\u30eb\n\u2502\n\u251c\u2500\u2500 layout\/               # \u30b5\u30a4\u30c8\u306e\u4e3b\u8981\u306a\u30ec\u30a4\u30a2\u30a6\u30c8\n\u2502   \u251c\u2500\u2500 _header.scss     # \u30d8\u30c3\u30c0\u30fc\n\u2502   \u251c\u2500\u2500 _footer.scss     # \u30d5\u30c3\u30bf\u30fc\n\u2502   \u2514\u2500\u2500 _sidebar.scss    # \u30b5\u30a4\u30c9\u30d0\u30fc\n\u2502\n\u251c\u2500\u2500 pages\/               # \u30da\u30fc\u30b8\u56fa\u6709\u306e\u30b9\u30bf\u30a4\u30eb\n\u2502   \u251c\u2500\u2500 _home.scss      # \u30db\u30fc\u30e0\u30da\u30fc\u30b8\n\u2502   \u2514\u2500\u2500 _contact.scss   # \u304a\u554f\u3044\u5408\u308f\u305b\u30da\u30fc\u30b8\n\u2502\n\u251c\u2500\u2500 themes\/              # \u30c6\u30fc\u30de\u95a2\u9023\u306e\u30b9\u30bf\u30a4\u30eb\n\u2502   \u251c\u2500\u2500 _admin.scss     # \u7ba1\u7406\u753b\u9762\u30c6\u30fc\u30de\n\u2502   \u2514\u2500\u2500 _dark.scss      # \u30c0\u30fc\u30af\u30e2\u30fc\u30c9\n\u2502\n\u251c\u2500\u2500 vendors\/            # \u30b5\u30fc\u30c9\u30d1\u30fc\u30c6\u30a3\u306e\u30b9\u30bf\u30a4\u30eb\n\u2502   \u2514\u2500\u2500 _bootstrap.scss # Bootstrap\u4e0a\u66f8\u304d\n\u2502\n\u2514\u2500\u2500 application.scss    # \u30e1\u30a4\u30f3\u306eSass\u30d5\u30a1\u30a4\u30eb<\/pre>\n\n\n\n<p><strong>\u30e1\u30a4\u30f3\u30d5\u30a1\u30a4\u30eb\u306e\u69cb\u6210\u4f8b<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ application.scss\n\n\/\/ \u62bd\u8c61\u7684\u306a\u5b9a\u7fa9\n@import 'abstracts\/variables';\n@import 'abstracts\/functions';\n@import 'abstracts\/mixins';\n@import 'abstracts\/placeholders';\n\n\/\/ \u30d9\u30fc\u30b9\u30b9\u30bf\u30a4\u30eb\n@import 'base\/reset';\n@import 'base\/typography';\n@import 'base\/animations';\n\n\/\/ \u30ec\u30a4\u30a2\u30a6\u30c8\n@import 'layout\/header';\n@import 'layout\/footer';\n@import 'layout\/sidebar';\n\n\/\/ \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\n@import 'components\/buttons';\n@import 'components\/forms';\n@import 'components\/modal';\n\n\/\/ \u30da\u30fc\u30b8\u56fa\u6709\u306e\u30b9\u30bf\u30a4\u30eb\n@import 'pages\/home';\n@import 'pages\/contact';\n\n\/\/ \u30c6\u30fc\u30de\n@import 'themes\/admin';\n@import 'themes\/dark';\n\n\/\/ \u30d9\u30f3\u30c0\u30fc\uff08\u6700\u5f8c\u306b\u8aad\u307f\u8fbc\u3093\u3067\u4e0a\u66f8\u304d\u3092\u53ef\u80fd\u306b\uff09\n@import 'vendors\/bootstrap';<\/pre>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-19\">\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u6307\u5411CSS\u306e\u5b9f\u73fe\u65b9\u6cd5<\/h3>\n\n\n\n<p>BEM\u30e1\u30bd\u30c9\u30ed\u30b8\u30fc\u3092\u63a1\u7528\u3057\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u30d9\u30fc\u30b9\u306e\u8a2d\u8a08\u3092\u5b9f\u73fe\u3057\u307e\u3059\uff1a<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ components\/_card.scss\n\n.card {\n  \/\/ \u30d6\u30ed\u30c3\u30af\n  &amp;__header {\n    \/\/ \u30a8\u30ec\u30e1\u30f3\u30c8\n    &amp;-title {\n      font-size: 1.5rem;\n    }\n    &amp;-subtitle {\n      color: $gray-600;\n    }\n  }\n\n  &amp;__body {\n    padding: 1rem;\n  }\n\n  &amp;__footer {\n    border-top: 1px solid $border-color;\n  }\n\n  \/\/ \u30e2\u30c7\u30a3\u30d5\u30a1\u30a4\u30a2\n  &amp;--featured {\n    border: 2px solid $primary;\n  }\n\n  &amp;--compact {\n    .card__body {\n      padding: 0.5rem;\n    }\n  }\n}<\/pre>\n\n\n\n<p><strong>\u547d\u540d\u898f\u5247\u306e\u7d71\u4e00<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\n.component-name {}\n\n\/\/ \u30a8\u30ec\u30e1\u30f3\u30c8\n.component-name__element {}\n\n\/\/ \u30e2\u30c7\u30a3\u30d5\u30a1\u30a4\u30a2\n.component-name--modifier {}\n.component-name__element--modifier {}\n\n\/\/ \u72b6\u614b\u30af\u30e9\u30b9\n.is-active {}\n.has-error {}<\/pre>\n\n\n\n<p>\u3053\u306e\u3088\u3046\u306a\u69cb\u9020\u5316\u3055\u308c\u305f\u30a2\u30d7\u30ed\u30fc\u30c1\u306b\u3088\u308a\uff1a<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30b3\u30fc\u30c9\u306e\u518d\u5229\u7528\u6027\u304c\u5411\u4e0a<\/li>\n\n\n\n<li>\u4fdd\u5b88\u6027\u304c\u9ad8\u307e\u308b<\/li>\n\n\n\n<li>\u30c1\u30fc\u30e0\u958b\u767a\u304c\u52b9\u7387\u5316<\/li>\n\n\n\n<li>\u30b9\u30b1\u30fc\u30e9\u30d3\u30ea\u30c6\u30a3\u304c\u78ba\u4fdd<\/li>\n<\/ol>\n\n\n\n<p>\u6b21\u306e\u30bb\u30af\u30b7\u30e7\u30f3\u3067\u306f\u3001\u3053\u306e\u69cb\u9020\u5316\u3055\u308c\u305f\u30b3\u30fc\u30c9\u30d9\u30fc\u30b9\u3067\u306e\u30c7\u30d0\u30c3\u30b0\u3068\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u306b\u3064\u3044\u3066\u89e3\u8aac\u3057\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-20\">Sass\u30c7\u30d0\u30c3\u30b0\u3068\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-21\">\u4e00\u822c\u7684\u306a\u30b3\u30f3\u30d1\u30a4\u30eb\u30a8\u30e9\u30fc\u306e\u89e3\u6c7a\u65b9\u6cd5<\/h3>\n\n\n\n<p><strong>1. \u69cb\u6587\u30a8\u30e9\u30fc\u306e\u7279\u5b9a\u3068\u4fee\u6b63<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u30a8\u30e9\u30fc\u306e\u4f8b\n.element {\n  color: $primary-color  \/\/ \u30bb\u30df\u30b3\u30ed\u30f3\u306e\u6b20\u843d\n  background: #fff;\n}\n\n\/\/ \u30c7\u30d0\u30c3\u30b0\u7528\u306e@debug\n@debug \"Primary color value: #{$primary-color}\";\n\n\/\/ \u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8:\n\/\/ SyntaxError: Invalid CSS after \"color: $primary-color\": expected \";\", was \"background: #fff\"<\/pre>\n\n\n\n<p>\u3088\u304f\u3042\u308b\u30a8\u30e9\u30fc\u3068\u89e3\u6c7a\u7b56\uff1a<\/p>\n\n\n<div id=\"id-223a0251-0fc3-4852-a871-e624142a0747\">\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><thead><tr><th>\u30a8\u30e9\u30fc\u7a2e\u5225<\/th><th>\u539f\u56e0<\/th><th>\u89e3\u6c7a\u65b9\u6cd5<\/th><\/tr><\/thead><tbody><tr><td>\u5909\u6570\u672a\u5b9a\u7fa9<\/td><td>\u5909\u6570\u304c\u5b9a\u7fa9\u3055\u308c\u308b\u524d\u306b\u4f7f\u7528<\/td><td>import\u9806\u5e8f\u306e\u78ba\u8a8d\u3001\u5909\u6570\u306e\u5b9a\u7fa9\u78ba\u8a8d<\/td><\/tr><tr><td>\u30bb\u30df\u30b3\u30ed\u30f3\u6b20\u843d<\/td><td>\u6587\u672b\u306e\u30bb\u30df\u30b3\u30ed\u30f3\u304c\u629c\u3051\u3066\u3044\u308b<\/td><td>\u5404\u30d7\u30ed\u30d1\u30c6\u30a3\u884c\u672b\u306b\u30bb\u30df\u30b3\u30ed\u30f3\u3092\u8ffd\u52a0<\/td><\/tr><tr><td>\u62ec\u5f27\u306e\u4e0d\u4e00\u81f4<\/td><td>\u9589\u3058\u62ec\u5f27\u306e\u6b20\u843d\u3084\u904e\u5270<\/td><td>\u30cd\u30b9\u30c8\u306e\u30ec\u30d9\u30eb\u3092\u78ba\u8a8d\u3001\u62ec\u5f27\u306e\u5bfe\u5fdc\u3092\u78ba\u8a8d<\/td><\/tr><tr><td>mixin\u306e\u5f15\u6570\u30df\u30b9<\/td><td>\u5fc5\u9808\u5f15\u6570\u306e\u6b20\u843d\u3084\u578b\u306e\u4e0d\u4e00\u81f4<\/td><td>mixin\u306e\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3092\u78ba\u8a8d\u3001\u5f15\u6570\u306e\u578b\u3092\u78ba\u8a8d<\/td><\/tr><\/tbody><\/table><\/figure>\n<\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"i-22\">\u958b\u767a\u30c4\u30fc\u30eb\u3092\u4f7f\u7528\u3057\u305f\u30c7\u30d0\u30c3\u30b0\u30c6\u30af\u30cb\u30c3\u30af<\/h3>\n\n\n\n<p><strong>1. \u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u306e\u6d3b\u7528<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\"># config\/environments\/development.rb\nRails.application.configure do\n  # \u30bd\u30fc\u30b9\u30de\u30c3\u30d7\u3092\u6709\u52b9\u5316\n  config.sass.source_map = true\n\n  # \u958b\u767a\u74b0\u5883\u3067\u306e\u8a73\u7d30\u306a\u30c7\u30d0\u30c3\u30b0\u60c5\u5831\n  config.sass.style = :expanded\nend<\/pre>\n\n\n\n<p><strong>2. Sass\u30d3\u30eb\u30c8\u30a4\u30f3\u95a2\u6570\u306b\u3088\u308b\u30c7\u30d0\u30c3\u30b0<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ \u30c7\u30d0\u30c3\u30b0\u7528\u30df\u30c3\u30af\u30b9\u30a4\u30f3\n@mixin debug-layout {\n  * {\n    outline: 1px solid red;\n  }\n\n  *:hover {\n    outline-color: blue;\n  }\n}\n\n\/\/ \u5909\u6570\u306e\u578b\u30c1\u30a7\u30c3\u30af\n@debug type-of($primary-color);\n@if type-of($primary-color) != 'color' {\n  @warn \"Warning: $primary-color should be a color value!\";\n}\n\n\/\/ \u5024\u306e\u691c\u8a3c\n@debug \"Current breakpoint: #{$breakpoint}\";\n@debug \"Available spacing units: #{map-keys($spacing)}\";<\/pre>\n\n\n\n<p><strong>3. Chrome DevTools\u3067\u306e\u52b9\u7387\u7684\u306a\u30c7\u30d0\u30c3\u30b0<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Elements \u30d1\u30cd\u30eb\u3067\u306e\u30b9\u30bf\u30a4\u30eb\u78ba\u8a8d<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30b3\u30f3\u30d1\u30a4\u30eb\u524d\u306eSass\u30d5\u30a1\u30a4\u30eb\u3078\u306e\u53c2\u7167<\/li>\n\n\n\n<li>\u9069\u7528\u3055\u308c\u3066\u3044\u308b\u30b9\u30bf\u30a4\u30eb\u306e\u512a\u5148\u9806\u4f4d\u78ba\u8a8d<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Sources\u30d1\u30cd\u30eb\u306e\u6d3b\u7528<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30d6\u30ec\u30fc\u30af\u30dd\u30a4\u30f3\u30c8\u306e\u8a2d\u5b9a<\/li>\n\n\n\n<li>Sass\u30bd\u30fc\u30b9\u30b3\u30fc\u30c9\u306e\u76f4\u63a5\u7de8\u96c6<\/li>\n\n\n\n<li>\u5909\u66f4\u306e\u30e9\u30a4\u30d6\u30d7\u30ec\u30d3\u30e5\u30fc<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30b3\u30f3\u30bd\u30fc\u30eb\u3067\u306e\u30b9\u30bf\u30a4\u30eb\u64cd\u4f5c<\/li>\n<\/ol>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ DOM\u8981\u7d20\u306e\u30b9\u30bf\u30a4\u30eb\u78ba\u8a8d\nconsole.log(getComputedStyle(document.querySelector('.element')));\n\n\/\/ \u30b9\u30bf\u30a4\u30eb\u306e\u52d5\u7684\u5909\u66f4\u3068\u30c6\u30b9\u30c8\ndocument.querySelector('.element').style.setProperty('--primary-color', '#ff0000');<\/pre>\n\n\n\n<p><strong>\u30c8\u30e9\u30d6\u30eb\u30b7\u30e5\u30fc\u30c6\u30a3\u30f3\u30b0\u306e\u30d9\u30b9\u30c8\u30d7\u30e9\u30af\u30c6\u30a3\u30b9<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30b7\u30b9\u30c6\u30de\u30c6\u30a3\u30c3\u30af\u306a\u30a2\u30d7\u30ed\u30fc\u30c1<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30a8\u30e9\u30fc\u30e1\u30c3\u30bb\u30fc\u30b8\u306e\u614e\u91cd\u306a\u8aad\u307f\u53d6\u308a<\/li>\n\n\n\n<li>\u554f\u984c\u306e\u5207\u308a\u5206\u3051<\/li>\n\n\n\n<li>\u5909\u66f4\u306e\u6bb5\u968e\u7684\u306a\u9069\u7528<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30b3\u30fc\u30c9\u306e\u6574\u7406<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u9069\u5207\u306a\u30a4\u30f3\u30c7\u30f3\u30c8<\/li>\n\n\n\n<li>\u4e00\u8cab\u3057\u305f\u547d\u540d\u898f\u5247<\/li>\n\n\n\n<li>\u30b3\u30e1\u30f3\u30c8\u306b\u3088\u308b\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u5316<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u30d0\u30fc\u30b8\u30e7\u30f3\u7ba1\u7406\u306e\u6d3b\u7528<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u554f\u984c\u767a\u751f\u524d\u306e\u30b3\u30fc\u30c9\u3068\u306e\u6bd4\u8f03<\/li>\n\n\n\n<li>\u5909\u66f4\u5c65\u6b74\u306e\u8ffd\u8de1<\/li>\n\n\n\n<li>\u5b89\u5168\u306a\u5b9f\u9a13\u7684\u5909\u66f4<\/li>\n<\/ul>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u30c7\u30d0\u30c3\u30b0\u30c6\u30af\u30cb\u30c3\u30af\u3092\u6d3b\u7528\u3059\u308b\u3053\u3068\u3067\u3001Sass\u306e\u958b\u767a\u3092\u3088\u308a\u52b9\u7387\u7684\u306b\u9032\u3081\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"i-23\">\u6b21\u306e\u30b9\u30c6\u30c3\u30d7\uff1a\u3055\u3089\u306a\u308bSass\u30b9\u30ad\u30eb\u5411\u4e0a\u306e\u305f\u3081\u306b<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-24\">\u304a\u3059\u3059\u3081\u306eSass\u5b66\u7fd2\u30ea\u30bd\u30fc\u30b9<\/h3>\n\n\n\n<p><strong>1. \u516c\u5f0f\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u3068\u30ac\u30a4\u30c9<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/sass-lang.com\/guide\">Sass\u516c\u5f0f\u30ac\u30a4\u30c9<\/a><\/li>\n\n\n\n<li>\u57fa\u672c\u6587\u6cd5\u304b\u3089\u9ad8\u5ea6\u306a\u6a5f\u80fd\u307e\u3067<\/li>\n\n\n\n<li>\u30a4\u30f3\u30bf\u30e9\u30af\u30c6\u30a3\u30d6\u306a\u4f8b\u3067\u5b66\u7fd2\u53ef\u80fd<\/li>\n\n\n\n<li>\u5b9a\u671f\u7684\u306b\u66f4\u65b0\u3055\u308c\u308b\u6700\u65b0\u60c5\u5831<\/li>\n<\/ul>\n\n\n\n<p><strong>2. \u30b3\u30df\u30e5\u30cb\u30c6\u30a3\u30ea\u30bd\u30fc\u30b9<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>GitHub\u4e0a\u306eSass\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af<\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/thoughtbot\/bourbon\">Bourbon<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/Compass\/compass\">Compass<\/a><\/li>\n\n\n\n<li>\u5b66\u7fd2\u7528\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u4f8b<\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/HugoGiraudel\/sass-boilerplate\">Sass Boilerplate<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/github.com\/KittyGiraudel\/sass-boilerplate\">7-1 Pattern Examples<\/a><\/li>\n<\/ul>\n\n\n\n<p><strong>3. \u63a8\u5968\u66f8\u7c4d<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u300eSass and Compass for Designers\u300f<\/li>\n\n\n\n<li>\u300eSass in the Real World\u300f<\/li>\n\n\n\n<li>\u300eCSS Secrets\u300f\uff08Sass\u306e\u5b9f\u8df5\u7684\u306a\u6d3b\u7528\u4f8b\u3092\u542b\u3080\uff09<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"i-25\">\u95a2\u9023\u3059\u308b\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u6280\u8853\u3068\u306e\u7d44\u307f\u5408\u308f\u305b<\/h3>\n\n\n\n<p><strong>1. \u30e2\u30c0\u30f3\u306a\u30d3\u30eb\u30c9\u30c4\u30fc\u30eb\u3068\u306e\u7d71\u5408<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: \/\\.scss$\/,\n        use: [\n          'style-loader',\n          'css-loader',\n          'postcss-loader',\n          'sass-loader'\n        ]\n      }\n    ]\n  }\n}<\/pre>\n\n\n\n<p><strong>2. CSS-in-JS\u3068\u306e\u4f75\u7528<\/strong><\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ styled-components with Sass-like syntax\nimport styled from 'styled-components';\n\nconst Button = styled.button`\n  ${({ theme }) =&gt; `\n    background: ${theme.colors.primary};\n    &amp;:hover {\n      background: darken(${theme.colors.primary}, 10%);\n    }\n  `}\n`;<\/pre>\n\n\n\n<p><strong>3. \u6b21\u4e16\u4ee3CSS\u3078\u306e\u6e96\u5099<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>CSS Custom Properties\uff08\u5909\u6570\uff09\u306e\u6d3b\u7528<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">:root {\n  --primary-color: #3498db;\n}\n\n.element {\n  \/\/ Sass\u306e\u5909\u6570\u3068CSS\u5909\u6570\u306e\u4f75\u7528\n  $fallback-color: #2980b9;\n  color: $fallback-color;\n  color: var(--primary-color, $fallback-color);\n}<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li>CSS Modules \u3068\u306e\u7d71\u5408<\/li>\n<\/ul>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">\/\/ Button.module.scss\n.button {\n  @include button-base;\n\n  &amp;.primary {\n    background: $primary-color;\n  }\n}<\/pre>\n\n\n\n<p><strong>\u7d99\u7d9a\u7684\u306a\u5b66\u7fd2\u306e\u305f\u3081\u306e\u30ed\u30fc\u30c9\u30de\u30c3\u30d7<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u57fa\u790e\u306e\u5f37\u5316<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Sass\u306e\u57fa\u672c\u6587\u6cd5\u306e\u5b8c\u5168\u7fd2\u5f97<\/li>\n\n\n\n<li>BEM\u306a\u3069\u306e\u547d\u540d\u898f\u5247\u306e\u7fd2\u5f97<\/li>\n\n\n\n<li>\u30d1\u30d5\u30a9\u30fc\u30de\u30f3\u30b9\u6700\u9069\u5316\u6280\u8853\u306e\u7406\u89e3<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u5fdc\u7528\u30b9\u30ad\u30eb\u306e\u958b\u767a<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u30ab\u30b9\u30bf\u30e0\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u306e\u4f5c\u6210<\/li>\n\n\n\n<li>\u5927\u898f\u6a21\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3067\u306eSass\u7ba1\u7406<\/li>\n\n\n\n<li>\u30a2\u30af\u30bb\u30b7\u30d3\u30ea\u30c6\u30a3\u306b\u914d\u616e\u3057\u305fSass\u8a2d\u8a08<\/li>\n<\/ul>\n\n\n\n<ol class=\"wp-block-list\">\n<li>\u6700\u65b0\u30c8\u30ec\u30f3\u30c9\u306e\u30ad\u30e3\u30c3\u30c1\u30a2\u30c3\u30d7<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li>CSS Grid\/Flexbox\u3068\u306e\u7d44\u307f\u5408\u308f\u305b<\/li>\n\n\n\n<li>CSS Houdini API\u306e\u6d3b\u7528<\/li>\n\n\n\n<li>Web Components\u3068\u306e\u7d71\u5408<\/li>\n<\/ul>\n\n\n\n<p>\u3053\u308c\u3089\u306e\u30ea\u30bd\u30fc\u30b9\u3068\u30c6\u30af\u30cb\u30c3\u30af\u3092\u6d3b\u7528\u3059\u308b\u3053\u3068\u3067\u3001\u3088\u308a\u30e2\u30c0\u30f3\u3067\u4fdd\u5b88\u6027\u306e\u9ad8\u3044\u30d5\u30ed\u30f3\u30c8\u30a8\u30f3\u30c9\u958b\u767a\u304c\u53ef\u80fd\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Warning: Undefined array key &#8220;is_admin&#8221; in \/home\/xs392991\/dexall.co.jp\/public_html\/articles\/wp-content\/themes\/ &#8230; <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":{"0":"post-1568","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-ruby","7":"nothumb"},"_links":{"self":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/1568","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1568"}],"version-history":[{"count":1,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/1568\/revisions"}],"predecessor-version":[{"id":1570,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=\/wp\/v2\/posts\/1568\/revisions\/1570"}],"wp:attachment":[{"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1568"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1568"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dexall.co.jp\/articles\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1568"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}