css的扩展语言sass 在vue中的使用方法
begin enjoy👇

sass

sass 是一种css的扩展语言,完全兼容css。sass的最大特点就是引入变量,变量的引入大大的提高了代码的复用性。


基于vue-lic的sass环境搭建

  1. 创建基于webpack 的项目模板 vue init webpack sass-demo

  2. 查看是否有解析.scss文件的依赖:

     {
         "devDependencies": {
             "sass-loader": "^7.2.0",
             "node-sass": "^4.0.0"
         }
     }
    

    以上两个模块负责将 .scss文件编译成 .css

  3. 如果没有 在项目根目录执行以下命令安装这两个模块。
    npm install sass-loader node-sass --save-dev

使用 sass

  1. 创建.scss文件src/assets/style/main.scss

    // 声明变量
    $nav-color: #f90;
    // 使用变量
    h2{background: $nav-color;}
    

    sass有两种后缀名文件:.sass:不使用大括号和分号;.scss :类似平时写的 css 文件格式差不多,使用大括号和分号。建议使用 .scss

  2. 组件中引入 sass文件components/HelloWorld.vue

    <template>
      <div class="hello">
        <h2>Essential Links</h2>
        <h3>hello sass</h3>
      </div>
    </template>
    
    <script>
    export default {
    };
    </script>
    
    <style lang="scss" scoped>
    /* 引入外部scss */
    @import "../assets/style/main.scss";
    // 使用 main.scss文件中的变量
    h3{background: $nav-color;}
    </style>
    

    要使用sass必须在style 标签中设置 lang='scss' @import 以外部文件的形式引入scss样式,当然也可以在 <style lang='scss'> 标签中写 sass 。


变量

  • 变量声明:变量声明使用$

  • 变量赋值:任何css属性值的赋值都可以作为变量的赋值。

  • 变量的作用域:变量可以定义在规则块外部。当变量定义在css规则块内,那么该变量只能在此规则块内使用也可以理解为局部变量。

  • 变量的使用:变量在使用时使用$变量名。

    // 定义变量
    $my-color: #f90;
    $my-fontSize:38px;
    $my-font: "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica;
    $my-border:1px solid red;
    // 使用变量
    h2{
        background: $my-color;
        font-family: $my-font;
        font-size: $my-fontSize;
        border:$my-border;
    }
    

    变量先声明再使用


posted @ Zycin (非转载 来自个人学习资料整理)