CSS 预处理器 | Quasar Framework

为什么捐赠

API 浏览器

如何贡献

选项与辅助工具

样式与标识

布局与栅格

Vue 组件

Vue 指令

Quasar 插件

Vue 组合式函数

安全

Quasar CLI（Vite 版）

Quasar CLI（Webpack 版）

SPA 模式

SSR 模式

PWA 模式

开发移动应用

Capacitor 模式

Cordova 模式

Electron 模式

浏览器扩展模式

Ajax 请求

开放开发服务器到公网

Icon Genie CLI

应用扩展

Quasar 工具函数

联系站长

Quasar CLI with Webpack - @quasar/app-webpack

CSS 预处理器

Quasar CLI 中提供了开箱即用的 Sass 或 SCSS 支持,不需要额外安装库或扩展 Webpack 配置。

用法

您的 Vue 文件可以通过 <style> 标签来包含 Sass/SCSS 代码。

<!-- 注意 lang="sass" -->
<style lang="sass">
  div
    color: #444
    background-color: #dadada
</style>

<!-- 注意 lang="scss" -->
<style lang="scss">
  div {
    color: #444;
    background-color: #dadada;
  }
</style>

当然标准的 CSS 也是支持的：

<style>
  div {
    color: #444;
    background-color: #dadada;
  }
</style>

变量

Quasar 也提供了一些可以直接使用的变量（如: $primary, $grey-3, …）,关于更多信息，请参考：Sass/SCSS 变量。

发现错误？在浏览器中编辑此页

1. Introduction

2. 用法

3. 变量