{"id":281,"date":"2023-08-29T11:38:54","date_gmt":"2023-08-29T03:38:54","guid":{"rendered":"https:\/\/www.qzdd.net\/?p=281"},"modified":"2023-08-29T11:38:54","modified_gmt":"2023-08-29T03:38:54","slug":"sass-import-extend-mixin","status":"publish","type":"post","link":"https:\/\/www.qzdd.net\/?p=281","title":{"rendered":"Sass import extend mixin"},"content":{"rendered":"\n<p>@import \u9664\u4e86\u5bfc\u5165\u6587\u4ef6\u5916\uff0c\u8fd8\u53ef\u4ee5\u5d4c\u5957selector&amp;rule\uff08\u5d4c\u5165\u7684\u65f6\u5019\u4f1a\u5f62\u6210<strong>\u540e\u4ee3\u9009\u62e9\u5668\u53ca\u89c4\u5219<\/strong>\uff09<\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">.example {\n  color: red;\n}\n#main {\n  @import \"example\";\n}\n\u7f16\u8bd1\u7ed3\u679c\uff1a\n#main .example {\n  color: red;\n}<\/pre>\n\n\n\n<p>@extend <strong>\u53ea\u4f1a\u7ee7\u627f\u89c4\u5219\u4e0d\u4f1a\u5e26\u9009\u62e9\u5668<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">.error {\n  border: 1px #f00;\n  background-color: #fdd;\n}\n.seriousError {\n  @extend .error;\n  border-width: 3px;\n}\n\u7f16\u8bd1\u7ed3\u679c\uff1a\n.error, .seriousError {\n  border: 1px #f00;\n  background-color: #fdd; \n}\n.seriousError {\n  border-width: 3px; \n}\n\/\/\u7b49\u540c\u4e8e\u5982\u4e0b\uff1a\n<em>.<\/em>error {\n  border: 1px #f00;\n  background-color: #fdd; \n}\n.seriousError {\n  border: 1px #f00;\n  background-color: #fdd; \n  border-width: 3px; \n}\n<\/pre>\n\n\n\n<p>@mixin\u5bf9\u5e94@include\uff0c<strong>\u6ca1\u6709\u9009\u62e9\u5668\u53ea\u80fd\u88ab\u8c03\u7528\uff0c\u53ef\u63a5\u53d7\u53c2\u6570\u548c@content\u5f15\u7528\u8c03\u7528\u5904\u7684\u5185\u5bb9<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-preformatted\">@mixin hover {\n  &amp;:not([disabled]):hover {\n    @content;\n  }\n}\n.button {\n  border: 1px solid black;\n  @include hover {\n    border-width: 2px;\n  }\n}\n\u7f16\u8bd1\u7ed3\u679c\uff1a\n.button {\n  border: 1px solid black;\n}\n.button:not([disabled]):hover {\n  border-width: 2px;\n}\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>@import \u9664\u4e86\u5bfc\u5165\u6587\u4ef6\u5916\uff0c\u8fd8\u53ef\u4ee5\u5d4c\u5957selector&amp;rule\uff08\u5d4c\u5165\u7684\u65f6\u5019\u4f1a\u5f62\u6210\u540e\u4ee3\u9009\u62e9\u5668\u53ca\u89c4\u5219 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[36,45,49,56],"class_list":["post-281","post","type-post","status-publish","format-standard","hentry","category-base","tag-extend","tag-import","tag-mixin","tag-sass"],"_links":{"self":[{"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/posts\/281","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=281"}],"version-history":[{"count":0,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=\/wp\/v2\/posts\/281\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.qzdd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=281"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=281"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.qzdd.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=281"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}