一、什么是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. DbFunctions 作为 LINQ to Entities 查询的一部分使用时，此方法调用规范 CreateDateTime EDM 函数以创建新的 DateTime 对象。

    DbFunctions.CreateDateTime CreateDateTime(year, month,day,hour,minute,second)

  2. KDC添加加密

    零售KDC管理的域为TESTA.COM 华为集群管理的域为hadoop.com (目前测试了hdfs cli,下午在UAT集群测试下distcp) 一.            零售KDC升级支持AES ...

  3. JavaScript设计模式—代理模式

    代理模式介绍 使用者无权访问目标对象,中间加代理,通过代理做授权和控制 代理(proxy)是一个对象,它可以用来控制对另外一个对象的访问: 代理对象和本体对象实现了同样的接口,并且会把任何方法调用传递 ...

  4. 预处理、const、static与sizeof-用宏定义得到一个字的高位和低位字节

    1:代码如下: #define WORD_LO(XXX) ((byte) (word)(XXX) & 255) #define WORD_HI(XXX) ((byte) (word)(XXX) ...

  5. 在 Go 语言中使用 Session（一）

    在上一篇博客 理解Cookie和Session 中,我们了解了 Cookie 和 Session 的一些基础知识,也知道了 Session 的基本原理是由服务端保存一份状态信息(以及它的唯一标识符), ...

  6. LeetCode 160. 相交链表（Intersection of Two Linked Lists）

    题目描述 编写一个程序,找到两个单链表相交的起始节点. 例如,下面的两个链表: A: a1 → a2 ↘ c1 → c2 → c3 ↗ B: b1 → b2 → b3 在节点 c1 开始相交. 注意: ...

  7. win10下检查nvidia显卡支持的cuda版本

    1.首先将[C:\Program Files\NVIDIA Corporation\NVSMI]添加至系统环境变量[path]中: 2.在powershell中使用命令[nvidia-smi],即可看 ...

  8. set_multicycle_path语法说明【转载】

    (转载) (其实多看手册就知道原因了) Q:多周期路径中的检查保持时间时刻,为什么默认是在建立时间检查的前一个cycle?请大家谈谈自己的理解. 如:Set_multicycle_path -setu ...

  9. Python-sympy科学计算与数据处理(方程，微分，微分方程，积分)

    方程 a,b,c,x = symbols("a b c x") my_eq = Eq(a*x**2+b*x+c,0) solve(my_eq,x) Out[12]: [(-b + ...

  10. Laravel的Nginx重写规则--让路由支持末尾加斜线

    默认laravel路由末尾不能加/,如果加了斜线会报404 要想支持url末尾的斜线需要在public/index.php加入如下代码: $_SERVER['REQUEST_URI'] = trim( ...