01 less的使用
使用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的使用的更多相关文章
- 01.SQLServer性能优化之----强大的文件组----分盘存储
汇总篇:http://www.cnblogs.com/dunitian/p/4822808.html#tsql 文章内容皆自己的理解,如有不足之处欢迎指正~谢谢 前天有学弟问逆天:“逆天,有没有一种方 ...
- 用Kotlin创建第一个Android项目(KAD 01)
原文标题:Create your first Android project using Kotlin (KAD 01) 作者:Antonio Leiva 时间:Nov 21, 2016 原文链接:h ...
- Java企业实训 - 01 - Java前奏
前言: 虽然个人专攻.NET方向,不过由于个人是干教育行业的,方方面面的东西,不能说都必须精通,但肯定多少都会涉及到. 一个菜鸟学员,从啥都不会,经过一步步学习,最后到企业上手掌管一个模块甚至一个项目 ...
- Node.js 教程 01 - 简介、安装及配置
系列目录: Node.js 教程 01 - 简介.安装及配置 Node.js 教程 02 - 经典的Hello World Node.js 教程 03 - 创建HTTP服务器 Node.js 教程 0 ...
- 0042 MySQL学习笔记-入门--01
基本概念: 数据库DB(database): 数据的仓库,数据的集合,是数据的一种结构化的存储 数据库管理系统DBMS(database management system): 管理数据库的一套软件 ...
- Android快乐贪吃蛇游戏实战项目开发教程-01项目概述与目录
一.项目简介 贪吃蛇是一个很经典的游戏,也很适合用来学习.本教程将和大家一起做一个Android版的贪吃蛇游戏. 我已经将做好的案例上传到了应用宝,无病毒.无广告,大家可以放心下载下来把玩一下.应用宝 ...
- ArtifactTransferException: Failure to transfer org.apache.openejb:javaee-api:jar:5.0-1
最近在myeclipse上创建maven类型的web项目的时候,出现了一个错误. ArtifactTransferException: Failure to transfer org.apache.o ...
- Python学习--01入门
Python学习--01入门 Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.和PHP一样,它是后端开发语言. 如果有C语言.PHP语言.JAVA语言等其中一种语言的基础,学习Py ...
- 异步编程系列第01章 Async异步编程简介
p { display: block; margin: 3px 0 0 0; } --> 2016.10.11补充 三个月过去了,回头来看,我不得不承认这是一系列失败的翻译.过段时间,我将重新翻 ...
- 【干货分享】前端面试知识点锦集01(HTML篇)——附答案
一.HTML部分 1.浏览器页面有哪三层构成,分别是什么,作用是什么? 构成:结构层.表示层.行为层分别是:HTML.CSS.JavaScript作用:HTML实现页面结构,CSS完成页面的表现与风格 ...
随机推荐
- Mongodb介绍(非原创)
文章大纲 一.什么是nosql二.mongodb与mysql比较三.参考文章 一.什么是nosql 1. 简介 这一类数据库主要会使用到一个哈希表,这个表中有一个特定的键和一个指针指向特定的数据. ...
- 如何去除小程序button的边框
小程序button 自带样式,就算用 border:none: background:none ,还是会有一条细的边框 使用:after选择器就可以去除 button::after{ border:n ...
- spark利用yarn提交任务报:YARN application has exited unexpectedly with state UNDEFINED
spark用yarn提交任务会报ERROR cluster.YarnClientSchedulerBackend: YARN application has exited unexpectedly w ...
- Linux自动同步时间
一.安装时间同步工具 yum -y install ntp 二.同步时间 1.修改时区 cp -y /usr/share/zoneinfo/Asia/Shanghai /etc/localtime v ...
- [Linux]终端设备关系
1.概述 tty中基本上可以划分为console(/dev/console).虚拟终端(/dev/tty0~n)和伪终端(/dev/pts/0~n). 它们之间存在一定的关系. 为了说明这段关系,先要 ...
- 数组中的第K个最大元素
在未排序的数组中找到第 k 个最大的元素.请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素. 示例 1: 输入: [3,2,1,5,6,4] 和 k = 2输出: 5示 ...
- day87_11_7微信小程序之登录,支付(获取ip,requests使用),授权
一.登录接口. 官方文档https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html 在登录接口 ...
- WPF 精修篇 数据绑定 更新通知
原文:WPF 精修篇 数据绑定 更新通知 开始更新一点有意思的了 首先 数据绑定 其中之一 Element 绑定 看例子 <Window x:Class="WpfApplicatio ...
- 【TCP/IP网络编程】:01理解网络编程和套接字
1.网络编程和套接字 网络编程与C语言中的printf函数和scanf函数以及文件的输入输出类似,本质上也是一种基于I/O的编程方法.之所以这么说,是因为网络编程大多是基于套接字(socket,网络数 ...
- LeetCode 599: 两个列表的最小索引总和 Minimum Index Sum of Two Lists
题目: 假设 Andy 和 Doris 想在晚餐时选择一家餐厅,并且他们都有一个表示最喜爱餐厅的列表,每个餐厅的名字用字符串表示. Suppose Andy and Doris want to cho ...