原理:
通過設定html的attribute屬性在封裝的函式中進行判斷，進行相應的設定不同的顏色
css中 [ ] 可以識別到在html標籤上設定的屬性，所以在html上對應屬性發生變化時，就會執行相應的樣式，
這一步有點類似於平時給div新增乙個.active屬性，css自動執行相應樣式。
1.首先切換的樣式檔案我們需要兩個
varibale.scss： 顏色，字型，背景的配置檔案
mixin.scss： 定義mixin方法的檔案。
下面貼出**:
varibale.scss
// 顏色，字型，背景的配置檔案
//顏色定義規範
$background-color-theme: #3f8e4d;//背景主題顏色預設
$background-color-theme1: red;//背景主題顏色1
$background-color-theme2: #652bf5;//背景主題顏色2
$background-color-theme3: deepskyblue;//背景主題顏色3
$background-color-themesec: #edc148;//背景次要主題顏色
$font-color-theme : #3f8e4d;//字型主題顏色預設
$font-color-theme1 : red;//字型主題顏色1
$font-color-theme2 : #652bf5;//字型主題顏色2
$font-color-theme3 : deepskyblue;//字型主題顏色3
$font-color-themesec : #edc148;//字型次要主題顏色
$font-color-shallow0 : #000;
$font-color-shallow1 : #111;
$font-color-shallow2 : #222;
$font-color-shallow3 : #333;
$font-color-shallow4 : #444;
$font-color-shallow5 : #555;
$font-color-shallow6 : #666;
$font-color-shallow7 : #777;
$font-color-shallow8 : #888;
$font-color-shallow9 : #999;
$font-color-shallowdb : #dbdbdb;
$background-image:url("~@/assets/images/001.png");
$background-image-theme1:url("~@/assets/images/002.png");
$background-image-theme2:url("~@/assets/images/003.png");
//字型定義規範
$font_little_s:10px;
$font_little:12px;
$font_medium_s:14px;
$font_medium:16px;
$font_large_s:18px;
$font_large:20px;
// 定義mixin方法的檔案。
@charset "utf-8";
@import "./varibale.scss";/*引入配置*/
@mixin font_size($size)
@mixin font_color($color)
[data-theme="theme2"] &
[data-theme="theme3"] &
}@mixin bg_color($color)
[data-theme="theme2"] &
[data-theme="theme3"] &
}@mixin bg_img($img)
[data-theme="theme2"] &
}/*px轉rem*/
@mixin px2rem($property,$px,$px2:false,$px3:false,$px4:false): ($px / $rem) + rem ($px2 / $rem) + rem ($px3 / $rem) + rem ($px4 / $rem) + rem;
} @else if $px and $px2 : ($px / $rem) + rem ($px2 / $rem) + rem;
//[data-model='pad'] & : ($px * 1.4 / $rem) + rem ($px2 * 1.4 / $rem) + rem;}
} @else: ($px / $rem) + rem!important;
//[data-model='pad'] & : ($px * 1.4 / $rem) + rem;} }}
/*根據dpr計算font-size*/
@mixin font-dpr($font-size)
[data-dpr="2"] &
[data-dpr="3"] & }
/*超行溢位顯示省略號*/
@mixin overflow($num:1,$fontsize:0,$lineheight:1.5)
height: $num * $fontsize * $lineheight;
[data-dpr="2"] &
[data-dpr="3"] &
}}
vue元件
aaaa
所以需要每次在載入時重新設定:main.js 新增設定
window.document.documentelement.setattribute('data-theme', localstorage.getitem('data-theme')?localstorage.getitem('data-theme'):'')如何使用sass
sass 是一門高於 css 的元語言，它能用來清晰地 結構化地描述檔案樣式，有著比普通 css 更加強大的功能。sass 能夠提供更簡潔 更優雅的語法，同時提供多種功能來建立可維護和管理的樣式表。sass 和 scss 其實是同一種東西，我們平時都稱之為 sass，兩者之間不同之處有以下兩點 副檔...
在Vue中使用Sass
sass 是什麼？sass又稱scss，它是css預處理之一。它在css語法的基礎上增加了變數 巢狀 混合巨集 繼承 佔位符等等高階功能。那什麼是css預處理器呢？簡單理解就是,css預處理是一種專門的程式語言，通過該語言進行web頁面設計，然後再編譯成正常的css檔案，以供專案使用。css預處理器...
vue中如何引用全域性的sass公共樣式
vue中如何引用全域性的sass公共樣式 sass擁有比其他任何css擴充套件語言更多的功能和特性。一次又一次地，行業把sass作為首選css擴充套件語言。在vue專案開發中你會發現，通過main.js 全域性引入的.scss 在.vue檔案中不能使用，那如何去解決這個問題呢？下面有兩種解決方法，可...