Home Explore Help
Register Sign In
FED
/
oyweb-fe
5
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Branch: master
Branches Tags
oyweb-fe
/
build
/
docs
/
assets
/
js
/
24.b9b4a05b.js

24.b9b4a05b.js 7.7 KB
Permalink History Raw

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