less的使用小技巧以及vite 如何配置less全局变量

最新推荐文章于 2024-08-16 13:04:38 发布

原谅我不够洒脱

最新推荐文章于 2024-08-16 13:04:38 发布

阅读量6.7k

点赞数 2

分类专栏：笔记文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/weixin_44441196/article/details/120948433

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何利用Less的变量、选择器和函数特性进行统一样式修改、项目标识添加以及复杂样式的响应式处理。通过设置全局变量和自定义函数，可以简化CSS编写，实现跨组件样式隔离，并在不同屏幕尺寸下调整元素样式。同时，分享了在Vite配置中引入Less全局变量的方法。

摘要由CSDN通过智能技术生成

1.变量-属性 `可用于统一修改，比如特殊节日置灰等`

@primaryColor: #f2f2f2;
// 使用
color: @primaryColor

2.变量-选择器 `添加项目标识(可用于微前端的样式隔离)`

@nameSpace: 'my-app';
// 在组件中使用
@prefix-cls: ~'@{nameSpace}-component1';
.@{prefix-cls} {
	...
}

3.函数 `可用于对复杂样式简单处理，用于响应式`

// 全局定义
.t(props,pc,h5) when (props = font-size) { // 当传入的属性是font-size  ps：font-size 不建议用%为单位，他是基于body上的字体大小来计算的
	@{props}: (pc / 1920 * 100vw); // 不用使用calc 函数自己会去计算
	@media (max-width: 1200px) {
		@{props}: (pc / 375 * 100vw);
	}
}

.t(props,pc,h5) when (props = font-size) { // 当传入其他属性
	@{props}: (pc / 1920 * 100%)
	@media (max-width: 1200px) {
		@{props}: (pc / 375 * 100%);
	}
}

// 使用
.box{
	.t(width, 200, 100);
	.t(font-size, 20, 18);
}

// 编译后
.box{
	width：calc(200 / 1920 * 100%);
	font-size: calc(20 / 1920 * 100vw);
	
	@media(max-width: 1200px){
		width：calc(200 / 375 * 100%);
		font-size: calc(20 / 375 * 100vw);
	}
}

附上 vite 如何配置less全局变量
在vite.config.js 里添加 css的相关配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import path from "path";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    vueJsx()
  ],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },
  css: {
    preprocessorOptions: {
       less: {
         modifyVars: {
           hack: `true; @import (reference) "${path.resolve(__dirname, 'src/css/common.less')}";`,  // src/css/common.less 是你需要全局变量 （你定义的定义的方法 和 变量等）
         },
         javascriptEnabled: true
       }
    }
  }
})