亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

【金秋打卡】第15天 sass 使用

標簽:
Vue.js

课程名称:基于Vue3最新标准,实现后台前端综合解


课程章节: 第一章


课程讲师:Sunday


课程内容

    https://img1.sycdn.imooc.com//636865170001b8fd08000404.jpg


整个页面被分为三个部分。

layout/components/Sidebar/index.vue

layout/components/Navbar.vue

layout/components/AppMain.vue


需要分别创建这三个vue文件


之后在layout/index 引入

<template>
  <div class="app-wrapper">
    <!-- 左侧 menu -->
    <sidebar
      id="guide-sidebar"
      class="sidebar-container"
    />
    <div class="main-container">
      <div class="fixed-header">
        <!-- 顶部的 navbar -->
        <navbar />
      </div>
      <!-- 内容区 -->
      <app-main />
    </div>
  </div>
</template>
<script setup>
    import Navbar from './components/Navbar'
    import Sidebar from './components/Sidebar'
    import AppMain from './components/AppMain'
</script>


之后需要在 styles下创建三个css


variables.scss : 定义常量

mixin.scss :定义通用的 css

sidebar.scss:处理 menu 菜单的样式

// sidebar
$menuText: #bfcbd9;
$menuActiveText: #ffffff;
$subMenuActiveText: #f4f4f5;
$menuBg: #304156;
$menuHover: #263445;
$subMenuBg: #1f2d3d;
$subMenuHover: #001528;
$sideBarWidth: 210px;

:export {
  menuText: $menuText;
  menuActiveText: $menuActiveText;
  subMenuActiveText: $subMenuActiveText;
  menuBg: $menuBg;
  menuHover: $menuHover;
  subMenuBg: $subMenuBg;
  subMenuHover: $subMenuHover;
  sideBarWidth: $sideBarWidth;
}


设置好的 css 就能通过js得方式 在页面使用

<template>

    <!-- 左侧 menu -->
    <sidebar
      class="sidebar-container"
      :style="{ backgroundColor: variables.menuBg }"
    />

</template>

<script setup>
import variables from '@/styles/variables.scss'
</script>


比如这样 但是在 新版本中 需要修改 

variables.scss

得名字改为variables.module.scss即可解决,因为@vue/cli的版本号> 5.0.0

https://img1.sycdn.imooc.com//6368665b0001d9d207680750.jpg



點擊查看更多內容
TA 點贊

若覺得本文不錯,就分享一下吧!

評論

作者其他優質文章

正在加載中
Web前端工程師
手記
粉絲
27
獲贊與收藏
19

關注作者,訂閱最新文章

閱讀免費教程

  • 推薦
  • 評論
  • 收藏
  • 共同學習,寫下你的評論
感謝您的支持,我會繼續努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦
今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與 放棄機會
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號

舉報

0/150
提交
取消