{"id":205797,"date":"2020-12-02T10:18:40","date_gmt":"2020-12-02T02:18:40","guid":{"rendered":"https:\/\/lrxjmw.cn\/?p=205797"},"modified":"2020-11-23T11:19:32","modified_gmt":"2020-11-23T03:19:32","slug":"learn-about-sass","status":"publish","type":"post","link":"https:\/\/lrxjmw.cn\/learn-about-sass.html","title":{"rendered":"\u5b66\u4e60\u4e00\u4e0bSass @extend \u4e0e \u7ee7\u627f"},"content":{"rendered":"<table>\n<tbody>\n<tr>\n<td style=\"padding: 5px 12px; width: 25px; font-size: 22px; text-align: center; background: #E8E8E8; line-height: 30px; color: #999;\">\u5bfc\u8bfb<\/td>\n<td style=\"padding: 10px 10px 12px; line-height: 20px;\"><strong>Sass (\u82f1\u6587\u5168\u79f0\uff1aSyntactically Awesome Stylesheets) \u662f\u4e00\u4e2a\u6700\u521d\u7531 Hampton Catlin \u8bbe\u8ba1\u5e76\u7531 Natalie Weizenbaum \u5f00\u53d1\u7684\u5c42\u53e0\u6837\u5f0f\u8868\u8bed\u8a00\u3002<\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/lrxjmw.cn\/wp-content\/uploads\/2020\/11\/\u672a\u6807\u9898-1-1.jpg\" alt=\"\" width=\"700\" height=\"150\" class=\"alignnone size-full wp-image-205778\" srcset=\"https:\/\/lrxjmw.cn\/wp-content\/uploads\/2020\/11\/\u672a\u6807\u9898-1-1.jpg 700w, https:\/\/lrxjmw.cn\/wp-content\/uploads\/2020\/11\/\u672a\u6807\u9898-1-1-300x64.jpg 300w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><br \/>\n@extend \u6307\u4ee4\u544a\u8bc9 Sass \u4e00\u4e2a\u9009\u62e9\u5668\u7684\u6837\u5f0f\u4ece\u53e6\u4e00\u9009\u62e9\u5668\u7ee7\u627f\u3002<\/p>\n<p>\u5982\u679c\u4e00\u4e2a\u6837\u5f0f\u4e0e\u53e6\u5916\u4e00\u4e2a\u6837\u5f0f\u51e0\u4e4e\u76f8\u540c\uff0c\u53ea\u6709\u5c11\u91cf\u7684\u533a\u522b\uff0c\u5219\u4f7f\u7528 @extend \u5c31\u663e\u5f97\u5f88\u6709\u7528\u3002<\/p>\n<p>\u4ee5\u4e0b Sass \u5b9e\u4f8b\u4e2d\uff0c\u6211\u4eec\u521b\u5efa\u4e86\u4e00\u4e2a\u57fa\u672c\u7684\u6309\u94ae\u6837\u5f0f .button-basic\uff0c\u63a5\u7740\u6211\u4eec\u5b9a\u4e49\u4e86\u4e24\u4e2a\u6309\u94ae\u6837\u5f0f .button-report \u4e0e .button-submit\uff0c\u5b83\u4eec\u90fd\u7ee7\u627f\u4e86 .button-basic \uff0c\u5b83\u4eec\u4e3b\u8981\u533a\u522b\u5728\u4e8e\u80cc\u666f\u989c\u8272\u4e0e\u5b57\u4f53\u989c\u8272\uff0c\u5176\u4ed6\u7684\u6837\u5f0f\u90fd\u662f\u4e00\u6837\u7684\u3002<\/p>\n<div   id="j6sjwn9j3u"    style=\"font-size: 14pt; color: white; background-color: black; border-left: red 10px solid; padding-left: 14px; margin-bottom: 20px; margin-top: 20px;\"><strong>Sass \u4ee3\u7801\uff1a<\/strong><\/div>\n<pre>\r\n.button-basic  {\r\n  border: none;\r\n  padding: 15px 30px;\r\n  text-align: center;\r\n  font-size: 16px;\r\n  cursor: pointer;\r\n}\r\n\r\n.button-report  {\r\n  @extend .button-basic;\r\n  background-color: red;\r\n}\r\n\r\n.button-submit  {\r\n  @extend .button-basic;\r\n  background-color: green;\r\n  color: white;\r\n}<\/pre>\n<p>\u5c06\u4ee5\u4e0a\u4ee3\u7801\u8f6c\u6362\u4e3a CSS \u4ee3\u7801\uff0c\u5982\u4e0b\u6240\u793a\uff1a<\/p>\n<div   id="j6sjwn9j3u"    style=\"font-size: 14pt; color: white; background-color: black; border-left: red 10px solid; padding-left: 14px; margin-bottom: 20px; margin-top: 20px;\"><strong>Css \u4ee3\u7801\uff1a<\/strong><\/div>\n<pre>\r\n.button-basic, .button-report, .button-submit {\r\n  border: none;\r\n  padding: 15px 30px;\r\n  text-align: center;\r\n  font-size: 16px;\r\n  cursor: pointer;\r\n}\r\n\r\n.button-report  {\r\n  background-color: red;\r\n}\r\n\r\n.button-submit  {\r\n  background-color: green;\r\n  color: white;\r\n}<\/pre>\n<p>\u4f7f\u7528 @extend \u540e\uff0c\u6211\u4eec\u5728 HTML \u6309\u94ae\u6807\u7b7e\u4e2d\u5c31\u4e0d\u9700\u8981\u6307\u5b9a\u591a\u4e2a\u7c7b class=\"button-basic button-report\" \uff0c\u53ea\u9700\u8981\u8bbe\u7f6e class=\"button-report\" \u7c7b\u5c31\u597d\u4e86\u3002<\/p>\n<p>@extend \u5f88\u597d\u7684\u4f53\u73b0\u4e86\u4ee3\u7801\u7684\u590d\u7528\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>@extend \u6307\u4ee4\u544a\u8bc9 Sass \u4e00\u4e2a\u9009\u62e9\u5668\u7684\u6837\u5f0f\u4ece\u53e6\u4e00\u9009\u62e9\u5668\u7ee7\u627f\u3002 \u5982\u679c\u4e00\u4e2a\u6837\u5f0f\u4e0e\u53e6\u5916\u4e00\u4e2a\u6837\u5f0f\u51e0\u4e4e\u76f8\u540c\uff0c\u53ea [&hellip;]<\/p>\n","protected":false},"author":321,"featured_media":205778,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[55],"tags":[],"class_list":["post-205797","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-thread"],"acf":[],"_links":{"self":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts\/205797","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/users\/321"}],"replies":[{"embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/comments?post=205797"}],"version-history":[{"count":2,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts\/205797\/revisions"}],"predecessor-version":[{"id":205799,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/posts\/205797\/revisions\/205799"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/media\/205778"}],"wp:attachment":[{"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/media?parent=205797"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/categories?post=205797"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lrxjmw.cn\/wp-json\/wp\/v2\/tags?post=205797"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}