Vue CSS變量解析

一、VueCSS變量的介紹

在我們使用Vue開發時，經常會用到CSS，而Vue3.0中加入了CSS變量，相信很對開發者會對此感到好奇，那到底什麼是VueCSS變量呢？CSS變量也稱自定義屬性，它是一種聲明復用值的方法，具體來說就是我們可以聲明一個變量，並將值賦給它，然後在其他組件或元素中使用這個變量作為樣式值。 這樣，在多個組件（元素）中多次引用相同值的情況下，只需要在被引用的地方更新一次變量的值，那麼全部引用這個變量的元素都將應用新值。

二、VueCSS變量的使用

使用VueCSS變量的好處大家已經了解，下面我們就來學習如何使用VueCSS變量。在Vue3.0中，使用CSS變量很簡單，我們可以通過在CSS文件中，使用”–“定義一個變量，然後在需要使用該值的地方，用”var()”表示這個變量即可。

:root {
  --primary-color: #6f42c1;
}

.button {
  background-color: var(--primary-color);
}

在上面的代碼中，我們定義了一個名為”primary-color”的變量，然後在button按鈕的背景色中使用該變量。如此一來，我們只需要在根元素中更新一次primary-color的值即可，所有使用該變量的組件都會自動應用新值。

三、VueCSS變量的作用域

對於作用域，我們都知道CSS中默認情況下是全局作用域，但是在Vue3.0中，CSS變量受到組件封裝的影響，其作用域僅限於當前組件，以及由當前組件引入的所有子組件。這就避免了所謂的”Cascading Style Sheet”形式的污染問題，減少了潛在的樣式衝突。

四、VueCSS變量的例子

最後，我們來看一個完整的例子，以使用CSS變量製作一個深色主題和淺色主題的按鈕為例：

// 父組件

  {{ currentTheme }}
  



import Child from './components/Child.vue'

export default {
  name: 'App',
  data() {
    return {
      isDark: true
    }
  },
  components: {
    Child
  },
  computed: {
    currentTheme() {
      return this.isDark ? 'Switch to Light Theme' : 'Switch to Dark Theme'
    }
  },
  methods: {
    toggleTheme() {
      this.isDark = !this.isDark
      document.documentElement.setAttribute('data-theme', this.isDark ? 'dark' : 'light')
    }
  }
}


// 子組件

  Click Me



button {
  color: var(--text-color);
  background-color: var(--bg-color);
  border: none;
  padding: 16px 24px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

:root {
  --bg-color: #f5f5f5;
  --text-color: #333333;
  --bg-color-dark: #333333;
  --text-color-dark: #ffffff;
}

[data-theme='dark'] {
  --bg-color: var(--bg-color-dark);
  --text-color: var(--text-color-dark);
}

在上面的代碼中，我們定義了一個名為”bg-color”的變量，用於控制按鈕背景顏色，以及一個名為”text-color”的變量，用於控制文字顏色。在根元素上添加了一個”data-theme”屬性，判斷當前是否是深色主題，如果是，就使用”–bg-color-dark”和”–text-color-dark”替換原來的變量值。

五、總結

VUE CSS變量作為一個很好的優化方案，可以減少開發過程中的樣式代碼量，提高代碼的可讀性和可維護性，既方便了我們的開發，又提供了很好的擴展性。另外，CSS變量的作用域機制也為我們避免了一些潛在的樣式污染問題。因此，我們在開發中儘可能多的使用Vue CSS變量可以幫助我們更高效的完成開發任務。