SASS

SASS

概念

Sass（Syntactically Awesome Stylesheets）直译是语法牛逼的层叠样式表语言，是一个将脚本解析成CSS的脚本语言，即SassScript。用部分的Sass代码代替之前写的繁琐的CSS代码，能极大的提高编写CSS的效率。底层是由一个面向对象的编程语言ruby来编写的。

可以解决权重问题、样式的重复使用导致修改繁琐问题、有规律的代码编写繁琐问题，可以实现样式切换。

安装

两种方式

• 先安装ruby，再通过npm来安装Sass
• 利用VScode提供的插件easy sass来快速入门Sass

基础语法

使用

• Sass代码需放在以.sass或.scss为后缀的文件中。

• 在VScode中的 settings.json添加Sass文件转为CSS文件的相关配置代码。

  //保存scss代码后自动转为css代码
      "easysass.compileAfterSave": true, 
      //指定转为什么格式的css代码
      "easysass.formats": [
           //nested：嵌套缩进的 css 代码。
           //expanded：没有缩进的、扩展的css代码。
           //compact：简洁格式的 css 代码。
           //compressed：压缩后的 css 代码
          {
              "format": "expanded",
              "extension": ".css"
          },
          {
              "format": "compressed",
              "extension": ".min.css"
          }
      ],
  // css文件的存放目录，该路径是相对路径，相对于vscode的工作目录
      "easysass.targetDir": "css/"
  

  灵异事件，目录配置不生效，艹艹艹艹艹

嵌套

可以在标签样式代码里继续对其子标签设置样式，让css代码中标签层次也更加清晰明了， 解决了可能的权重问题。

SASS：

#box{
    color: yellow;
    p{
        color: blue;
        span{
            color: red;
        }
    }
    &:hover{
            color:green;
        p{
            color:darkred;
        }       
    }
}

转为CSS：

#box {
  color: yellow;
}
#box p {
  color: blue;
}
#box p span {
  color: red;
}
#box:hover{
    color:green;
}
#box:hover p{
    color:darkred;
}

变量

变量是一种存放css属性值的容器。一个变量可以保存一个样式属性值，定义的变量可以重复使用。解决了重复样式的繁琐修改问题。

1. 定义变量：

   $变量名 : css属性值;
   

2. 运用：

   css属性名: $变量名;
   

例子，Scss：

$bgColor:red;
header{
    barkground-color:$bgColor;
}
main{
    barkground-color:$bgColor;
}
footer{
    barkground-color:$bgColor;
}

转换为CSS：

header{
    barkground-color:red;
}
main{
    barkground-color:red;
}
footer{
    barkground-color:red;
}

混合

混合是Scss中的一个代码容器，能够包含一段CSS代码，混合可以重复使用，减少重复的CSS代码。

1. 定义混合

   @mixin 混合名{
       包含的css代码
   }
   

2. 使用混合

   @include 混合名();
   

例如：Scss：

@mixin center {
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
#box{
    @include center();
}

转换为CSS：

#box {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

分支

分支在生活中指的是同一个事情有多个选择。不同的事情不同的 选择会有不同的效果。在程序中，对数据的判断不同会执行不同的代码。类似if-else。

语法：

@if 要判断的条件 {
    //该条件满足要执行的css代码
}@else{
    //该条件不满足要执行的css代码
}

例子：

$theme:"lightgreen";
//判断变量theme保存的数据是否是lightgreen
@if $theme == "lightgreen" {
    //确实是田园绿主体
    background-color:green;
}@else{
     background-color:white;
}

循环

循环能够将带有规律性的重复CSS代码用简短的语法表示出来，避免了书写重复的代码。规律性是指可以使用数学表达式进行描述。

语法：

@for $变量名 from 开始数字  to  结束数字 {
    要循环执行的css代码，执行的次数是由开始数字和结束数字来决定，并且每重复执行一次，$变量名会从开始数字依次递增，递增到结束数字就结束for循环，
    在@for{}中，可以在#{}里使用变量
}

例子：Scss：

@for $index from 1 to 11 {
    #box div:nth-child(#{$index}){
        width: 200px + 50px * ($index - 1);
        height: 200px + 50px * ($index - 1);
        border:$index * 1px solid #000;
    }
}

转换为CSS：

#box div:nth-child(1) {
  width: 200px;
  height: 200px;
  border: 1px solid #000;
}
#box div:nth-child(2) {
  width: 250px;
  height: 250px;
  border: 2px solid #000;
}
/* .... */
#box div:nth-child(10) {
  width: 650px;
  height: 650px;
  border: 10px solid #000;
}

• from to 是左闭右开的。
• px和%不要混合计算