vue使用sass根据环境进行样式判断区分方式
更新时间：2023年03月29日 08:34:18 作者：zhlCool
这篇文章主要介绍了vue使用sass根据环境进行样式判断区分方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
使用sass根据环境进行样式判断区分
我们在开发时可能会有需求根据当前vue的环境变量进行样式区分，说白了就是如何在sass中进行if else，下面将是我的处理方法。
首先在webpack -> utils.js 中将环境变量定义：
然后在sass文件中使用：
div {
@if ($env == 'production') {
height: calc(100vh - 332px); // 生产环境展示
} @else {
height: calc(100vh - 412px); // 开发环境展示
}
}这样就可实现css根据开发环境进行样式编写了。
vue sass和scss的区别
Scss 是 Sass 3 引入新的语法，简言之可以理解scss是sass的一个升级版本，完全兼容sass之前的功能，又有了些新增能力。语法形式上有些许不同，最主要的就是sass是靠缩进表示嵌套关系，scss是花括号。
Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
- 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
- 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。
示例
sass语法：
$font-stack: Helvetica, sans-serif //定义变量 $primary-color: #333 //定义变量 body font: 100% $font-stack color: $primary-color
scss语法：
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;}编译出来的 CSS：
body {
font: 100% Helvetica, sans-serif;
color: #333;
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue项目如何引入公共头部底部问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要为大家详细介绍了vue3中展示markdown格式文章的三种形式,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2025-04-04
这篇文章主要介绍了Vue子组件调用父组件方法案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
vue-cli如何关闭Uncaught error的全屏提示
这篇文章主要介绍了vue-cli如何关闭Uncaught error的全屏提示问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
今天我们用一种新的布局方式，使用路由视图来实现布局样式，本文将给大家介绍如何使用Vue Router组合布局，文中有详细的代码示例供大家参考，感兴趣的同学可以跟着小编一起学习2023-05-05
这篇文章主要介绍了vue项目使用可选链操作符编译报错问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了Vue状态管理。下面文章主要围绕着使用Pinia代替Vuex的相关资料展开具体内容,需要的朋友可以参考一下，希望对你有所帮助2021-11-11
这篇文章主要介绍了vue-cli 卸载不掉的问题解决方法，文中给大家介绍了安装后问题分析及解决方案，需要的朋友可以参考下2023-01-01
这篇文章主要介绍了详解如何用VUE写一个多用模态框组件模版，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue spa应用中的路由缓存问题与解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
最新评论