什么是scss悔政？
Sass屬于CSS預處理器晚吞，那什么是 CSS 預處理器呢？
CSS 預處理器定義了一種新的語言谋国，其基本思想是槽地，用一種專門的編程語言，為 CSS 增加了一些編程的特性芦瘾，將 CSS 作為目標生成文件捌蚊，然后開發(fā)者就只要使用這種語言進行CSS的編碼工作。
轉化成通俗易懂的話來說就是“用一種專門的編程語言近弟，進行 Web 頁面樣式設計缅糟，再通過編譯器轉化為正常的 CSS 文件，以供項目使用”祷愉。
為什么要使用CSS預處理器窗宦？
作為前端開發(fā)人員赦颇，大家都知道，Js中可以自定義變量赴涵，而CSS僅僅是一個標記語言沐扳，不是編程語言，因此不可以自定義變量句占，不可以引用等等。
CSS有具體以下幾個缺點：
- 語法不夠強大躯嫉，比如無法嵌套書寫纱烘，導致模塊化開發(fā)中需要書寫很多重復的選擇器；
- 沒有變量和合理的樣式復用機制祈餐，使得邏輯上相關的屬性值必須以字面量的形式重復輸出擂啥，導致難以維護。
? 這就導致了我們在工作中無端增加了許多工作量帆阳。而使用CSS預處理器哺壶，提供 CSS 缺失的樣式層復用機制、減少冗余代碼蜒谤，提高樣式代碼的可維護性山宾。大大提高了我們的開發(fā)效率。
? 但是鳍徽，CSS預處理器也不是萬金油资锰，CSS的好處在于簡便、隨時隨地被使用和調試阶祭。預編譯CSS步驟的加入绷杜，讓我們開發(fā)工作流中多了一個環(huán)節(jié)，調試也變得更麻煩了濒募。更大的問題在于鞭盟，預編譯很容易造成后代選擇器的濫用。
? 所以我們在實際項目中衡量預編譯方案時瑰剃，還是得想想齿诉，比起帶來的額外維護開銷，CSS預處理器有沒有解決更大的麻煩培他。
①sass有變量和作用域鹃两。
- variable｝like ruby俊扳；
- 變量有全局和局部之分，并且有優(yōu)先級猛遍。
②sass有函數(shù)的概念馋记；
- @function和@return以及函數(shù)參數(shù)（還有不定參）可以讓你像js開發(fā)那樣封裝你想要的邏輯号坡。
-@mixin類似function但缺少像function的編程邏輯，更多的是提高css代碼段的復用性和模塊化梯醒，這個用的人也是最多的宽堆。
-ruby提供了非常豐富的內置原生api。
③進程控制：
-條件：@if @else茸习；
-循環(huán)遍歷：@for @each @while
-繼承：@extend
-引用：@import
④數(shù)據(jù)結構：
-map類型=object；
其余的也有string号胚、number籽慢、function等類型
使用npm安裝sass
npm install sass-loader node-sass webpack --save-dev
在src下創(chuàng)建styles文件
兼容性標簽問題統(tǒng)一放入compatibility.scss中
input{
background: none !important;
outline: none !important;
border-width: 0px;
border: 0px;
margin:0;
padding:0;
}
html,body {
height: 100%;
}
對外 公共樣式文件（下面是我的一些配置，項目中經(jīng)常需要使用的樣式）
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
一個常用的針對移動網(wǎng)頁優(yōu)化過的頁面的 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：用戶是否可以手動縮放。
