sass（预编译css）

sass

在我们书写css的时候 我们会发现重复性代码太多 对应的产生了预编译css（最终会编译成css文件），常用的预编译css有什么？

预编译css

1.sass （源码使用ruby写的 基于python环境运行）

2.less （诞生比sass要晚 整体语法跟sass差不多）

3.styus

概述

sass是 世界上最成熟、最稳定、最强大的专业级CSS扩展语言！

特性

1.兼容CSS （在sass文件里面可以直接书写css）

2.支持后缀名为sass（他没有{}以及;） 以及 scss（scss常用 这个跟css书写差不多）

3.社区成熟 （api众多）

sass入门

入门环境

1.安装node （基于node环境运行）

2.使用专门的编译工具 进行在线编译运行

3.使用插件编译运行

1.使用vscode下载插件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yRjqz6ZC-1650630603055)(C:\Users\29769\AppData\Roaming\Typora\typora-user-images\image-20220421165742985.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IrmrEoBi-1650630603056)(C:\Users\29769\AppData\Roaming\Typora\typora-user-images\image-20220421170229030.png)]

2.配置环境（指定的路径需要直接创建）

{
    "workbench.iconTheme": "material-icon-theme",
    "material-icon-theme.showWelcomeMessage": false,
    "editor.fontSize": 18,
    "emmet.triggerExpansionOnTab": true,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "workbench.startupEditor": "none",
    "explorer.confirmDelete": false,
    "bracketPairColorizer.depreciation-notice": false,
    "editor.mouseWheelZoom": true,
    "easysass.compileAfterSave": true,
    "easysass.formats": [
        {
        "format": "expanded",
        "extension": ".css"
        },
        {
        "format": "compressed",
        "extension": ".min.css"
        }
    ],
    "easysass.targetDir": "./css"
    }

使用

变量声明

$变量名:值;

$a:'red';//变量声明
// 变量声明 注释 这个注释不会到css里面的
/* hello 会生成到css里面去 */
div{
    background-color: $a;
    font-size: 16px;
    color: $a;
}
//生成的内容
@charset "UTF-8";
/* hello 会生成到css里面去 */
/*!* hello */
div {
  background-color: "red";
  font-size: 16px;
  color: "red";
}

嵌套（无限嵌套）

div{
  color:red;
  a{
  	font-size:16px
  }
}
//生成内容
div {
  color: red;
}
div a {
  font-size: 16px;
}

&

//&
div{
    color:red;
    &:hover{
        color: blue;
    }
}
//生成的内容
@charset "UTF-8";
/* hello 会生成到css里面去 */
div {
  color: red;
}
div:hover {
  color: blue;
}

支持运算

$count:50;
div{
    font: $count%2+'px';
}
//生成的内容
@charset "UTF-8";
/* hello 会生成到css里面去 */
div {
  font: "0px";
}

支持判断

p {
    @if 1 + 1 == 2 { border: 1px solid; }
    @if 5 < 3 { border: 2px dotted; }
    @if null  { border: 3px double; }
}
//生成的css
@charset "UTF-8";
/* hello 会生成到css里面去 */
p {
    border: 1px solid;
}

混入器 @mixin @includ

@mixin  border($width,$color) {
    border: $width solid $color;
}
p{
    @include border(1px,red)
}
div{
    @include border(1px,blue)
}
//生成的内容
@charset "UTF-8";
/* hello 会生成到css里面去 */
p {
  border: 1px solid red;
}

div {
  border: 1px solid blue;
}

指定默认参数

//指定默认参数值
@mixin  border($width:1px,$color:red,$line:solid) {
    border: $width $line $color;
}
p{
    @include border(1px,red,"double")
}
div{
    @include border(1px,blue)
}
h1{
    @include border(1px,blue)
}
img{
    @include border()
}
//生成内容
@charset "UTF-8";
/* hello 会生成到css里面去 */
p {
  border: 1px "double" red;
}

div {
  border: 1px solid blue;
}

h1 {
  border: 1px solid blue;
}

img {
  border: 1px solid red;
}

继承 @extend

//指定默认参数值
@mixin  border($width:1px,$color:red,$line:solid) {
    border: $width $line $color;
}
p{
    @include border(1px,red,"double")
}
div{
    //继承了p标签
    @extend p
}
//生成的内容
@charset "UTF-8";
/* hello 会生成到css里面去 */
p, div {
  border: 1px "double" red;
}

导入对应的scss以及sass文件以及css文件

@import "./a.scss";
p{
    @include border(1px,red,"double")
}

)
}
div{
//继承了p标签
@extend p
}
//生成的内容
@charset “UTF-8”;
/* hello 会生成到css里面去 */
p, div {
border: 1px “double” red;
}

##### 导入对应的scss以及sass文件以及css文件

```css
@import "./a.scss";
p{
    @include border(1px,red,"double")
}