scss使用總結

scss使用總結

前言

less 和 sass 是兩種 css 預編譯語言，其目的是爲了更快、更結構的編寫 css 文件，是一種強大的 css 編譯語言，都能使用 變量、運算符、判斷、方法等等。
先有的 sass 後有的 scss， scss 比 sass 寫法更嚴謹

scss中的& 代指父類， 其樣式的優先級和不用&的優先級一樣，

.icon {
    &:hover {
    /* :hover 樣式 */
    }
    & .icon-text {
    
    }
}

一. ccss中的變量： $

$變量名： 變量值

在scss中的變量是以$開頭的，可以自定義相應的顏色， 長度等。
但是， csss定義的變量也是有作用域的， 內部聲明的變量只能在內部使用。
在變量後添加 !global 就可以使內部的變量在外部使用

<style lang="scss" scoped>
  $white: #FFFFFF;
  $green: #5A8DF7;
  //$blake: #444444;
  .test-container {
    height: 10px;
    width: 20px;
    /*background-color: red;*/
    & .text {
      /*background-color: #79C431;*/
      $blake: #444444 !global;
    }
    .text {
      width: 100%;
      height: 100%;
      background-color: $blake;
    }
  }
</style>

但是即使添加了！global， 作用域也最多隻能在這個style標籤中。

但是我們有的時候需要全局來定義一些scss的變量來方便我們的使用，

如何在vue-cli3 中應用scss全局變量？

首先需要安裝一個開發插件：sass-resources-loader

npm i sass-resources-loader --save-dev

然後在我們的src/assets/styles 目錄下新建_variable.scss

定義我們的變量
然後在我們的vue.config.js中添加配置

const webpack = require("webpack");
module.exports = {
  assetsDir: '',
  publicPath: '/room/',
  productionSourceMap: process.env.ENV_VAR !== 'production',
  css: {
    sourceMap: process.env.ENV_VAR !== 'production',
    loaderOptions: {
      sass: {
        data: `
          @import "~@/assets/styles/_variable.scss";
        `
      }
    }
  },
}

然後就可以在每個組件直接使用了

嵌入字符串

#{ 變量 }
類似 ES6 中模板字符串中的${ 變量 }
#{} 中是可以插入任意東西的，這裏只用到了插入變量，還可以插入方法等

<style lang="scss" scoped>
  $white: #FFFFFF;
  $green: #5A8DF7;
  //$blake: #444444;
  $commonWidth: 44;
  .test-container {
    height: #{$commonWidth}px;
    width: 20px;
    /*background-color: red;*/
    & .text {
      /*background-color: #79C431;*/
      $blake: #444444 !global;
    }
    .text {
      width: 100%;
      height: 100%;
      background-color: $theme-color;
    }
  }
<style>

@import 功能

可以使用@import將多個文件結合在一起， 有了這個功能就可以拆分scss 文件， 更加結構化， 便於維護。
需要注意的是: 拆分成多個文件的時候，以 _開頭命名的文件，不會被像 phpStorm 中的 file watcher 自動預編譯成css文件，less 沒有這效果，在這一點上 scss 很不錯。