一、什么是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，我们去浏览器中看看效果

 

less的引用及公共变量的抽离的更多相关文章

  1. 随机跳转页面之使用VBA公共变量

    p{ font-size: 15px; } .alexrootdiv>div{ background: #eeeeee; border: 1px solid #aaa; width: 99%; ...

  2. dart 公共变量

    dart中可以直接在一个文件里声明一个变量,这在其他语言中并不常见,比如c#语言只有类型才可以在命名空间下定义,变量必须放在类里声明 所以dart这点特性类似于js 今天就来讨论这个公共变量的作用范围 ...

  3. ES5提取公共变量

    在ES5中,请求地址前缀等需要作为公共变量提出. 则需在common.js写上 Object.defineProperty(window,'base',{ value:"http://xx. ...

  4. C#-WebForm-★内置对象简介★Request-获取请求对象、Response相应请求对象、Session全局变量（私有）、Cookie全局变量（私有）、Application全局公共变量、ViewState

    内置对象: 1.Request - 获取请求对象 用法:接收传值 protected void Page_Load(object sender, EventArgs e) { TextBox1.Tex ...

  5. C#学习笔记-数据的传递（公共变量）以及Dictionary

    看的代码越多,写的代码越多,就越是享受这些字符,终于渐渐懂得了那种传闻中的成就感,特别是自己从看不懂然后一步一步学,一个代码一个代码地敲,最后哪怕只是完成了一个小功能,也都是特别自豪的!这种自豪不用告 ...

  6. 内部类访问外部类的变量必须是final吗，java静态方法中不能引用非静态变量，静态方法中不能创建内部类的实例

    内部类访问外部类的变量必须是final吗? 如下: package com.java.concurrent; class A { int i = 3; public void shout() { cl ...

  7. 如何在Exe和BPL插件中实现公共变量共享及窗口溶入技术Demo源码

    如何在Exe和BPL插件中实现公共变量共享及窗口溶入技术Demo源码 1.Delphi编译方式介绍: 当我们在开发一个常规应用程序时,Delphi可以让我们用两种方式使用VCL,一种是把VCL中的申明 ...

  8. n个并发进程共用一个公共变量Q，写出用信号灯实现n个进程互斥的程序描述，给出信号灯值得取值范围，并说明每个取值范围的物理意义。

    答: var mutex: semaphore:=1; begin cobegin process i : begin   // i = 1,2,……,n repeat P(mutex); 对公共变量 ...

  9. PHP变量传值赋值和引用赋值，变量销毁

    <?php $a = 100; $b = 200; var_dump($a,$b); //int(100) int(200) ?> php中,上面的代码,变量是怎么存放的呢? 上面的代码变 ...

随机推荐

  1. mybatis-puls 字段为null时候的更新问题

    在mybatis-puls重设置的全局更新策略 为null的字段忽略更新.但是在某些业务需求下面,可能需要某些字段更新为null值.那么改如何设置 1, 在你的实体属性上面单独添加需要更新nu l l ...

  2. centos7下面改变亮度

    通过改自己的配置文件来改变亮度的方法在我的机器上面是不中用了,我的是台式机,我用的集成显卡,目前我找到的还勉强的方法就是通过安装redshift来改变屏幕的亮度,我就是不喜欢太亮,差点瞎了. 具体是这 ...

  3. Leetcode题目53.最大子序和（动态规划-简单）

    题目描述: 给定一个整数数组 nums ,找到一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和. 示例: 输入: [-2,1,-3,4,-1,2,1,-5,4],输出: 6解释: 连 ...

  4. ECharts3D地图(详细示例——附有具体注释)

    3D地图图表效果如下: 具体代码如下: <!DOCTYPE html><html><head> <meta charset="UTF-8" ...

  5. Servlet 异常处理（ 配置错误页面）

    当一个 Servlet 抛出一个异常时,Web 容器在使用了 exception-type 元素的 web.xml 中搜索与抛出异常类型相匹配的配置. 您必须在 web.xml 中使用 error-p ...

  6. 从源码学习使用 node-delegates

    node-delegates 是 TJ 大神所写的一个简单的小工具,源码只有 157 行,作用在于将外部对象接受到的操作委托到内部属性进行处理,也可以理解为讲对象的内部属性暴露到外部,简化我们所需要书 ...

  7. Hive explode

  8. Windows 桌面利用 Navicat等工具连接 虚拟机Mysql

    1.mysql>use mysql;2.mysql>update user set host = '%' where user ='root';3.mysql>select host ...

  9. mdk3 工具使用-表白神器

    一:在root目录下新建个txt文档,用vim编辑文档,写几段暧昧的话 二:终端执行命令: 开启网卡监听模式 airmon-ng start wlan0 开启无线广播 mdk3 wlan0mon b ...

  10. 李宏毅 Keras2.0演示

    李宏毅 Keras2.0演示 不得不说李宏毅老师讲课的风格我真的十分喜欢的. 在keras2.0中,李宏毅老师演示的是手写数字识别(这个深度学习框架中的hello world) 创建网络 首先我们需要 ...