维基百科

https://zh.wikipedia.org/wiki/Sass

Sass（英文全称：Syntactically Awesome Stylesheets）

是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的类 CSS 语言。

发行时间：2007年
稳定版本：2016年3月28日

Sass 十分简洁，语法中几乎不含括号。
后来前端工程师表示不含括号看不懂，于是 Sass 的开发者又提供了 Scss，含括号。
弱弱的前端工程师终于表示能看懂了。

Sass的官方解释器是开源的并且用Ruby语言写成，但是也有用PHP、C语言、Java等实现的版本（C语言版本叫做llibSass，Java语言版本叫做JSass）。

SassScript提供以下功能：变量、嵌套、混入（Mixin）、选择器继承等。

开始上手

• 嵌套选择器

• 变量

• mixn

• placeholder

---

1.安装和运行

创建html和sass文件

但是html并不会直接解析sass文件，所以我们需要工具来转换~(不愿意折腾的小伙伴也可以进入 JsBin 或者 CodePen 在线体验scss哦~)

首先初始化目录

npm init -y

为了便于配置和打包，我们使用parcel(代替webpack)

npm i -D parcel

运行

npx parcel index.html // 会自动安装node-sass
// 如果此步出错，请自行搜索错误

成功在html使用scss！

变量

// scss文件
$red: red;
h1 {
  color: $red;
}

嵌套选择器

// 以往的css文件写法
.nav {
  boder: 1px solid red;
} 
.nav > ul {
  background: green;
}
.nav > ul > li {
  border: 1px solid blue;
}


// scss写法
$border-width: 1px;
.nav {
  border: $border-width solid red;
  > ul {
    background: green;
    > li {
      border: $border-width solid blue;
    }
  }
}

mixin

基本用法
把一堆共用样式写进一个函数里

// css写法
.nav {
  border: 1px solid red;
  > ul {
    background: green;
    > li {
       width: 300px;
       // 好大一块相同的css
       border: 1px solid red;
       background: red;
       border-radius: 50%;
       height: 200px;
    }
  }
}
.demo {
  width: 400px;
  // 好大一块相同的css
  border: 1px solid red;
  background: red;
  border-radius: 50%;
  height: 200px;
}


// scss写法
$border-width: 1px;
@mixin publicFn {
  border: 1px solid red;
  background: red;
  border-radius: 50%;
  height: 200px;
}

.nav {
  border: $border-width solid red;
  > ul {
    background: green;
    > li {
      width: 300px;
      @include publicFn;
    }
  }
}
.demo {
  width: 400px;
  @include publicFn;
 }

高级用法
既然是函数，就可以传值进去

// scss文件
$border-width: 1px;
@mixin borderFn($border-color: red) { // 也可以设置默认值
  border: 1px solid $border-color; 
  ...
}

.nav {
  border: $border-width solid red;
  > ul {
    background: green;
    > li {
      @include borderFn(blue); // 等同于 border: 1px solid blue;...
    }
  }
}

placeholder

用途和mixin差不多，用于处理大段相同css代码

当我们使用mixin时。但是我们只写了一次代码，但是页面中却写了很多次，所以我们可以看到include只机械的拷贝了代码，这是mixin的问题，所以发明了placeholder带来更好的体验！

重复！

现在我们使用placeholder
简单的把mixin改成%号，include改成extend

$border-width: 1px;
%publicFn {
  border: 1px solid red;
  background: red;
  border-radius: 50%;
  height: 200px;
}

.nav {
  border: $border-width solid red;
  > ul {
    background: green;
    > li {
      width: 300px;
      @extend %publicFn;
    }
  }
}
.demo {
  width: 400px;
  @extend %publicFn;
 }

只写一次！

了解scss这四个基本功能以后，基本已经入门了(等着加工资把😁😁)。