写在前面
现在很多招聘信息上都要求会scss,sass,less等预处理语言。这些语言确实比CSS用起来效率更高、更爽一些。如果你也是scss的小白，希望这篇文章可以给你一定的参考~
注： 本篇文章默认你已经下载了gitbash、nodeJS
1.什么是scss？scss和sass的关系
2.如何使用scss
3.scss常用功能
——————————————————————————
1.什么是scss？scss和sass的关系
首先介绍一下Sass:
Sass是类css语言，语法十分简练，几乎不含{ }。 可以简单理解为去掉分号、冒号、大括号的css。但是有一些弱鸡前端攻城狮表示不用{ }看不懂，于是Sass的开发者在此基础上又提供了Scss,含括号的，然后那些弱鸡前端攻城狮表示能看懂了 - -。
sass中文网 https://www.sasscss.com/docs/#css-extensions
Scss和Sass的关系：
可以简单理解成scss是sass的一个升级版本，它完全兼容Sass之前的功能。语法形式上有些不同，最主要的就是sass是靠缩进表示嵌套关系，scss是靠花括号，并且里面可以嵌套元素
//下面代码是sass 通过缩进表示嵌套关系
.parent
height 100px
.child
height 50px
// 下面是scss 含有{ }的
.parent{
width:100px;
.child{
width:50px; //表示 .parent下的.child
}
}
为什么要学习sass
因为他们有很强大的功能：支持变量、嵌套、混入（Mixin）、选择器继承等（后面会讲）。他们比传统的css 用起来更有效率，所以如果你是个有追求的前端一定要学习它。
2.如何使用scss
创建一个目录 新建index.html 和 style.scss 然后让html通过Link标签引入style.scss
编辑style.scss
body{
h1{
color:red
}
}
用GitBash 输入以下命令
npm init -y
npm i -D parcel
npx parcel index.html
之后打开这个网址，就可以看到效果了
image.png
3.scss常用功能（嵌套选择器、变量）
1.嵌套选择器
.nav{
border: 1px solid red;
> ul{
background: #000;
> li{
border: 1px solid green
}
}
}
2.变量
$grey: #666;
$gray: $grey;
$border-width: 2px;
.nav{
border: 1px solid $gray;
> ul{
background: #000;
> li{
border: $border-width solid green;
}
}
}
3.混入 mixin
$grey: #666;
$gray: $grey;
$border-width: 2px;
@mixin debug{
border: 1px solid red;
}
.nav{
@include debug;
> ul{
background: #000;
> li{
border: $border-width solid green;
}
}
}
传入参数
$grey: #666;
$gray: $grey;
$border-width: 2px;
@mixin debug($border-color){
border: 1px solid $border-color;
}
.nav{
@include debug(red);
> ul{
background: #000;
> li{
border: $border-width solid green;
}
}
}
默认参数
$grey: #666;
$gray: $grey;
$border-width: 2px;
@mixin debug($border-color:red){
border: 1px solid $border-color;
}
.nav{
@include debug;
> ul{
background: #000;
> li{
border: $border-width solid debug(green);
}
}
}
简写
@mixin box{
...
}
@include box
可以简写为
%box{
...
}
@extend %box
