10、less的引用及公共变量的抽离
时间:2022-06-09
本文章向大家介绍10、less的引用及公共变量的抽离,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
前言:GitHub:https://github.com/Ewall1106/mall
一、什么是less?
less是什么自然不用多言,乃一个css预编译器,可以扩展css语言,添加功能如如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术,让你的Css更具维护性,主题性,扩展性。 官网:http://lesscss.org/usage/
二、项目中使用less
1、less的安装
打开命名行,安装less
和less-loader
就可以了:
$ cnpm install less less-loader --save-dev
install
2、使用less
怎么使用,大概就这样,不需要引入什么的,直接用,定义下lang
属性就行
<style lang="less" scoped>
</style>
我们新建一个home.vue
页面
home.vue
三、less与公共变量
一般在我们项目中,需要把所有统一的色调、样式提出出来作为公共变量使用,比如这里,假设红色是我们项目的基调色,很多页面都要用到,所以我们定义一下这个背景色。
1、我们在styles
下面新建一个variables.less
文件,用于存放less公共变量,然后定义一下全局背景色
variables
这是定义less变量的语法,还有很多less的语法,大家可以去官网看看。
2、项目中引入
项目中引入
这里需要踩的坑我都注释了,看注释就行。
3、ok,我们去浏览器中看看效果
浏览器
那么,以后再项目中就可以把所有的页面公共的变量抽离出来使用了。
参考学习 http://lesscss.org/usage/
- 图解javascript this指向什么?
- 2017/6/8-python正则表达式的使用
- 洛谷P1306 斐波那契公约数
- Angular开发实践(二):HRM运行机制
- Angular开发实践(一):环境准备及框架搭建
- 洛谷P2818 天使的起誓
- 连续子数组的最大和
- 10.25解题报告
- React第三方组件5(状态管理之Redux的使用①简单使用)
- JavaScript设计模式与开发实践 - 观察者模式
- React第三方组件4(状态管理之Reflux的使用⑤异步操作)
- Leetcode-Easy 804. Unique Morse Code Words
- JavaScript设计模式与开发实践 - 策略模式
- 二叉树的深度
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 详解php中curl返回false的解决办法
- Pytorch mask-rcnn 实现细节分享
- pytorch中的weight-initilzation用法
- python安装读取grib库总结(推荐)
- PHP5.5新特性之yield理解与用法实例分析
- php如何利用pecl安装mongodb扩展详解
- PHP微信支付结果通知与回调策略分析
- PHP标准库(PHP SPL)详解
- php成功操作redis cluster集群的实例教程
- 在pytorch中动态调整优化器的学习率方式
- 可视化pytorch 模型中不同BN层的running mean曲线实例
- python如何删除文件、目录
- pytorch实现查看当前学习率
- python3.x中安装web.py步骤方法
- pytorch 网络参数 weight bias 初始化详解