{"id":3664,"date":"2019-05-16T18:00:31","date_gmt":"2019-05-16T09:00:31","guid":{"rendered":"http:\/\/redwing.moo.jp\/cocoa\/?p=3664"},"modified":"2019-05-16T18:00:31","modified_gmt":"2019-05-16T09:00:31","slug":"sass-%e5%a7%8b%e3%82%81%e3%82%8b%e6%99%82%e3%81%ab%e5%8f%82%e8%80%83%e3%81%ab%e3%81%97%e3%81%9f%e3%81%93%e3%81%a8","status":"publish","type":"post","link":"https:\/\/redwing.moo.jp\/cocoa\/archives\/3664","title":{"rendered":"Sass \u59cb\u3081\u308b\u6642\u306b\u53c2\u8003\u306b\u3057\u305f\u3053\u3068"},"content":{"rendered":"<h2>\u25bc \u8a2d\u8a08\u624b\u6cd5\u306b\u3064\u3044\u3066<\/h2>\n<p>\u8a2d\u8a08\u624b\u6cd5\u306b\u3064\u3044\u3066\u306f\u5e7e\u3064\u304b\u3042\u308b\u3089\u3057\u3044\u3067\u3059\u304c\uff0c\u306a\u3093\u3068\u306a\u304f\u4e3b\u6d41\u306f BEM \u3068\u547c\u3070\u308c\u308b\u3082\u306e\u3089\u3057\u3044\uff0e<\/p>\n<h2>BEM<\/h3>\n<p>3\u3064\u306e\u8981\u7d20\u3092\u5143\u306b\u540d\u524d\u3092\u8a2d\u5b9a\u3059\u308b\uff0e<br \/>\nBlock, Element, Modifier<\/p>\n<p>Block__Element&#8211;Modifier<br \/>\nBlock&#8211;Modifier<\/p>\n<h2>\u25bc Sass \u306e\u8868\u8a18<\/h2>\n<p>div \u30bf\u30b0\u306e class \u5c5e\u6027\u306a\u3069\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u8a18\u8ff0\u3059\u308b\uff0e<\/p>\n<table>\n<tr>\n<td>class<\/td>\n<td>\u30bb\u30ec\u30af\u30bf\u306e\u59cb\u307e\u308a\u3092\u300c.\u300d\u306b\u3059\u308b<\/td>\n<\/tr>\n<tr>\n<td>id<\/td>\n<td>\u30bb\u30ec\u30af\u30bf\u306e\u59cb\u307e\u308a\u3092\u300c#\u300d\u306b\u3059\u308b<\/td>\n<\/tr>\n<\/table>\n<h2>\u25bc Sass \u4e3b\u306a\u6a5f\u80fd<\/h2>\n<h2>&#038; \u89aa\u53c2\u7167<\/h2>\n<p>\u4ee5\u4e0b\u306e html \u3068 main.scss \u3092\u30d3\u30eb\u30c9\u3059\u308b\u3068\u6dfb\u4ed8\u306e\u3088\u3046\u306a\u6587\u5b57\u8272\u3067\u8868\u793a\u3055\u308c\u308b.<\/p>\n<pre lang=\"html\" line=\"1\">\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\r\n  <link rel=\"stylesheet\" href=\".\/dist\/css\/main.css\">\r\n  <title>Document<\/title>\r\n<\/head>\r\n<body>\r\n  <p>\u8d64\u3044\u6587\u5b57<\/p>\r\n  <p class=\"green\">\u7dd1\u6587\u5b57<\/p>\r\n  <p><span class=\"blue\">\u9752\u3044\u6587\u5b57<\/span><\/p>\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n<pre lang=\"html\" line=\"1\">\r\n\/* main.scss *\/\r\np {\r\n  color: red;\r\n  &.green {\r\n    color: green;\r\n  }\r\n  .blue {\r\n    color: blue;\r\n  }\r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/redwing.moo.jp\/cocoa\/wp-content\/uploads\/sass_sample.png\" alt=\"\" width=\"262\" height=\"288\" class=\"alignleft size-full wp-image-3671\" \/><\/p>\n<h2>\u25bc mixin<\/h2>\n<p>@mixin \u3067\u5b9a\u7fa9\u3057\u3066\uff0c@include \u3067\u9069\u7528\u3059\u308b\uff0e<\/p>\n<h2>\u25bc \u30a4\u30f3\u30bf\u30fc\u30dd\u30ec\u30fc\u30b7\u30e7\u30f3(#{})<\/h2>\n<p>\u5909\u6570\u306e\u53c2\u7167<\/p>\n<p>\u53c2\u8003:<br \/>\n<a href=\"https:\/\/qiita.com\/2x2no\/items\/eb029755bfd7360e7b2a\" rel=\"noopener noreferrer\" target=\"_blank\">\u4eca\u66f4\u306a\u304c\u3089BEM\u306b\u3064\u3044\u3066\u3068\u3001\u305d\u308c\u306b\u5bfe\u5fdc\u3059\u308bSass\u306b\u3064\u3044\u3066\u307e\u3068\u3081\u3066\u307f\u308b<\/a><br \/>\n<a href=\"https:\/\/mae.chab.in\/archives\/2553\" rel=\"noopener noreferrer\" target=\"_blank\">BEM\u3092Sass\u3067\u5feb\u9069\u306b\u66f8\u304f\u65b9\u6cd5<\/a><\/p>\n<h2>\u25bc sass \u3068 scss \u306e\u9055\u3044\u306f\uff1f<\/h2>\n<p>\u8a18\u6cd5\u306e\u3053\u3068\u3092\u6307\u3057\u3066\u3044\u308b\u3053\u3068\u304c\u591a\u304f\uff0cscss \u8a18\u6cd5\u304c CSS \u306b\u8fd1\u3044\u30eb\u30fc\u30eb\u3067\u8a18\u8ff0\u3067\u304d\u308b\uff0e<br \/>\n\u4e3b\u6d41\u306f\u3053\u3061\u3089\u306b\u306a\u3063\u3066\u3044\u308b\uff0e<\/p>\n<a href=\"https:\/\/twitter.com\/redwing1300?ref_src=twsrc%5Etfw\" class=\"twitter-follow-button\" data-size=\"large\" data-show-count=\"false\">Follow @redwing1300<\/a><script async src=\"https:\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content --><div id=\"redwi-673215742\" class=\"redwi- redwi-entity-placement\"><script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-9652476346722993\" crossorigin=\"anonymous\"><\/script><ins class=\"adsbygoogle\" style=\"display:block;\" data-ad-client=\"ca-pub-9652476346722993\" \ndata-ad-slot=\"\" \ndata-ad-format=\"auto\"><\/ins>\n<script> \n(adsbygoogle = window.adsbygoogle || []).push({}); \n<\/script>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>\u25bc \u8a2d\u8a08\u624b\u6cd5\u306b\u3064\u3044\u3066 \u8a2d\u8a08\u624b\u6cd5\u306b\u3064\u3044\u3066\u306f\u5e7e\u3064\u304b\u3042\u308b\u3089\u3057\u3044\u3067\u3059\u304c\uff0c\u306a\u3093\u3068\u306a\u304f\u4e3b\u6d41\u306f BEM \u3068\u547c\u3070\u308c\u308b\u3082\u306e\u3089\u3057\u3044\uff0e BEM 3\u3064\u306e\u8981\u7d20\u3092\u5143\u306b\u540d\u524d\u3092\u8a2d\u5b9a\u3059\u308b\uff0e Block, Element, Modifier Block__ &hellip; <a href=\"https:\/\/redwing.moo.jp\/cocoa\/archives\/3664\">\u7d9a\u304d\u3092\u8aad\u3080 <span class=\"meta-nav\">&rarr;<\/span><\/a><!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[33],"tags":[261,248,247,250,260],"class_list":["post-3664","post","type-post","status-publish","format-standard","hentry","category-web","tag-bem","tag-css","tag-html","tag-sass","tag-scss"],"_links":{"self":[{"href":"https:\/\/redwing.moo.jp\/cocoa\/wp-json\/wp\/v2\/posts\/3664","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/redwing.moo.jp\/cocoa\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/redwing.moo.jp\/cocoa\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/redwing.moo.jp\/cocoa\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/redwing.moo.jp\/cocoa\/wp-json\/wp\/v2\/comments?post=3664"}],"version-history":[{"count":14,"href":"https:\/\/redwing.moo.jp\/cocoa\/wp-json\/wp\/v2\/posts\/3664\/revisions"}],"predecessor-version":[{"id":3679,"href":"https:\/\/redwing.moo.jp\/cocoa\/wp-json\/wp\/v2\/posts\/3664\/revisions\/3679"}],"wp:attachment":[{"href":"https:\/\/redwing.moo.jp\/cocoa\/wp-json\/wp\/v2\/media?parent=3664"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/redwing.moo.jp\/cocoa\/wp-json\/wp\/v2\/categories?post=3664"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/redwing.moo.jp\/cocoa\/wp-json\/wp\/v2\/tags?post=3664"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}