[ { "target": "demo", "code": "<nav class=\"nav__box\">\n <div class=\"nav__child--left\">\n <div class=\"nav__item\">\n <a class=\"nav__link\" href=\"#__dummy__\">foo</a>\n </div>\n </div>\n <div class=\"nav__child--right\">\n <div class=\"nav-item\">\n <a class=\"nav__link\" href=\"#__dummy__\">hoge</a>\n </div>\n </div>\n</nav>" }, { "target": "html", "code": "<nav class=\"nav__box\">\n <div class=\"nav__child--left\">\n <div class=\"nav__item\">\n <a class=\"nav__link\" href=\"#__dummy__\">foo</a>\n </div>\n </div>\n <div class=\"nav__child--right\">\n <div class=\"nav-item\">\n <a class=\"nav__link\" href=\"#__dummy__\">hoge</a>\n </div>\n </div>\n</nav>" }, { "target": "sass", "code": "@mixin nav__box() {\n display: flex;\n background: #333;\n width: 100%;\n color: #fff;\n}\n\n@mixin nav__child($align: left) {\n display: flex;\n flex: auto;\n\n @if $align == right {\n justify-content: flex-end;\n }\n}\n\n@mixin nav__link() {\n display: inline-block;\n padding: .3em .5em;\n color: inherit;\n text-decoration: none;\n}\n", "altCode": "@import \"nav\";\n\n.nav__box {\n @include nav__box;\n}\n\n.nav__child--left {\n @include nav__child;\n}\n\n.nav__child--right {\n @include nav__child(right);\n}\n\n.nav__link {\n @include nav__link;\n}\n" }, { "target": "css", "code": ".nav__box {\n display: flex;\n background: #333;\n width: 100%;\n color: #fff;\n}\n\n.nav__child--left,\n.nav__child--right {\n display: flex;\n flex: auto;\n}\n\n.nav__child--right {\n justify-content: flex-end;\n}\n\n.nav__link {\n display: inline-block;\n padding: .3em .5em;\n color: inherit;\n text-decoration: none;\n}\n" } ]