使用less 安装两个包
1===》cnpm install less less-loader --save-dev
less中的注释
以 //开头的注释 不会被编译到css文件中去
以 /**/ 包裹的注释 会被编译到css 文件中去
3===》
1)使用@来声明一个变量 @pink:pink; 【颜色值】变为变量 <p class="p">123</p>
<style lang="less" scoped>
@colorred: red;
.p{
color: @colorred;
}
</style>
-----------------------------


<p class="p">123</p>
2) css【属性】变为变量 将margin变为一个变量
@m: margin;
.p {
@m: 20px;
或者 @{m}: 30px; 推荐
}
--------------------------------
3) 变量可以作为【选择器】 @{作用的元素}{}
<span>33</span> @sp: span;
@{sp} {
background: pink;
}
------------------------------------
4)less作为url. @{}
一般我们很少将 属性 和选择器 变为变量 记住 less中的变量都是延迟加载的
在less中的变量都是块级作用域
一个{} 代表一个作用域 哈 这样可以避免变量污染
less中的嵌套规则
第一种嵌套规则
div {
p{ }
} 第二种 &的使用 它代表的是平级
光标放在span 上 出现变色
<div class="box">
<p class="p">123</p>
<span>33</span>
</div> .box {
span {
margin-top: 20px;
&:hover {
color: red;
}
}
} 必须要使用 &
混和
需求 div 和span 都要 出现了相同的代码 这个时候就可以使用混合了 <style lang="less" scoped>
.xiangtong {
width: 300px;
height: 300px;
background: red;
line-height: 300px;
text-align: center;
display: block;
} .box {
.p {
.xiangtong;
}
span {
.xiangtong;
}
}
</style>
---------------------
带参数的混合哦
p的宽高是100px, 200px 出现红色
span的宽高是50px, 50px, 出现白色 <template>
<div>
<div class="box">
<p class="p">123</p>
<span>33</span>
</div>
</div>
</template> <script>
export default {
data() {
return {};
}
};
</script> <style lang="less" scoped>
.xiangtong(@w,@h,@c) {
width: @w;
height: @h;
background: @c;
line-height: @h;
text-align: center;
display: block;
} .box {
.p {
.xiangtong(100px, 200px, 200px,red);
}
span {
.xiangtong(50px, 50px, 50px,green);
}
}
</style>
--------
混合并且有默认参数哦
.xiangtong(@w:100px,@h:50px,@c:red) {
width: @w;
height: @h;
background: @c;
line-height: @h;
text-align: center;
display: block;
} -------------
当形参和实参个数不一致的时候 你就可以指定 你的这个参数是给谁的(命名参数的混合)
.xiangtong(@c:pink)

01 less的使用的更多相关文章

  1. 01.SQLServer性能优化之----强大的文件组----分盘存储

    汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 文章内容皆自己的理解,如有不足之处欢迎指正~谢谢 前天有学弟问逆天:“逆天,有没有一种方 ...

  2. 用Kotlin创建第一个Android项目(KAD 01)

    原文标题:Create your first Android project using Kotlin (KAD 01) 作者:Antonio Leiva 时间:Nov 21, 2016 原文链接:h ...

  3. Java企业实训 - 01 - Java前奏

    前言: 虽然个人专攻.NET方向,不过由于个人是干教育行业的,方方面面的东西,不能说都必须精通,但肯定多少都会涉及到. 一个菜鸟学员,从啥都不会,经过一步步学习,最后到企业上手掌管一个模块甚至一个项目 ...

  4. Node.js 教程 01 - 简介、安装及配置

    系列目录: Node.js 教程 01 - 简介.安装及配置 Node.js 教程 02 - 经典的Hello World Node.js 教程 03 - 创建HTTP服务器 Node.js 教程 0 ...

  5. 0042 MySQL学习笔记-入门--01

    基本概念: 数据库DB(database): 数据的仓库,数据的集合,是数据的一种结构化的存储 数据库管理系统DBMS(database management system): 管理数据库的一套软件 ...

  6. Android快乐贪吃蛇游戏实战项目开发教程-01项目概述与目录

    一.项目简介 贪吃蛇是一个很经典的游戏,也很适合用来学习.本教程将和大家一起做一个Android版的贪吃蛇游戏. 我已经将做好的案例上传到了应用宝,无病毒.无广告,大家可以放心下载下来把玩一下.应用宝 ...

  7. ArtifactTransferException: Failure to transfer org.apache.openejb:javaee-api:jar:5.0-1

    最近在myeclipse上创建maven类型的web项目的时候,出现了一个错误. ArtifactTransferException: Failure to transfer org.apache.o ...

  8. Python学习--01入门

    Python学习--01入门 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.和PHP一样,它是后端开发语言. 如果有C语言.PHP语言.JAVA语言等其中一种语言的基础,学习Py ...

  9. 异步编程系列第01章 Async异步编程简介

    p { display: block; margin: 3px 0 0 0; } --> 2016.10.11补充 三个月过去了,回头来看,我不得不承认这是一系列失败的翻译.过段时间,我将重新翻 ...

  10. 【干货分享】前端面试知识点锦集01(HTML篇)——附答案

    一.HTML部分 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层分别是:HTML.CSS.JavaScript作用:HTML实现页面结构,CSS完成页面的表现与风格 ...

随机推荐

  1. Mongodb介绍(非原创)

    文章大纲 一.什么是nosql二.mongodb与mysql比较三.参考文章   一.什么是nosql 1. 简介 这一类数据库主要会使用到一个哈希表,这个表中有一个特定的键和一个指针指向特定的数据. ...

  2. 如何去除小程序button的边框

    小程序button 自带样式,就算用 border:none: background:none ,还是会有一条细的边框 使用:after选择器就可以去除 button::after{ border:n ...

  3. spark利用yarn提交任务报:YARN application has exited unexpectedly with state UNDEFINED

    spark用yarn提交任务会报ERROR cluster.YarnClientSchedulerBackend: YARN application has exited unexpectedly w ...

  4. Linux自动同步时间

    一.安装时间同步工具 yum -y install ntp 二.同步时间 1.修改时区 cp -y /usr/share/zoneinfo/Asia/Shanghai /etc/localtime v ...

  5. [Linux]终端设备关系

    1.概述 tty中基本上可以划分为console(/dev/console).虚拟终端(/dev/tty0~n)和伪终端(/dev/pts/0~n). 它们之间存在一定的关系. 为了说明这段关系,先要 ...

  6. 数组中的第K个最大元素

    在未排序的数组中找到第 k 个最大的元素.请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素. 示例 1: 输入: [3,2,1,5,6,4] 和 k = 2输出: 5示 ...

  7. day87_11_7微信小程序之登录,支付(获取ip,requests使用),授权

    一.登录接口. 官方文档https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html 在登录接口 ...

  8. WPF 精修篇 数据绑定 更新通知

    原文:WPF 精修篇 数据绑定 更新通知 开始更新一点有意思的了 首先 数据绑定  其中之一 Element 绑定 看例子 <Window x:Class="WpfApplicatio ...

  9. 【TCP/IP网络编程】:01理解网络编程和套接字

    1.网络编程和套接字 网络编程与C语言中的printf函数和scanf函数以及文件的输入输出类似,本质上也是一种基于I/O的编程方法.之所以这么说,是因为网络编程大多是基于套接字(socket,网络数 ...

  10. LeetCode 599: 两个列表的最小索引总和 Minimum Index Sum of Two Lists

    题目: 假设 Andy 和 Doris 想在晚餐时选择一家餐厅,并且他们都有一个表示最喜爱餐厅的列表,每个餐厅的名字用字符串表示. Suppose Andy and Doris want to cho ...