package.json 文件解读
vue中style lang="scss" scoped中的scoped
表示局部部署
没有的话里面的css样式会在所有组件中进行渲染
lang属性表示style标签可以使用哪种css预处理语言:
<style lang="scss">
/** scss样式 */
<style>
尝试使用Scss,会让你工作效率更高,代码更易管理
Scss 有三大特性:嵌套 混合器 变量
Sass是成熟、稳定、强大的CSS预处理器,而SCSS是Sass3版本当中引入的新语法特性,完全兼容CSS3的同时继承了Sass强大的动态功能。
CSS书写代码规模较大的Web应用时,容易造成选择器、层叠的复杂度过高,因此推荐通过SASS预处理器进行CSS的开发,SASS提供的变量、嵌套、混合、继承等特性,让CSS的书写更加有趣与程式化。
Sass 有两种语法。 第一种被称为 SCSS (Sassy CSS),是一个 CSS3 语法的扩充版本,这份参考资料使用的就是此语法。 也就是说,所有符合 CSS3 语法的样式表也都是具有相同语法意义的 SCSS 文件。 另外,SCSS 理解大多数 CSS hacks 以及浏览器专属语法,例如IE 古老的 filter 语法。 这种语种语法的样式表文件需要以 .scss 扩展名。
第二种比较老的语法成为缩排语法(或者就称为 “Sass”), 提供了一种更简洁的 CSS 书写方式。 它不使用花括号,而是通过缩排的方式来表达选择符的嵌套层级,I 而且也不使用分号,而是用换行符来分隔属性。 很多人认为这种格式比 SCSS 更容易阅读,书写也更快速。 缩排语法具有 Sass 的所有特色功能, 虽然有些语法上稍有差异; 这些差异在{file:INDENTED_SYNTAX.md 所排语法参考手册}中都有描述。 使用此种语法的样式表文件需要以 .sass 作为扩展名。
任一语法都可以导入另一种语法撰写的文件中。 只要使用 sass-convert 命令行工具,就可以将一种语法转换为另一种语法:
# 将 Sass 转换为 SCSS
$ sass-convert style.sass style.scss
# 将 SCSS 转换为 Sass
$ sass-convert style.scss style.sass