使用Sass编写动态星空效果（css工程化的宏观认识）

---

前言

前端工程化的今天，开发过程中，原生css的功能已经略显单薄，比如它不支持循环、判断、拼接等语法，不支持自定义函数。于是css预编译器应用而生，例如：sass、less、stylus,我们结合css预编译器sass来了解前端工程化中css的相关内容。

一、初识sass

1.什么是sass

众所周知css并不能算是一们真正意义上的编程语言，它本身无法未完成像其它编程语言一样的嵌套、继承、设置变量等工作。为了解决css的不足，开发者们想到了编写一种对css进行预处理的“中间语言”，可以实现一些“编程”语言才有的功能，然后自动编译成css供浏览识别，这样既一定程度上弥补了css的不足，也无需一种新的语言来代替css以供浏览器识别。于是css预处理语言SASS就应运而生了。

——摘自sass官网

2.sass部分语法介绍

• 变量创建
  ——语法与css比较类似，关键点在于sass变量必须以“$”符开头。为什么用“$”？因为它好认、更具美感。是的，没人不喜欢dollar。💕

  $color: #F90;
  nav {
       
       
    color: $color;
    width:100%;
    height:70px;
  }
  

• 样式嵌套
  ——编写css时，为了选中某个元素的后代元素，我们常会将其选择器书写多遍：

  .view p{
       
       
  
  }
  .view p span{
       
       
  
  }
  .view:hover{
       
       
  
  }
  

  sass允许以嵌套形式书写样式代码，减少重复书写，增加可读性。我们来用sass优化上面的css代码：

  .view {
       
       
      p {
       
       
          span {
       
       }
      }
  
      &:hover {
       
       }//&符号等价于父级选择器的表示符，在书写伪类样式时常用
  }
  

• 循环
  ——利用@for 指令可以在限制的范围内重复输出格式,减少代码的重复书写：

  @for $i from 1 through 3 {
       
       
      .item-#{
       
       $i} {
       
       
          width: 10px * $i;
      }
  }
  
  
  //上面的代码将被编译为
  .item-1 {
       
       
    width: 10px;
  }
  
  .item-2 {
       
       
    width: 20px;
  }
  
  .item-3 {
       
       
    width: 30px;
  }
  
  /*# sourceMappingURL=a.css.map */
  

• ……

3.简单使用sass

1. 安装sass

   控制台执行：npm install -D sass

2. 创建a.scss文件写入如下代码：

   $bgColor:#f40;
   body{
        
        
       background-color: $bgColor;
   }
   

3. 编译为css

   控制台执行：npx sass a.scss a.css

   此时代码目录里已经自动创建出了a.css,它的内容如下：