CSS的晋级赛

光太郎
394 阅读3分钟

本篇主要是讲解记录一下自己对SASS的学习

带入几个问题：

  • 什么是SASS
  • 怎么使用
  • SASS与CSS有啥区别

一、什么是SASS

官网首页介绍： 世界上最成熟、最稳定、最强大的专业级CSS扩展语言

阮一峰老师的介绍： SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。

简单来说就是使用SASS 可以让你的开发变得更快更简单。

  1. Sass 是一款强化 CSS 的辅助工具，完全兼容CSS3。
  2. 它在 CSS 语法的基础上增加了 变量(variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能。

二、怎么使用

安装

使用之前学习的npm进行安装

npm i sass

使用

该程序是一个vite创建的vue项目中进行的一个Demo，项目创建之后会生成一个index.vue文件

  1. 先创建一个index.scss文件。

  2. 在一般vue项目中如果是.vue结尾的文件可以直接导入。

    <style lang="scss" src="/src/css/index.scss"></style>

  3. 语法判断

    1. sass 有两种语法，我通常使用scss语法，那么文件就以scss为后缀。

  4. 简单使用

image.png

  1. 先编写一段html。

    <template>
  <div class="overlay">
    <dialog>
      <article>
        <header>
          <strong>规则说明</strong>
        </header>
        <main>
          <p>
            规则详细说明。
          </p>
          <br>
        </main>
        <footer>
          <button>确定</button>
        </footer>
      </article>
    </dialog>
  </div>
</template>

  2. 开始编写我们的scss，基本上与css相同。

    看不懂先别慌，下面都有讲解。

    1. index.scss

      @import "/src/css/common";
$font-color: #868686;

.overlay {
  @include overlay;

  dialog {
    display: flex;
    justify-items: center;
    align-content: center;
    flex-flow: column;
    position: relative;
    width: 860px;
    min-height: 834px;
    background-color: #ffffff;
    border-radius: 30px;
    border: 0;
    margin: 60px;
    text-align: left;

    article {
      padding: 55px;

      header {
        font-size: 48px;
        color: #36373e;

      }

      main {
        margin-top: 57px;
        font-size: 36px;
        color: $font-color;
      }

      footer {
        button {
          width: 100%;
          height: 110px;
          background-color: #ffe17c;
          border-radius: 18px;
          border: 0;
          color: #d08000;
          outline: none;
          &:hover{
            background-color: #45b6ff;
            color: #1c4a68;
          }
          font: {
            size: 46px;
         weight: bold;
          };
     }
      }
    }
  }
}

    2. common.scss文件

      @mixin overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
 }

  3. scss文件内容详解

    1. 变量$

      变量以美元符号开头，赋值方法与 CSS 属性的写法一样

       // 定义
    $font-color: #868686;

// 使用
 main {
        margin-top: 57px;
        font-size: 36px;
        color: $font-color;
 }

    2. 嵌套规则

      Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。

      这样很适合阅读，避免了重复输入父选择器，令复杂的 CSS 结构更易于管理。

       article {
      padding: 55px;
     header {
        font-size: 48px;
        color: #36373e;
        }
 }

    3. 父选择器 &

      & 将被替换成嵌套外层的父选择器。

      & 必须作为选择器的第一个字符。

       button {
     width: 100%;
     height: 110px;
     background-color: #ffe17c;
     border-radius: 18px;
     border: 0;
     color: #d08000;
     outline: none;
     font-size: 46px;
     &:hover{
        background-color: #45b6ff;
        color: #1c4a68;
     }
   }
    1. 属性嵌套
    button {
  font: {
    size: 46px;
       weight: bold;
     };
   }

编译为

  ```scss
     button {
       font-size: 46px;
       font-weight: bold;
  }
  ```

  5. 注释

     > SASS共有两种注释风格。
     > 借用老师的话：
     > 标准的CSS注释 /* comment */ ，会保留到编译后的文件。
     > 单行注释 // comment，只保留在SASS源文件中，编译后被省略。
     > 在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

     ```scss
     // 单行注释
     /*!
     重要注释
     */
      ```
  
  6. `@import`功能
  
     > 顾名思义就是导入其他 `SCSS `或 `Sass` 文件。
     >
     > 被导入的文件将合并编译到同一个 `CSS `文件中，被导入的文件中所包含的变量或者混合指令 (`mixin`) 都可以在导入的文件中使用。
     > Sass 允许同时导入多个文件

     ```scss
      @import "/src/css/common";
     ```

  7. 混合指令 `Mixin `

     > 混合指令（`Mixin`）用于定义可重复使用的样式，避免了使用无语意的 class。

  8. 定义混合指令 `@mixin`

     ```scss
     @mixin overlay {
       display: flex;
       align-items: center;
       justify-content: center;
       position: fixed;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       z-index: 10;
       height: 100vh;
       background: rgba(0, 0, 0, 0.5);
     }
      ```

9. 运算功能

  ```scss
     p {
       width: 1px + 8px;
       font: 10px/8px;
     }
  ```

  10. 判断 `@if`

     > 和`js`中使用的 if-else是一样的道理，我还没有实战中用过
      
     ```scss
     $type: monster;
     p {
       @if $type == ocean {
         color: blue;
    } @else if $type == matador {
         color: red;
       } @else if $type == monster {
         color: green;
       } @else {
         color: black;
       }
     }
  ```
  
  11. 循环 `@for`
  
      > 也和`js`中使用的` for in `是一样的道理，**`没用过`**，哈哈哈
  
      ```scss
      @for $i from 1 through 3 {
        .item-#{$i} { width: 2em * $i; }
      }
      
      /*
      同理
      for (i = 1; i <= 3; i++) {
          console.log(`item-${i}: {width: 2em * ${i}}`);
      }
      */
      
      // 编译后
      .item-1 {
        width: 2em; 
      }
      .item-2 {
        width: 4em; 
      }
      .item-3 {
        width: 6em; 
      }
      ```

  12. 函数指令
  
      > 自定义函数，并能在任何属性值或 Sass script 中使用
      >
      > 与 `vue2`中定义函数，在模板中使用没有区别
  
      ```scss
      // 语法
      @function 名字(参数1，..){
      }
      // 使用 
      @function grid-width($n) {
        @return $n * 2px;
      }
      
      p{
          width: grid-width(5px);
      }
      // 编译之后
      div {
        width: 10px;
      }
      ```

三、SASS、CSS的区别

  1. 后缀的区别。
  2. Sass完全兼容所有版本的CSS。
  3. Sass拥有比其他任何CSS扩展语言更多的功能和特性。
  4. SCSS则是SASS的一种特殊类型的文件，用于为浏览器组装CSS样式表。
  5. CSS是任何浏览器都可以用来设置网页样式的样式语言
  6. 编写SCSS之后编译为CSS，就这样的关系。

结语

我是幸福部长，我在学SASS，这是一个前端工程师必学的东西，简化你的工作，提升你的技术，反正学就完了，卷死他们。

SASS是成熟、稳定、强大的CSS预处理器，想要晋升高级程序员的必备知识，也不难，只需要一至两小时轻松掌握。

avatar
文章
阅读
粉丝