less语言学习手记

工具下载

在less学习中,我们都会需要随时编译我们的less文件,查看生成的css样式表是否正确,以及是否符合我们的要求.推荐一款编译软件供大家下载使用:koala,本软件支持自动编译和报错机制,会帮助我们更加高效的学习less

注释

less的注释和我们通常使用的javascript的注释风格一致.如:

/*我是一条注释*/
//我也是一条注释

但是值得注意的是 '/**/' 这样的写法在less中还有不同的用法:

//admin.less
/*我是一条注释,但不会被编译显示在对应的css文件中*/
a{color:#ccc}
---------------------------------------------
//admin.css
a{color:#ccc}

'//' 这样的注释写法可以被编译在对应css文件中

//admin.less
//这是注释部分
a{color:#ccc}
-------------
//admin.css
//这是注释部分
a{color:#ccc}

变量

less中存在像JavaScript中变量这样的概念,变量会使我们的css更易维护(如更改皮肤色值,字体大小等),想要在less中声明变量必须以@开头 例如:@变量名:值;

//admin.less
@te_width:300px;
.aa{width: @te_width;}
----------------------
//admin.css
.aa {
width: 300px;
}

混合

less中对某一个样式类混合其他样式类名的书写方式,减少样式重复:

//admin.less
.cc{width: @te_width;.bb}
.bb{line-height: 20px;}
------------------------
//admin.css
.cc {
width: 300px;
line-height: 20px;
}
.bb {
line-height: 20px;
}

混合---可带参数

同样的我们还可以对混合应用的样式类带参数使用,更灵活,更高效:

//admin.less
.border_2(@border_width){//相当于声明了一个名字叫border_2的方法,这个方法可以接收一个参数@border_width用来改变border的边框大小
border:@border_width solid pink;
}
.hunhe{//在需要用到的地方使用方法border_2,并传递一个具体的参数20px
.border_2(20px);
}
-------------------------------------------------------------------------
//admin.css
.hunhe {
border: 20px solid #ffc0cb;
}

混合---带默认值参数

默认参数也叫做缺省值意思指在方法的使用中可以不传递任何参数的情况下,按照默认参数的值执行该方法:

//admin.less
.border_3(@border_width:10px){//参数的默认值写在变量的后面,用':'分隔
border:@border_width solid pink;
}
.hunhe2{
.border_3();//不传递参数执行默认
}
-------------------------------------------------------------------
admin.css
.hunhe2 {
border: 10px solid #ffc0cb;//不传递参数执行默认10px
}

匹配模式

形如方向分为上下左右,对于每个方向指向的城市也会有所不同,面对这样的问题就需要用到匹配模式,下面用一个css实现三角形的例子来说明:

//admin.less
//先声明四个方向箭头的方向,边框大小,颜色等
.tra(top,@a:5px,@c:#ccc){//向上箭头
border-width: @a;
border-color: transparent transparent @c transparent;
border-style: solid dashed dashed dashed; //兼容IE6效果
}
.tra(bottom,@a:5px,@c:#ccc){//向下箭头
border-width: @a;
border-color: @c transparent transparent transparent;
border-style: solid dashed dashed dashed; //兼容IE6效果
}
.tra(left,@a:5px,@c:#ccc){//向左箭头
border-width: @a;
border-color:transparent @c transparent transparent;
border-style: dashed dashed dashed solid; //兼容IE6效果
}
.tra(right,@a:5px,@c:#ccc){//向右箭头
border-width: @a;
border-color: transparent transparent transparent @c;
border-style: dashed dashed dashed solid; //兼容IE6效果
}
//在所需要用到的类里面直接使用并传递方向的参数
.sanjiao{
.tra(bottom)
}
//同时也可以使用默认值的写法定义默认效果:
.tra(@_,@a:5px,@c:#ccc){//向右箭头
width: 0;
height: 0;
overflow: hidden;
}
-------------------------------------------------------
//admin.css
.sanjiao {
border-width: 5px;
border-color: #cccccc transparent transparent transparent;
border-style: solid dashed dashed dashed;
width: 0;
height: 0;
overflow: hidden;
}

less中的运算

在less中可以使用加减乘除等算数运算来计算想要的数值大小

//admin.less
@tex_01:300px;
.box_2{
width: @tex_01+20;//支持加减乘除元算
color: #ccc-10;//色值亦可以进行运算
}
-----------------------------------------
admin.css
.box_2 {
width: 320px;
color: #c2c2c2;
}

less的嵌套

嵌套的使用可以更加方便快捷的生成多个层级关系的css样式:

//admin.less
.list{
width: 100px;
a{
padding: 0;
}
}
.list2{
width: 100px;
a{
padding: 0;
&:hover{//&代表上一层选择器
color: red;
}
}
}
--------------------
//admin.css
.list {
width: 100px;
}
.list a {
padding: 0;
}
.list2 {
width: 100px;
}
.list2 a {
padding: 0;
}
.list2 a:hover {
color: red;
}

@arguments

默认使用所有的参数:

//admin.less
.arg(@w:30px,@c:#ccc,@s:solid){
border:@arguments
}
.ccc{
.arg();
}
----------------------------
//admin.css
.ccc {
border: 30px #cccccc solid;
}

避免编译

遇到不想被编译的内容时可以使用'~'来做标记:

//admin.less
.te_03{
width: ~'calc(300px-30)';
}
--------------------------
//admin.css
.te_03 {
width: calc(300px-30);
}

!important

为提升样式优先级时使用:

//admin.less
.ccc{
.arg()!important;
}
------------------------
//admin.css
.ccc {
border: 30px #cccccc solid !important;
}

less初学手记的更多相关文章

  1. Python初学手记----在window系统中安装环境

    官网地址: https://www.python.org/ Win版下载地址:https://www.python.org/downloads/windows/ 安装注意:安装路径推荐修改. path ...

  2. [小北De编程手记] : Selenium For C# 教程目录

    写<Selnium For C#>系列文章的初衷是因为有很多朋友问我应该从哪里开始学习自动化测试,于是就为大家写下了这个系列的文章,希望对你有些帮助吧.而我想表达的是Selenium(同时 ...

  3. [小北De编程手记] : Lesson 01 - Selenium For C# 之 环境搭建

    在我看来一个自动化测试平台的构建,是一种很好的了解开发语言,单元测试框架,自动化测试驱动,设计模式等等等的途径.因此,在下选择了自动化测试的这个话题来和大家分享一下本人关于软件开发和自动化测试的认识. ...

  4. 转:[小北De编程手记] : Selenium For C# 教程目录

    写<Selnium For C#>系列文章的初衷是因为有很多朋友问我应该从哪里开始学习自动化测试,于是就为大家写下了这个系列的文章,希望对你有些帮助吧.而我想表达的是Selenium(同时 ...

  5. DDD初学指南

    去年就打算总结一下,结果新换的工作特别忙,就迟迟没有认真动手.主要内容是很多初学DDD甚至于学习很长时间的同学没有弄明白DDD是什么,适合什么情况.这世界上没有银弹,抛开了适合的场景孤立的去研究DDD ...

  6. gulp初学

    原文地址:gulp初学 至于gulp与grunt的区别,用过的人都略知一二,总的来说就是2点: 1.gulp的gulpfile.js  配置简单而且更容易阅读和维护.之所以如此,是因为它们的工作方式不 ...

  7. 初学seaJs模块化开发,利用grunt打包,减少http请求

    原文地址:初学seaJs模块化开发,利用grunt打包,减少http请求 未压缩合并的演示地址:demo2 学习seaJs的模块化开发,适合对seajs基础有所了解的同学看,目录结构 js — —di ...

  8. Linux.NET实战手记—自己动手改泥鳅(上)

    各位读者大家好,不知各位读者有否阅读在下的前一个系列<Linux.NET 学习手记>,在前一个系列中,我们从Linux中Mono的编译安装开始,到Jexus服务器的介绍,以及如何在Linu ...

  9. Linux.NET学习手记(7)

    前一篇中,我们简单的讲述了下如何在Linux.NET中部署第一个ASP.NET MVC 5.0的程序.而目前微软已经提出OWIN并致力于发展VNext,接下来系列中,我们将会向OWIN方向转战. 早在 ...

随机推荐

  1. c#_图表之zeGraph

    关于图表控件: http://blog.csdn.net/sgear/article/details/1449025 其中zedGraph的基本方法及属性介绍: http://wenku.baidu. ...

  2. java中Scanner和random的用法

    Scanner是默认按照行来读取数字的. 创建一个用来输入的函数 Scanner scan=new Scanner(System.in):system.in是表示从控制台输入. 然后用一个变量类接收这 ...

  3. Ext.Ajax.request()方法和FormPanel.getForm().submit()方法,都返回success()方法的差异

    我还是不发表到博客园首页吧,要不然还是要被取消,>_< 还是言归正传吧,关于Ext.Ajax.request()方法和FormPanel.getForm().submit()方法返回suc ...

  4. apache开源项目--HttpComponents

    HttpComponents 也就是以前的httpclient项目,可以用来提供高效的.最新的.功能丰富的支持 HTTP 协议的客户端/服务器编程工具包,并且它支持 HTTP 协议最新的版本和建议.不 ...

  5. Wireshark - 过滤规则

    使用 Wireshark 的默认设置抓包时,会得到大量的冗余信息,以至于很难找到自己所需的封包.使用过滤器可以帮助我们在庞杂的结果中快速地找到我们所需的封包.过滤器分为两种:捕捉过滤器和显示过滤器. ...

  6. javaEE jdbc编程步骤

    1.载入数据库驱动(jar文件) //须要下载一个数据库的jar包,并导入对应的JDBC项目中,创建路径! Class.forName("com.mysql.jdbc.Driver" ...

  7. js生成随机数

    //生成n以内的随机数 function getRandom(n){ return Math.floor(Math.random()*n+1) } //生成1000以内的随机数 alert(getRa ...

  8. 201521123037 《Java程序设计》第5周学习总结

    1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 1.2 可选:使用常规方法总结其他上课内容. 接口: 接口简而言之是方法声明和常量值的集合,接口中所有的方法默认为public ...

  9. 分布式监控系统Zabbix3.2对数据库的连接数预警

    在前篇分布式监控系统Zabbix3.2监控数据库的连接数 中已经对数据库的端口3306进行了监控,可以看到数据库的连接数历史变化有高有低,那如果达到了数据库连接数的阀值是不是主动通知给运维人员去检查问 ...

  10. 【BZOJ3172】单词(AC自动机)

    [BZOJ3172]单词(AC自动机) 题面 Description 某人读论文,一篇论文是由许多单词组成.但他发现一个单词会在论文中出现很多次,现在想知道每个单词分别在论文中出现多少次. Input ...