1.新建less文件 xx.less 和css文件存放在一起

2. 在less文件里声明编码格式
  @charset "utf-8";

3.把项目拖入Koala里

4.选中less文件 右键设置输出路径 选想要编译的css文件就可以 没有 可新建

5.执行编译 , 下面就可以放心的在less文件里写样式了 
//less 里定义变量的话 一定要用@开头 例如 @变量名:值

@test_width:300px;

.box{
    width: @test_width;
    height:@test_width;
    background-color: yellow;
    .border;
}

//混合,直接把border里的内容给了.box
.border{
    border:solid 5px pink;
}
.box2{
    .box;
    margin-left: 100px;
}
//混合 - 可带参数的
.border_02(@border_width){
    border: solid yellow @border_width;
}
.test_hunhe{
    .border_02(20px)
}
//混合,默认带值
.border_03(@border_width:10px){
    border: solid green @border_width;
}
.test_hunhe_03{
    .border_03();
}
//混合的例子
.border_radius(@radius:5px){
    -webkit-border-radius:@radius;
    -moz-border-radius:@radius;
    border-radius:@radius;
}
.radius_test{
    width: 100px;
    height: 40px;
    background-color: #e60;
    .border_radius(10px);
}
//匹配模式
//普通写法
.sanjiao{
    width:;
    height:;
    overflow: hidden;
    border-width: 10px;
    border-color: red transparent transparent transparent;
    border-style: solid;
    //兼容IE写法
    border-style:dashed dashed solid dashed;
}

//匹配模式写法

.triangle(top,@w:5px,@c:#ccc){//朝上 边框宽度 默认颜色
    border-width: @w;
    border-color: transparent transparent @c transparent;
    border-style: solid dashed dashed dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){//朝下 边框宽度 默认颜色
    border-width: @w;
    border-color: @c transparent transparent transparent;
    border-style: dashed dashed solid dashed;
}
.triangle(left,@w:5px,@c:#ccc){//朝左 边框宽度 默认颜色
    border-width: @w;
    border-color: transparent  @c transparent transparent;
    border-style: dashed dashed dashed solid;
}
.triangle(right,@w:5px,@c:#ccc){//朝右 边框宽度 默认颜色
    border-width: @w;
    border-color: transparent transparent transparent @c;
    border-style: dashed dashed dashed solid;
}
//normal
.sanjiao2{
    width:;
    height:;
    overflow: hidden;
    .triangle(top,100px,#3a9);
}
//更简化的写法
.triangle(@_,@w:5px,@c:#ccc){
    width:;
    height:;
    overflow: hidden;
}
.sanjiao3{
    .triangle(bottom,100px);
}
//匹配模式 - 定位

.pos(r){
    position: relative;
}
.pos(a){
    position: absolute;
}
.pos(f){
    position: fixed;
}

.pipe{
    width: 200px;
    height:200px;
    background-color: #3a9;
    .pos(r);
}

//运算
@test_01:300px;
.box_02{
    width: @test_01 + 20; //320
}

//嵌套规则

//小实例,ul里有li,li里有a和span,css写法
// .list{}
// .list li{}
// .list a{}
// .list span{}

//less写法
.list{
    width: 600px;
    margin: 30px auto;
    padding:;
    list-style: none;
    li{
        height: 30px;
        line-height: 30px;
        background-color: pink;
        margin-bottom: 5px;
    }
    a{
        float: left;
        //&代表他的上一层选择器
        &:hover{
            color: red;
        }
    }
    span{
        float: right;
    }
}

//@arguments包含了所有传递进来的参数。如果不想单独处理每一个参数的话可以像这样写
//此法所用不多
.border(@w:30px,@c:red,@xx:solid){
    //普通写法
        //border:@w @c @xx;
    //@arguments写法
        border:@arguments;
}
.test_arguments{
    .border(5px,#3a9,dotted);
}

//避免编译
  //有时候需要输出不正确的css语法或者less不认识的语法
  //输出这样的值可以在字符串前加上一个~

.test_03{
    width: calc(300px - 30px); //这样写less会自动计算括号里的值 输出为 width: calc(270px);
    width: ~'calc(300px - 30px)'; //原封不动输出width: calc(300px - 30px),适用于滤镜等
}

//!important关键字,和混合模式混合使用,但是不建议使用,可以只做调试用
.test_important{
    .border!important;
}

less基本语法的更多相关文章

  1. 我的MYSQL学习心得(一) 简单语法

    我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  2. Swift与C#的基础语法比较

    背景: 这两天不小心看了一下Swift的基础语法,感觉既然看了,还是写一下笔记,留个痕迹~ 总体而言,感觉Swift是一种前后端多种语言混合的产物~~~ 做为一名.NET阵营人士,少少多多总喜欢通过对 ...

  3. 探索C#之6.0语法糖剖析

    阅读目录: 自动属性默认初始化 自动只读属性默认初始化 表达式为主体的函数 表达式为主体的属性(赋值) 静态类导入 Null条件运算符 字符串格式化 索引初始化 异常过滤器when catch和fin ...

  4. [C#] 回眸 C# 的前世今生 - 见证 C# 6.0 的新语法特性

    回眸 C# 的前世今生 - 见证 C# 6.0 的新语法特性 序 目前最新的版本是 C# 7.0,VS 的最新版本为 Visual Studio 2017 RC,两者都尚未进入正式阶段.C# 6.0 ...

  5. Velocity初探小结--velocity使用语法详解

    做java开发的朋友一般对JSP是比较熟悉的,大部分人第一次学习开发View层都是使用JSP来进行页面渲染的,我们都知道JSP是可以嵌入java代码的,在远古时代,java程序员甚至在一个jsp页面上 ...

  6. node.js学习(二)--Node.js控制台(REPL)&&Node.js的基础和语法

    1.1.2 Node.js控制台(REPL) Node.js也有自己的虚拟的运行环境:REPL. 我们可以使用它来执行任何的Node.js或者javascript代码.还可以引入模块和使用文件系统. ...

  7. C#语法糖大汇总

    首先需要声明的是"语法糖"这个词绝非贬义词,它可以给我带来方便,是一种便捷的写法,编译器会帮我们做转换:而且可以提高开发编码的效率,在性能上也不会带来损失.这让java开发人员羡慕 ...

  8. 值得注意的ibatis动态sql语法格式

    一.Ibatis常用动态sql语法,简单粗暴用一例子 <select id="iBatisSelectList" parameterClass="java.util ...

  9. Flex 布局教程:语法篇

    作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...

  10. postgresql 基本语法

    postgresql数据库创建/修改/删除等写入类代码语法总结: 1,创建库 2,创建/删除表 2.1 创建表 create table myTableName 2.2 如果表不存在则创建表 crea ...

随机推荐

  1. UML基础概念

    UML概述 uml简介 uml(unified Modeling Language )为面向对象软件设计提供统一的.标准的.可视化的建模语言.适用于描述以用例为驱动,以体系结构为中心的软件设计的全过程 ...

  2. Essential C#读书笔记

    Essential C#读书笔记 这是一个多变的时代,一次又一次的浪潮将不同的人推上了巅峰.新的人想搭上这一波,同时老的人也不想死在沙滩上.这些年新的浪潮又一次推开,历史不停地重复上演,那便是移动互联 ...

  3. C#函数式程序设计之泛型(下)

    C#函数式程序设计之泛型(下)   每当使用泛型类型时,可以通过where字句对泛型添加约束: + 这个例子直观地声明了一个约束:类型T必须与ListItem<string>相匹配.泛型类 ...

  4. (转)C++重写、重载和重定义的区别

    C++ 重写重载重定义区别 (源自:http://blog.163.com/clevertanglei900@126/blog/static/111352259201102441934870/) 1 ...

  5. IOS学习之路(二十五)UIView动画,弹出后移动然后消失

    首先在viewdidload中添加UIlable并且把其设为隐藏 然后在点击按钮后,让其弹出移动后消失 //点击按钮后: #pragma mark 点击关注按钮 - (IBAction)guanzhu ...

  6. IOS学习之路二十四(custom 漂亮的UIColor)

    下面简单列举一下漂亮的和颜色,大家也可以自己依次试一试选出自己喜欢的. 转载请注明 本文转自:http://blog.csdn.net/wildcatlele/article/details/1235 ...

  7. 解决js中传值,Action获取是乱码问题

    1.先在js中进行编码 var str = $("mytext").val(); //转码,两次 str = encodeURI(str); str = encodeURI(str ...

  8. 如何用程序删除win 7下SYSTEM权限的目录

    win7系统由于安装程序等操作,可能会在系统中留下一些所有权限是SYSTEM角色的目录,例如我的系统以前在C盘的QQ卸载后的遗留文件(下图). System是Windows系统中最高权限角色(组),比 ...

  9. C语言的变量的内存分配

    今晚看了人家写的一个关于C语言内存分配的帖子,发现真是自己想找的,于是乎就收藏了... 先看一下两段代码: char* toStr() { char *s = "abcdefghijkl&q ...

  10. 图解JOIN

    阅读导航 一.概要 二.JOIN分类 三.JOIN分类详解 一.概要 JOIN对于接触过数据库的人,这个词都不陌生,而且很多人很清楚各种JOIN,还有很多人对这个理解也不是很透彻,这次就说说JOIN操 ...