vue项目一般是单页面、多组件，整个项目共用一个css 样式表 ，有时候我们在写组件的过程中并不希望组件的样式污染全局作用域（毕竟不同组件之间重名的class很正常），因此我们会在组件的样式标签上加上scoped，例如下面这个最基本vue组件框架：
那么这个scoped是什么意思呢？其实就是给每条样式的 最后面 加上一个属性选择器[哈希值]，这个哈希值在项目里全局唯一，代表了当前这个组件。例如当前组件用到了 haha.vue ， 那么在打包的时候就会编译出一个data-v-5cfc4ef6来唯一代表这个组件。注意一个vue文件里可能有多个哈希值，因为一个组件里还可能嵌套了其他组件。
废话不多说，直接看scoped是怎么工作的。例如：
则打包编译后这个属性会变成这样：
1. Twitter BootStrap （Apache v2.0；响应式）时髦、直观并且强大的前端框架，让Web开发变得更加容易。
2. Foundation （MIT；响应式）
最先进的响应式前端框架。
3. 960gs（GPL&MIT；响应式）
960gs提供了一个简单的网格系统，适合快速开发。
4. Skeleton（MIT；响应式）
非常漂亮的Web模板，适合响应式、移动友好的开发。
5. 99lime HTML KickStart（Free）
适合网站快速开发的极简HTML构建模块。
6. Kube（Free；响应式）
面向专业人员的CSS框架。
7. Less Framework（MIT；响应式）
自适应的CSS网格系统。
8. Flameinwork（Free）
适合懒人开发者的前端微框架。
9. G5 Framework（Free）
(x)HTML5、CSS、PHP前端开发框架。
10. Easy Framework（Free）
Easy Framework是一个一体化前端解决方案，分structural、 presentational、interactive三层。
11. Blueprint（Free）
一个旨在减少开发时间的前端框架。
12. YAML（Creative Commons）
(x)HTML+CSS框架，适合开发现代化浮动布局。
13. BlueTrip（Free）
一个功能全面、并且美丽的CSS框架，适合于Blueprint搭配使用。
14. YUI3:Grids CSS（BSD）
YUI Grids CSS是最著名的CSS框架之一，是由Yahoo开发小组开发而成。 YUI Grids CSS为开发者提供了预先设置的四种不同页面宽度，六种不同的模板。
15. 52framework（Creative Commons）
对HTML5支持非常好，简单易用。
16. elastiCSS（MIT）
一个基于Web接口和印刷布局的简单CSS框架。
17. Emastic（Free）
一个与众不同的CSS框架。
18. Fluid 960 Gride System（GPL/MIT）
Fluid 960 Grid System的模版是根据Nathan Smith之前的作品而创建的。即960 Grid System：传承了MooTools和jQuery JavaScript libraries的效果。
19. xCSS（MIT）
一个面向对象的CSS框架，能让你的工作流更加简洁。xCSS基于CSS，可以在开发复杂样式时，提供面向对象的工作流。
20. EM CSS Framework（MIT/GPL）
EM CSS Framework提供了一个960px宽 + 12 列网格系统 + CSS的通用样式。
普遍的三款 CSS 预处理器框架，分别是 Sass、Less CSS、Stylus。
CSS 预处理器概述：CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处。
总结来讲就是用编程的方法来写CSS样式，而不是手工一行行码，相当于从手工业时代进化到工业时代。
三种CSS 预处理器（框架）简介：
A、SASS2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的css框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS。
B、LESS2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容CSS，反过来也影响了SASS演变到了SCSS的时代，著名的Twitter Bootstrap就是采用LESS做底层语言的。
C、Stylus，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如SASS和LESS。
Stylus主要优点：
1. 简短直观，缩进让CSS的层次非常直观。
2. At 属性引用可以减少维护量。
3. 函数和Mixin，重用的利器。
CSS 预处理器优缺点：
A、可以把PostCSS和预处理器(Sass、Stylus或LESS)结合起来使用。
B、部分PostCSS插件配合预处理器将功能添加到你的工作流中，让你工作变得更加轻松。如果只使用一个预处理器，而不使用这些插件，工作流至少会变得更加困难。
C、PostCSS插件和喜欢的预处理器(Sass、Stylus或LESS)之一结合在一起使用。
D、在常规的预处理器通过使用混合宏或函数特性像程序一样处理代码，达到类似的结果。不过不同的是CSS代码，而其他一切通过插件去处理，而这个过程中不需要调用函数，也没有混合宏等等。
使用技巧：Sass看起来在提供的特性上占有优势，但是LESS能够让开发者平滑地从现存CSS文件过渡到LESS，而不需要像Sass那样需要将CSS文件转换成Sass格式。
![r语言wdata[,2:9]什么意思](/aiimages/r%E8%AF%AD%E8%A8%80wdata%5B%2C2%3A9%5D%E4%BB%80%E4%B9%88%E6%84%8F%E6%80%9D.png)
