less注释

可以在代码中使用块样式(/* */)和行内注释(//),但是当编译LESS代码时,单行注释不会显示在CSS文件中。开发中主要维护的是less文件,所以可以使用行内注释,最终编译的css文件中不会有注释。

less变量

LESS允许使用 @ 符号定义变量。 变量分配使用冒号(:)完成。例如:@width:300px

less混合

混合类似于编程语言中的函数。 Mixins是一组CSS属性,允许您将一个类的属性用于另一个类,并且包含类名作为其属性。 在LESS中,可以使用类或id选择器以与CSS样式相同的方式声明mixin。 它可以存储多个值,并且可以在必要时在代码中重复使用。

可以创建一个mixin,它可以通过简单地放置括号后在输出中消失。

.a(){
padding-left: 100px;
}
.myclass{
background : #64d9c0;
.a;
}

最终输出的css为:

.myclass {
background: #64d9c0;
padding-left: 100px;
}

也可以传递参数

.border_radius(@radius:5px){
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.test{
width:300px;
height:200px;
.border_radius(10px);
}

编译之后的css代码为:

.test {
width: 300px;
height: 200px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

less嵌套

它是一组CSS属性,允许将一个类的属性用于另一个类,并且包含类名作为其属性。

.container{
h1{
font-size: 25px;
color:#E45456;
}
p{
font-size: 25px;
color:#3C7949;
}
}

less操作

LESS支持一些算术运算,例如加号(+),减号( - ),乘法(*)和除法(/),它们可以对任何数字,颜色或变量进行操作。

@fontSize: 10px;
.myclass {
font-size: @fontSize * 2;
color:green;
}

我的less学习之路的更多相关文章

  1. jQuery学习之路(1)-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  2. Android开发学习之路-RecyclerView滑动删除和拖动排序

    Android开发学习之路-RecyclerView使用初探 Android开发学习之路-RecyclerView的Item自定义动画及DefaultItemAnimator源码分析 Android开 ...

  3. RPC远程过程调用学习之路(一):用最原始代码还原PRC框架

    RPC: Remote Procedure Call 远程过程调用,即业务的具体实现不是在自己系统中,需要从其他系统中进行调用实现,所以在系统间进行数据交互时经常使用. rpc的实现方式有很多,可以通 ...

  4. webService学习之路(三):springMVC集成CXF后调用已知的wsdl接口

    webService学习之路一:讲解了通过传统方式怎么发布及调用webservice webService学习之路二:讲解了SpringMVC和CXF的集成及快速发布webservice 本篇文章将讲 ...

  5. [精品书单] C#/.NET 学习之路——从入门到放弃

    C#/.NET 学习之路--从入门到放弃 此系列只包含 C#/CLR 学习,不包含应用框架(ASP.NET , WPF , WCF 等)及架构设计学习书籍和资料. C# 入门 <C# 本质论&g ...

  6. Redis——学习之路四(初识主从配置)

    首先我们配置一台master服务器,两台slave服务器.master服务器配置就是默认配置 端口为6379,添加就一个密码CeshiPassword,然后启动master服务器. 两台slave服务 ...

  7. Redis——学习之路三(初识redis config配置)

    我们先看看config 默认情况下系统是怎么配置的.在命令行中输入 config get *(如图) 默认情况下有61配置信息,每一个命令占两行,第一行为配置名称信息,第二行为配置的具体信息.     ...

  8. Redis——学习之路二(初识redis服务器命令)

    上一章我们已经知道了如果启动redis服务器,现在我们来学习一下,以及如何用客户端连接服务器.接下来我们来学习一下查看操作服务器的命令. 服务器命令: 1.info——当前redis服务器信息   s ...

  9. 踏上Salesforce的学习之路(一)

    相信通过前面的学习,大家已经拥有了一个属于自己的Salesforce开发者账号,下面,我们将用这个账号正式踏上Salesforce的学习之路. 首先,点击网址:https://developer.sa ...

  10. ReactNative新手学习之路07ListView_ renderHeader使用StaticContainer

    react native新手学习之路07ListView_ renderHeader使用StaticContainer 1.某些特殊场景需要用ScrollView滚动和ListView配合但是不幸运的 ...

随机推荐

  1. 【转载】 Pytorch(1) pytorch中的BN层的注意事项

    原文地址: https://blog.csdn.net/weixin_40100431/article/details/84349470 ------------------------------- ...

  2. Oracle密码概要文件,密码过期时间180天修改为3天,相关用户密码是否过期

    #Oracle用户密码,概要文件修改测试 #默认的用户使用概要文件,默认概要文件密码过期时间参数180天,修改为3天,对于老的用户来说,是密码过期,还是未发生改变, 对于新用户来说,新设置的密码过期时 ...

  3. [LeetCode&Python] Problem 762. Prime Number of Set Bits in Binary Representation

    Given two integers L and R, find the count of numbers in the range [L, R](inclusive) having a prime ...

  4. es6 set&sort

    es6提供了新的数据结构Set. 它类似于数组,但是成员的值都是唯一的,没有重复的值. Set函数可以接受一个数组(或类似数组的对象)作为参数,用来初始化. 1.set去重 首先我们 let 一个数组 ...

  5. ZOJ 1002:Fire Net(DFS+回溯)

    Fire Net Time Limit: 2 Seconds      Memory Limit: 65536 KB Suppose that we have a square city with s ...

  6. CF使用TGP下载后,分卷文件损坏的解决方法

    首先从游戏的列表删除游戏(安装失败出现分卷文件损坏的游戏) 然后进入游戏重新,继续找到该游戏(安装失败的游戏) 点击下载游戏!不会重新下载的,之后下载一些失败的文件,不会花费多少时间,慢慢等待即可 之 ...

  7. 【liunx】linux后台执行命令:&和nohup

    当我们在终端或控制台工作时,可能不希望由于运行一个作业而占住了屏幕,因为可能还有更重要的事情要做,比如阅读电子邮件.对于密集访问磁盘的进程,我们更希望它能够在每天的非负荷高峰时间段运行(例如凌晨).为 ...

  8. centos7部署phpipam(ip管理系统)

    安装必要的软件 yum install httpd mariadb-server php php-cli php-gd php-common php-ldap php-pdo php-pear php ...

  9. 汇编入门基础与helloworld

    一个存储器拥有128个存储单元,可存储128个byte(字节),一个bite则又是由8个二进制位即bit(比特)组成,bit是计算机的最小信息单位. 总线分为地址总线,控制总线,数据总线 一个cpu有 ...

  10. Embedded SW uses STL or not

    As the complexity increasing of embedded software, more and more projects/products use C++ as the im ...