本文介绍了SASS和SCSS这两种CSS预处理器，包括它们的功能如变量、嵌套、混合、父选择器和变量引入等，详细讲解了安装、执行过程以及如何利用它们提高CSS编写效率。
-
SASS+SCSS介绍
-
安装＋执行
-
嵌套
-
引用父选择器&
-
变量
-
引入
-
混合
-
继承
-
操作符
-
结论
SASS是一个成熟且稳定的CSS预处理器，除了把普通的CSS语法强化，它还使用了SassScript增加了许多功能，如：变量、嵌套、混合、导入等…功能，在一般专案的编写或是中大型的专案上，都可以编写的更加快速。
SASS 会编译（compiled）程式码，转成一般CSS 形式，让浏览器可以解读输出，把页面呈现出来。
主要包含两种写法：分别是旧版的SASS（缩排语法，副档名.sass，使用缩排来区分程式码块，与Haml类似）和新版的SCSS（块语法，副档名.scss，使用和CSS相同方式，用大括号分开）。
/** 一般 css 写法 **/
.nav{
background: #ccc;
}
.nav li {
display: inline-block;
}
.nav li a{
display: block;
padding: 15px;
text-decoration: none;
color: #000;
}
.nav li img{
width: 100%;
}
SASS写法：采用「缩进语法（TAB）」的方式，去除了一般CSS的括号、分号等…加快编写流程，有一部分的人喜欢这样的编写方式而采用，如下：
/** sass寫法 **/
.nav
background: #ccc
li
display: inline-block
a
display: block
padding: 15px
text-decoration: none
color: #000
img
width: 100%
SCSS写法：采用「块语法（Block）」，一般从CSS转为SCSS开发比较无痛，保留了括号、分号等…元素，相对于上面的SASS是比较新的编写方式，学习成本比较低，是目前主流的方式，如下：
/** scss寫法 **/
.nav{
background: #ccc;
li {
display: inline;
a {
display: block;
padding: 15px;
text-decoration: none;
color: #000;
}
img {
width: 100%;
}
}
}
看完上面的程式码，会发现SASS 可以协助解决编写CSS 常遇到的几个问题，如：「 重复编写」、「 后续维护」、「 漏写问题」等问题…，然后加快开发流程，如下：
-
父选择器，重复编写：?如要扩充页面样式，就会不断的加上.nav li … 等父级class 名称，比较费工！
-
属性样式，重复编写：常会看到许多CSS 属性，是许多区块都需要用到，在SASS 没出来前，每个区块都需特别写一遍，现在直接引用即可。
-
后续维护：若哪天需要把.nav 这个class 名称更换，就需全部替换，比较麻烦。
-
漏写问题：SASS / SCSS 有条理的节省了许多代码编写，降低漏写的Bug。
安装＋执行SASS 的方式有满多种，有使用第三方应用程式的，也有直接安装在本机上的，这边会建议直接安装在本机上，比较一劳永逸，这边列出几种安装方式，如下：
SASS 安装
-
使用Node.js 安装
$ npm install -g sass -
使用Ruby 安装
$ gem install compass -
使用Brew 安装（Mac专用）
$ brew install sass
指令执行完成，基本上就安装好了，若想测试是否安装成功，可以输入 $sass -v 看是否有显示SASS 版本号，若有的话代表安装完成
SASS 执行
首先在专案资料夹下，生成index.html 和两个资料夹css、sass ，然后在sass 下面新增一个style.scss，这支档是我们开发，主要编写样式的档案。
我们现在要试着把sass 资料夹里的style.scss ，编译成浏览器看的懂的.css 副档名型式。
所以下指令把style.scss 档案转译生成style.css，并放置在css 资料夹里，如下：
$ sass sass/style.scss:css/style.css
如果顺利的话，应该会看到「 css 」档案夹里，新增了两个档案，分别是「 style.css 」和「 style.css.map 」，这边比较要留意的是style.css（浏览器主要解读这只档）。
- 需留意「 当前路径」，这会影响到style.scss 档案编译生成style.css 的路径，若不对会报错
- 在index.html 里面，记得引入style.css 档案（ style.scss 不需引入），才会有样式出现
若持续有样式需新增，每次一编写完style.scss 就得执行一次 $ sass sass/style. scss :css/style. css指令，才能在浏览器上看到变化，相信一定会很想撞墙
所以这时可以改下另一个指令（加上 --watch 参数，若原有的style.css / style.css.map 已存在，会自动覆盖，不存在的话会自动生成新的），如下：
$ sass --watch sass/style.scss:css/style.css
执行后，会发现sass 已经开始在监听style.scss ，若这只档案有修改，style.css 变会即时的进行编译，给浏览器做使用，
在开发过程中，一个专案可能不只有一个样式档，假如有多个档案需同时进行监听，这边提供几个方式给大家：
- 重复执行：看有几个档案需监听，就输入几次。
$ sass --watch path/to/filename. scss :path/filename. css
- 一次执行：看有几个档案需监听，一次下指令。
$ sass --watch path/filename1. scss :path/filename1. css path/filename2. scss :path/filename2. css path/filename3. scss :path/filename3. css
- 指定目录下全部监听：监听sass 目录下的sass/scss 档案到指定的css 目录下（下面指令为两个资料夹在同一层）
$ sass --watch sass:css
- 当前目录下全数监听，并直接生成css 档案。
$ sass --watch .
到了这一步，若顺利的话，相信你也学会，如何在编写sass/scss 档案时，指定的css 档案可以同步的进行编译，并让浏览器能够顺利的出现画面。
个人觉的sass 学习比较麻烦的就是安装＋执行这个章节，后面就是语法部分，语法就相对简单明了了，原来就有css 开发经验的捧有们，相信也可以很快就入手的
接下来，我们开始前进到语法部分
SASS 提供CSS 语法扩展，如：嵌套功能（ Nested Rules ），主要是解决CSS 编写过程中，父元素重复编写问题，可以缩短开发流程、方便后续维护、?样式模组化等… 优点
这是容易入门SASS教学的第一步，直接上代码，我们使用SASS 编写样式，并对比编译后的CSS ，如下：
/** 编译前( sass 语法 ) **/
#main {
width: 200px;
height: 100px;
background: #ddb92a;
.greenbox{
width: 100px;
height: 50px;
background: green;
p, a {
font-size: 20px;
}
}
}
/** 编译后（ 转为CSS 语法输出） **/
#main {
width: 200px;
height: 100px;
background: #ddb92a;
}
#main .greenbox{
width: 100px;
height: 50px;
background: green;
}
#main .greenbox p, #main .greenbox a{
font-size: 20px;
}
除此之外，常用的属性也可以进行CSS「 嵌套属性」，比如：font-family、font-size、font-weight，会发现 font 多次出现。
还有常见的 background 系列，比如：background-color、background-position、background-size、background-image，都可以用嵌套功能，来节省开发时间，这边上代码，如下:
/** 编译前( sass语法) **/
.main {
font: {
family: Helvetica, sans-serif;
size: 15em;
weight: bold;
}
}
/** 编译后（ 转为CSS 语法输出） **/
.main {
font-family: Helvetica, sans-serif;
font-size: 15em;
font-weight: bold;
}
到目前，对嵌套功能应该有初步认识了，若之前有看过别人写的SASS / SCSS 档，应该会有种似曾相似的感觉吧
理解了它，接下来我们继续看SASS 还有什么特别的地方，可以让我们学习的…
如果想在嵌套状态下，取得外层的父选择器，那可以使用「 ＆ 」，它会直接抓父选择器给你用。
常会把它用在，如CSS 元件状态： :hover、:focus、:hover、:link、:visited 等…，或是 :before、:after ，这边上个代码，如下：
/** 编译前( sass语法) **/
#main {
display: block;
a {
color: #d0b95b;
&:hover, &:active, &:focus {
color: #a08106;
outline: none;
text-decoration: none !important;
}
}
}
/** 编译后（ 转为CSS 语法输出） **/
#main {
display: block;
}
#main a {
color: #d0b95b;
}
#main a:hover, #main a:active, #main a:focus {
color: #a08106;
outline: none;
text-decoration: none !important;
}
还有另一种用法，也常常看到，如下：
/** 编译前( sass语法) **/
#main{
&.color- 2 {
background: red;
&:before {
border: 1px solid #ccc;
}
}
&.color- 3 {
background: yellow;
&:before {
border: 1px solid blue;
}
}
}
/** 编译后（ 转为CSS 语法输出） **/
#main.color-2 {
background: red;
}
#main.color-2:before {
border: 1px solid #ccc;
}
#main.color-3 {
background: yellow;
}
#main.color-3:before {
border: 1px solid blue;
}
能抓到父选择器，是不是开发起来也方便多了呢？
一开始看到别人编写的SASS 时，觉得「 & 」的写法满酷的，后来才懂… 原来是这样运作呀
在我们实际编写CSS 的过程中，常会遇到多次相同的颜色、字型、字体大小等… 重复出现。
重复出现是好事，因为只要复制＋贴上就好了…但假如遇到哪天设计师/客户，需要修改就…(因为全都需要更改)
所以SASS 可以协助我们解决这问题，就如同JS 变量逻辑一样，只需改最源头的变量即可，其他所有引用该变量的地方，值都会自动更改。
SASS 中使用 $ 进行变量声明，支持7 种主要数据类型：
- 数字（如：
1,1. 5,20px）
- 字符串，带引号和不带引号（如：
"foo",'foo',foo）
- 颜色（如：
red,#28b0b4,rgba ( 0 , 0 , 0 , 0.5 )）
- 布尔值（如：
true,false）
- 空值（如：
null）
- 值列表（list），用空格或逗号分开（如：
2em 1em 0 1em、Helvetica, Arial）
- maps：从一个值映射到另一个（如：
( key1: value1, key2: value2 )）
这边来对比一下，使用SASS 开发的编译前（ SASS 语法） ＆ 编译后（ 转为CSS 语法输出）的程式码，如下：
/** 编译前( sass 语法) **/
$bnr-font: Helvetica, sans-serif;
$bnr-color: #494947;
.banner1 p {
font-family: $bnr-font;
color: $bnr-color;
padding: 10px 15px;
letter-spacing: 0.2 em;
}
.banner2 p {
font-family: $bnr-font;
color: $bnr-color;
margin: 15px;
}
/** 编译后（ 转为CSS 语法输出） **/
.banner1 p {
font-family: Helvetica, sans-serif;
color: #494947;
padding: 10px 15px;
letter-spacing: 0.2 em;
}
.banner2 p {
font-family: Helvetica, sans-serif;
color: #494947;
margin: 15px;
}
如此一来，当哪天收到需要更改某通用按钮颜色、通用字体字型… ，就可以直接更改变量即可，是不是很方便
SASS 扩展了CSS 的 @import 功能，允许在文件内导入其他的SASS 或SCSS 子文件。
在文件进行编译后，被导入的SASS 或SCSS 子文件，会全部合并到同一个CSS 文件，然后呈现出来。
常见的 .sass 或 .scss 导入
这边展示一下基本用法，我们把 _reset. scss 导入到 main. scss 中，直接上代码：
/** 编译前( sass 语法) **/
/** _reset.scss **/
html, body, ul, ol, a {
margin: 0 ;
padding: 0 ;
}
/** main.scss **/
@import ‘reset’ ;
body {
background: #a08106;
font-size: 16px;
}
/** 编译后（ 转为CSS 语法输出） **/
html, body, ul, ol, a {
margin: 0 ;
padding: 0 ;
}
body {
background: #a08106;
font-size: 16px;
}
小提醒：若有多个文件需汇入，可同时使用多个
@import引用文件，如下图
监听父文件即可
编写代码过程中，可以把不同样式区块的SASS 或SCSS 代码，拆开成不同独立的文件，然后使用 @import 把各片段文件，统整汇入到同一支 .sass 或 .scss 文件中，并监听这一支文件即可
在文件进行监听时，所有 @import 进来的 .sass 或 .scss 子文件，也同时被监听，所以当子文件有修改，父文件编译出的 .css 也会自动更新。
使用下划线，SASS 编译自动忽略
若有片段文件不需SASS 编译出新的CSS 文件，可在文件开头添加一个下划线，在编译过程中，系统就会忽略它，而只对开头无下划线的文件，进行新的CSS 文件生成。
上述的范例说明
看一下另一个范例，下面是bootstrap 的目录文件：
1.把多个scss 文件，使用
@import添加到bootstrap.scss中。
2.之后只需监听
--watch bootstrap.scss这一支文件即可，假如内部@import的文件有变更，都会在bootstrap.css 自动更新。
3.bootstrap.scss 文件内的
@import档案，不需要加下划线。
开头有下划线的文件，在执行sass 指令时，不会生成新的css 文件，系统会自动忽略。
4.
@importscss 片段文件，不用加上副档名也可以，系统会自动寻找同名的副档名.scss或.sass文件，并依序导入。
一般CSS @import 功能
@import 默认情况，会预设导入同名的 .sass 或 .scss 文件，但在以下情况下，仅当成一般的CSS @import 语句，不会导入任何的SASS 文件，如下：
- 如果文件的副档名是
.css：@import "foo.css";
- 文件名以
http ://开始：@import "http://foo.com/bar";
- 文件名是
url ()：@import url ( foo );
@import中包含媒体查询（media queries）
若是有重复的代码，会不断使用到，就可用混合指令（Mixin Directives），直接把样式封装成一个类名称，就可以重复调用，如下：
/** 编译前( sass 语法) **/
/** 定义mixin 指令**/
@mixin font-main {
font: {
family: Arial;
size: 16px;
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
总结一下这三次面试下来我的经验是：
-
一定不要死记硬背，要理解原理，否则面试官一深入就会露馅！
-
代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！
-
尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！
-
多刷面经！
我把所有遇到的面试题都做了一个整理，并且阅读了很多大牛的博客之后写了解析，免费分享给大家，算是一个感恩回馈吧，有需要的朋友【点击我】获取。祝大家早日拿到自己心怡的工作！
篇幅有限，仅展示部分内容
存中…(img-VOYC540h-1712954238931)]
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）
总结一下这三次面试下来我的经验是：
-
一定不要死记硬背，要理解原理，否则面试官一深入就会露馅！
-
代码能力一定要注重，尤其是很多原理性的代码（之前两次让我写过Node中间件，Promise.all，双向绑定原理，被虐的怀疑人生）！
-
尽量从面试官的问题中表现自己知识的深度与广度，让面试官发现你的闪光点！
-
多刷面经！
我把所有遇到的面试题都做了一个整理，并且阅读了很多大牛的博客之后写了解析，免费分享给大家，算是一个感恩回馈吧，有需要的朋友【点击我】获取。祝大家早日拿到自己心怡的工作！
篇幅有限，仅展示部分内容
2066
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
