什么是scss？
Sass属于CSS预处理器，那什么是 CSS 预处理器呢？
CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。
转化成通俗易懂的话来说就是“用一种专门的编程语言，进行 Web 页面样式设计，再通过编译器转化为正常的 CSS 文件，以供项目使用”。
为什么要使用CSS预处理器？
作为前端开发人员，大家都知道，Js中可以自定义变量，而CSS仅仅是一个标记语言，不是编程语言，因此不可以自定义变量，不可以引用等等。
CSS有具体以下几个缺点：
- 语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
- 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。
这就导致了我们在工作中无端增加了许多工作量。而使用CSS预处理器，提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了我们的开发效率。
但是，CSS预处理器也不是万金油，CSS的好处在于简便、随时随地被使用和调试。预编译CSS步骤的加入，让我们开发工作流中多了一个环节，调试也变得更麻烦了。更大的问题在于，预编译很容易造成后代选择器的滥用。
所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，CSS预处理器有没有解决更大的麻烦。
①sass有变量和作用域。
- variable｝like ruby；
- 变量有全局和局部之分，并且有优先级。
②sass有函数的概念；
- @function和@return以及函数参数（还有不定参）可以让你像js开发那样封装你想要的逻辑。
-@mixin类似function但缺少像function的编程逻辑，更多的是提高css代码段的复用性和模块化，这个用的人也是最多的。
-ruby提供了非常丰富的内置原生api。
③进程控制：
-条件：@if @else；
-循环遍历：@for @each @while
-继承：@extend
-引用：@import
④数据结构：
-map类型=object；
其余的也有string、number、function等类型
使用npm安装sass
npm install sass-loader node-sass webpack --save-dev
在src下创建styles文件
兼容性标签问题统一放入compatibility.scss中
input{
background: none !important;
outline: none !important;
border-width: 0px;
border: 0px;
margin:0;
padding:0;
}
html,body {
height: 100%;
}
对外 公共样式文件（下面是我的一些配置，项目中经常需要使用的样式）
common.scss
@import '@/styles/compatibility.scss';
/* 可选颜色 */
$grey-88: #888888;
$line: #e5e5e5;
/* 字体 */
.font-kaiti {
font-family: Kaiti SC;
}
/* 单行省略： 需要加宽度width */
.single-dot {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 断行 */
.line-break {
word-break: normal;
white-space: pre-line;
}
.line-two {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* div 滚动条隐藏 */
::-webkit-scrollbar {
display: none;
}
/* div 滚动 */
.scoller-x {
overflow-y: hidden;
overflow-x: auto;
white-space: nowrap;
/* 兼容iOS滚动不流畅 */
-webkit-overflow-scrolling: touch;
}
/* div 滚动 */
.scoller-y {
overflow-y: auto;
overflow-x: hidden;
white-space: nowrap;
/* 兼容iOS滚动不流畅 */
-webkit-overflow-scrolling: touch;
}
// ---------- 按钮点击效果 -----------
.btn-active:active {
background-color: #e2e2e2 !important;
}
其他一些样式更改
在public文件中的index.html中修改一些样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>vue-stu</title>
</head>
<body style="height: 100%; margin: 0; background-color: #EFF1F4; font-size: 15px;">
<noscript>
<strong>We're sorry but vue-stu doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
</body>
</html></pre>
设置 Viewport
一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" contenteditable="false" cid="n650" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;"><meta name="viewport" content="width=device-width, initial-scale=1.0"></pre>
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：用户是否可以手动缩放。
