{"id":577,"date":"2018-09-03T21:25:32","date_gmt":"2018-09-03T12:25:32","guid":{"rendered":"https:\/\/www.dogrow.net\/hp\/?p=577"},"modified":"2018-09-03T21:43:08","modified_gmt":"2018-09-03T12:43:08","slug":"blog57","status":"publish","type":"post","link":"https:\/\/www.dogrow.net\/hp\/blog57\/","title":{"rendered":"(57) \u3010Sass\u5165\u9580#2\u3011sass\u3067css\u3092\u7c21\u6f54\u306b\u66f8\u304f\u3002"},"content":{"rendered":"<h1 class=\"my_h\">1. \u3084\u308a\u305f\u3044\u3053\u3068<\/h1>\n<p>\u524d\u56de\u306e <a href=\"https:\/\/www.dogrow.net\/hp\/blog56\/\">(56) \u3010Sass\u5165\u9580#1\u3011sass\u3067css\u3092\u7c21\u6f54\u306b\u66f8\u304f\u3002<\/a> \u306e\u7d9a\u304d\u3002<\/p>\n<p>Sass\u3092\u4f7f\u3063\u3066 CSS\u30d5\u30a1\u30a4\u30eb\u306e\u8a18\u8ff0\u5185\u5bb9\u3092\u6574\u7406\u6574\u9813\u3057\u305f\u3044\u3002<\/p>\n<h1 class=\"my_h\">3. \u3084\u3063\u3066\u307f\u308b<\/h1>\n<h2 class=\"my_h\">(1) \u5909\u6570\u3092\u4f7f\u3046\u3002<\/h2>\n<p>\u3053\u3093\u306a SCSS\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u305f\u3002<br \/>\n<b>style.scss<\/b><\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n$def-width: 300px;\r\ndiv#box{\r\n  width: $def-width;\r\n  height: 100px;\r\n}\r\n<\/pre>\n<p>\u3053\u306e\u30d5\u30a1\u30a4\u30eb\u3092 SASS\u3067 CSS\u306b\u5909\u63db\u3057\u3066\u307f\u308b\u3002<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\">\r\nsass -t expanded style.scss:style.css\r\n<\/pre>\n<p>\u3053\u3093\u306a CSS\u30d5\u30a1\u30a4\u30eb\u304c\u51fa\u6765\u305f\u3002<br \/>\n<b>style.css<\/b><\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\ndiv#box {\r\n  width: 300px;\r\n  height: 100px;\r\n}\r\n<\/pre>\n<h2 class=\"my_h\">(2) @mixin\u3067\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u5229\u7528<\/h2>\n<p>\u3053\u3093\u306a SCSS\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u305f\u3002<br \/>\n<b>style.scss<\/b><\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n@mixin my-block( $color, $bg-color, $border-width ){\r\n  border: $border-width #000 solid;\r\n  color: $color;\r\n  background-color: $bg-color;\r\n}\r\ndiv#block1{\r\n  @include my-block(#ff0, #222, 3px);\r\n}\r\ndiv#block2{\r\n  @include my-block(#008, #ffe, 2px);\r\n}\r\n<\/pre>\n<p>\u3053\u306e\u30d5\u30a1\u30a4\u30eb\u3092 SASS\u3067 CSS\u306b\u5909\u63db\u3057\u3066\u307f\u308b\u3002<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\">\r\nsass -t expanded style.scss:style.css\r\n<\/pre>\n<p>\u3053\u3093\u306a CSS\u30d5\u30a1\u30a4\u30eb\u304c\u51fa\u6765\u305f\u3002<br \/>\n<b>style.css<\/b><\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\ndiv#block1 {\r\n  border: 3px #000 solid;\r\n  color: #ff0;\r\n  background-color: #222;\r\n}\r\n\r\ndiv#block2 {\r\n  border: 2px #000 solid;\r\n  color: #008;\r\n  background-color: #ffe;\r\n}\r\n<\/pre>\n<h2 class=\"my_h\">(3) @extend\u3067\u65e2\u5b58\u306e\u5b9a\u7fa9\u3092\u6d41\u7528<\/h2>\n<p>\u3053\u3093\u306a SCSS\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u305f\u3002<br \/>\n<b>style.scss<\/b><\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.my-blk{\r\n  border: 2px #000 solid;\r\n  border-radius: 10px;\r\n  overflow: hidden;\r\n}\r\n.the-block1{\r\n  @extend .my-blk;\r\n  color: #f00;  \r\n}\r\n<\/pre>\n<p>\u3053\u306e\u30d5\u30a1\u30a4\u30eb\u3092 SASS\u3067 CSS\u306b\u5909\u63db\u3057\u3066\u307f\u308b\u3002<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\">\r\nsass -t expanded style.scss:style.css\r\n<\/pre>\n<p>\u3053\u3093\u306a CSS\u30d5\u30a1\u30a4\u30eb\u304c\u51fa\u6765\u305f\u3002<br \/>\n<b>style.css<\/b><\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n.my-blk, .the-block1 {\r\n  border: 2px #000 solid;\r\n  border-radius: 10px;\r\n  overflow: hidden;\r\n}\r\n.the-block1 {\r\n  color: #f00;\r\n}\r\n<\/pre>\n<p>\u4e00\u77ac\u300c\u3042\u308c\u3063\uff1f\u53cd\u6620\u3055\u308c\u3066\u306a\u3044\u3058\u3083\u3093\uff1f\u300d\u3063\u3066\u8ff7\u3063\u3066\u3057\u307e\u3063\u305f\u304c\u3001.my-blk \u306e\u5ba3\u8a00\u306e\u5f8c\u308d\u306b .the-block1 \u304c\u8ffd\u52a0\u3055\u308c\u3066\u3044\u305f\u3002<\/p>\n<h2 class=\"my_h\">(4) @function\u3067\u95a2\u6570\u3092\u4f5c\u308b\u3002<\/h2>\n<p>\u3053\u3093\u306a SCSS\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u305f\u3002<br \/>\n<b>style.scss<\/b><\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\n@function get-half( $v ){\r\n  @return round($v \/ 2);\r\n}\r\n$box-w: 600px;\r\n\r\ndiv.blk{\r\n  width: get-half($box-w);\r\n  height: 100px;\r\n}\r\n<\/pre>\n<p>\u3053\u306e\u30d5\u30a1\u30a4\u30eb\u3092 SASS\u3067 CSS\u306b\u5909\u63db\u3057\u3066\u307f\u308b\u3002<\/p>\n<pre class=\"brush: bash; title: ; notranslate\" title=\"\">\r\nsass -t expanded style.scss:style.css\r\n<\/pre>\n<p>\u3053\u3093\u306a CSS\u30d5\u30a1\u30a4\u30eb\u304c\u51fa\u6765\u305f\u3002<br \/>\n<b>style.css<\/b><\/p>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\r\ndiv.blk {\r\n  width: 300px;\r\n  height: 100px;\r\n}\r\n<\/pre>\n<hr class=\"my_hr_bottom\">\n","protected":false},"excerpt":{"rendered":"<p>1. \u3084\u308a\u305f\u3044\u3053\u3068 \u524d\u56de\u306e (56) \u3010Sass\u5165\u9580#1\u3011sass\u3067css\u3092\u7c21\u6f54\u306b\u66f8\u304f\u3002 \u306e\u7d9a\u304d\u3002 Sass\u3092\u4f7f\u3063\u3066 CSS\u30d5\u30a1\u30a4\u30eb\u306e\u8a18\u8ff0\u5185\u5bb9\u3092\u6574\u7406\u6574\u9813\u3057\u305f\u3044\u3002 3. \u3084\u3063\u3066\u307f\u308b (1) \u5909\u6570\u3092\u4f7f\u3046\u3002 \u3053\u3093\u306a SCSS\u30d5\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.dogrow.net\/hp\/blog57\/\">\u7d9a\u304d\u3092\u8aad\u3080 &raquo;<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,19],"tags":[],"class_list":["post-577","post","type-post","status-publish","format-standard","hentry","category-htmlcss","category-sass"],"views":1574,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts\/577","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/comments?post=577"}],"version-history":[{"count":4,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts\/577\/revisions"}],"predecessor-version":[{"id":581,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/posts\/577\/revisions\/581"}],"wp:attachment":[{"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/media?parent=577"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/categories?post=577"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dogrow.net\/hp\/wp-json\/wp\/v2\/tags?post=577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}