| 1 |
- (window.webpackJsonp=window.webpackJsonp||[]).push([[18],{448:function(t,s,a){"use strict";a.r(s);var r=a(55),n=Object(r.a)({},(function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("ContentSlotsDistributor",{attrs:{"slot-key":t.$parent.slotKey}},[a("h1",{attrs:{id:"sass-guide"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sass-guide"}},[t._v("#")]),t._v(" SASS Guide")]),t._v(" "),a("hr"),t._v(" "),a("p",[t._v("SASS规范指南，SASS 代码的基本规范和原则与 "),a("a",{attrs:{href:"https://github.com/duowan/fe-guide/blob/master/css-guide.md",target:"_blank",rel:"noopener noreferrer"}},[t._v("CSS 编码规范"),a("OutboundLink")],1),t._v(" 保持一致。")]),t._v(" "),a("hr"),t._v(" "),a("h2",{attrs:{id:"文档目录"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#文档目录"}},[t._v("#")]),t._v(" 文档目录")]),t._v(" "),a("ol",[a("li",[a("a",{attrs:{href:"#1-%E7%BC%96%E7%A0%81"}},[t._v("编码")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#2-%E4%BB%A3%E7%A0%81%E7%BB%84%E7%BB%87"}},[t._v("代码组织")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#3-import-%E8%AF%AD%E5%8F%A5"}},[a("code",[t._v("@import")]),t._v(" 语句")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#4-%E5%8F%98%E9%87%8F"}},[t._v("变量")])]),t._v(" "),a("li",[a("a",{attrs:{href:"#5-%E7%BB%A7%E6%89%BF"}},[t._v("继承")])])]),t._v(" "),a("h2",{attrs:{id:"_1-编码"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_1-编码"}},[t._v("#")]),t._v(" 1 编码")]),t._v(" "),a("p",[a("strong",[t._v("【强制】")]),t._v(" 使用UTF-8编码，每个SASS文件的第一行必须是定义编码的 "),a("code",[t._v('@charset "UTF-8";')]),t._v("；")]),t._v(" "),a("p",[t._v("如果没定义编码，很有可能会出现跨平台兼容问题。")]),t._v(" "),a("h2",{attrs:{id:"_2-代码组织"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_2-代码组织"}},[t._v("#")]),t._v(" 2 代码组织")]),t._v(" "),a("p",[a("strong",[t._v("【强制】")]),t._v(" 代码必须按如下形式按顺序组织：")]),t._v(" "),a("ol",[a("li",[t._v("全局的变量声明 || "),a("code",[t._v("@import")]),t._v("；")]),t._v(" "),a("li",[t._v("样式声明；")])]),t._v(" "),a("p",[t._v("示例：")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[t._v("$"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("base-font-size")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" 12px !default"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" // 字号\n$"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("base-font-family")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Hiragino Sans GB"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"Microsoft Yahei"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"WenQuanYi Micro Hei"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(",")]),t._v(" sans-serif !default"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v(" // 字体族\n\n"),a("span",{pre:!0,attrs:{class:"token atrule"}},[a("span",{pre:!0,attrs:{class:"token rule"}},[t._v("@import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"base/config"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token atrule"}},[a("span",{pre:!0,attrs:{class:"token rule"}},[t._v("@import")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token string"}},[t._v('"biz/page"')]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")])]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v("body")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("background")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #fff"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])]),a("h2",{attrs:{id:"_3-import-语句"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_3-import-语句"}},[t._v("#")]),t._v(" 3 "),a("code",[t._v("@import")]),t._v(" 语句")]),t._v(" "),a("p",[a("strong",[t._v("【强制】")]),t._v(" 同一个SASS文件中的所有的 "),a("code",[t._v("@import")]),t._v("必须放在同一块，不允许分开：")]),t._v(" "),a("p",[a("strong",[t._v("【建议】")]),t._v(" 使用双引号引入SASS文件，至少同一项目要保持一致：")]),t._v(" "),a("h2",{attrs:{id:"_4-变量"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_4-变量"}},[t._v("#")]),t._v(" 4 变量")]),t._v(" "),a("p",[a("strong",[t._v("【强制】")]),t._v(" 变量命名必须采用 @foo-bar 形式，不允许使用 @fooBar 形式；")]),t._v(" "),a("p",[t._v("示例：")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Not so great */")]),t._v("\n$"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("cardColor")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #fff"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Better */")]),t._v("\n$"),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("card-color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #fff"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n")])])]),a("h2",{attrs:{id:"_5-继承"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#_5-继承"}},[t._v("#")]),t._v(" 5 继承")]),t._v(" "),a("p",[a("strong",[t._v("【强制】")]),t._v(" 使用继承时，如果在声明块内书写 "),a("code",[t._v("@extend")]),t._v(" 语句，必须写在开头；")]),t._v(" "),a("p",[t._v("示例：")]),t._v(" "),a("div",{staticClass:"language-css extra-class"},[a("pre",{pre:!0,attrs:{class:"language-css"}},[a("code",[a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Not so great */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".selector")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #fff"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token atrule"}},[a("span",{pre:!0,attrs:{class:"token rule"}},[t._v("@extend")]),t._v(" sameStyle"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")])]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n\n"),a("span",{pre:!0,attrs:{class:"token comment"}},[t._v("/* Better */")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token selector"}},[t._v(".selector")]),t._v(" "),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("{")]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token atrule"}},[a("span",{pre:!0,attrs:{class:"token rule"}},[t._v("@extend")]),t._v(" sameStyle"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")])]),t._v("\n "),a("span",{pre:!0,attrs:{class:"token property"}},[t._v("color")]),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(":")]),t._v(" #fff"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v(";")]),t._v("\n"),a("span",{pre:!0,attrs:{class:"token punctuation"}},[t._v("}")]),t._v("\n")])])])])}),[],!1,null,null,null);s.default=n.exports}}]);
|
