Less学习笔记

视频教程地址:http://www.imooc.com/learn/102

一、什么是Less

    css的Less好比是js的Jquery,可以让人们更方遍快捷的使用css,使css代码更简洁,可以减少重复的代码,减少开发人员的工作量。

  Less CSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。

   Less中文手册:less.bootcss.com

二、编译工具

  1.Koala:国人开发的LESS/SASS编译工具

   下载地址:http://koala-app.com/index-zh.html

  2.Node.js库

  3.浏览器端使用

三、koala配置及使用

  1.新建后缀为.less文件:index.less

   头部写上:@charset "utf-8";   //设定字符集

  2.把文件夹拖到koala中,设置输出路径为style下的index.css

     使用koala进行编译,然后就生成了一个index.css文件。

  3.之后我们只要编辑index.less文件即可。

四、注释

  1./*编译后会被保留*/

  2.//编译后不会被保留

五、变量

  1.设定变量:

  @text_width: 300px;

  2.使用变量:示例如下

  <div class="box"></div>

  .box{     width: @text_width;     height: @text_width;     background: #000;   }

六、混合

  1.混合简介:与原有的在class中新追加class的方法有所不同(原有<div class="box border"></div>),使用Less的混合功能后,只要声明.border后,在.box中加  入.border;即可。

  使用示例一:

  <div class="box"></div>

  .box{     width: @text_width;     height: @text_width;     background: #000;

    .border;   }

  .border{

    border: 5px solid yellow;

  }

  使用示例二:新增一个box2,但是它和box1只有一点点细微的区别,可以直接拿来box1使用,然后加上它自己的样式。

  .box2{

    .box1;

    margin-left: 100px;

  }

  2.混合是可以带参数的

  在index.less中使用带参数的值,在border_02后面加一个(),里面声明一个变量;

  然后传入参数30px。

  在编译后的index.css文件中,带参数的变量不显示

  3.混合也可以带默认值

  在border_03后面加一个(),里面声明一个变量,变量后面附一个初始值“:10px”;

  如果不想用默认值,只要在text_hunhe下的border_03的()中写入值即可。

  默认值必须带(),不然会报错。

  4.混合高级使用示例,兼容性也可以使用

  <div class="radius_test"></div>

  在编译后的index.css文件中,展示如下

七、匹配模式

  1.简介:相当于js中的if,但不完全是

  2.示例

  先介绍一个画倒三角的方法

  <div class="sanjiao"></div>

  .sanjiao{     width: 0;     height: 0;     overflow: hidden;     border-width: 10px;     border-color: red transparent transparent transparent;     border-style: solid dashed dashed dashed;   }

  匹配模式示例一:

  .triangle(top,@w:5px,@c:#ccc){

    border-width: @w;

    border-color: @c transparent transparent transparent;

    border-style: solid dashed dashed dashed;

  }

  .triangle(right,@w:5px,@c:#ccc){

    border-width: @w;

    border-color:  transparent @c transparent transparent;

    border-style:  dashed solid dashed dashed;

  }

  .triangle(bottom,@w:5px,@c:#ccc){

    border-width: @w;

    border-color:  transparent transparent @c transparent;

    border-style:  dashed dashed solid dashed;

  }

  .triangle(left,@w:5px,@c:#ccc){

    border-width: @w;

    border-color:  transparent transparent transparent @c;

    border-style:  dashed dashed dashed solid;

  }

  .triangle(@_,@w:5px,@c:#ccc){    // @_ 是固定格式,表示不管你匹配到谁,都会带上这些内容

    width: 0;     height: 0;     overflow: hidden;

  }

  .sanjiao{

    .triangle(right,100px);

  }

  匹配模式示例二:

  匹配模式定位

  .pos(r){position:relative;}   .pos(a){position:absolute;}   .pos(f){position:fixed;}   .posi{     width: 100px;     height: 100px;     background: blue;     .pos(r);   }

八、运算

  1.less中的运算可以是任何数字、颜色、变量,运算要包裹在括号中。如:+ - * /

  2.示例如下:

  @test_01:300px;

  .box_02{

    width: (@test_01 - 20) * 5;   //未强制规定必须要带px单位,只要有一个带即可

    color: #ccc - 10;                      //不太常用到

  }

九、嵌套规则

  1.示例

  原css 

  .list{}   .list li{}   .list a{}   .list span{}

  使用Less嵌套:

  .list{     width: 600px;     margin: 30px auto;     padding: 0;     list-style: none;     font-size: 16px;    li{

      height: 30px;       line-height: 30px;       background: blue;       margin-bottom: 5px;       padding: 0 10px;     }     a{       float: left;       color: #000;

      &:hover{    //&代表上一层选择器

        color: red;

      }     }     span{       float: right;     }   }

十、arguments变量

  .border_arg(@w:30px,@c:#ccc,@xx:solid){border:@arguments}     //省了一点点事儿,懒人必备

  .test_arguments{.border_arg(40px);}

十一、避免编译、!important

  1.避免编译:在我们需要输入一些不正确的css语法或者使用一些less不认识的专有语法时使用。在字符串前加上一个~即可

  .test_03{     width: ~'calc(300px - 30px)';    //~'...'避免编译,把单引号里的内容按照原样传给浏览器   }

  2.!important关键字:适合用来调试,一般不会用到

  .test_important{

    .box !important;    //给所有样式加上!important

  }

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏杨龙飞前端

promise思考

20340
来自专栏史上最简单的Spring Cloud教程

javascript入门笔记8-window对象

History 对象 history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能。 注意:从窗口被打开的那一刻开始记录,...

197100
来自专栏Astropeak

Python:怎样用线程将任务并行化?

23670
来自专栏加米谷大数据

技术分享 | Centos下 Vim快捷键操作命令大全

Vim是一个超牛的编辑器,命令功能十分强大 。而且这些命令大都可以进行组合 , 比如,9yy命令表示复制9行内容,9表示要复制的行数,同样100dd表示删除10...

384100
来自专栏大内老A

.NET Core的文件系统[3]:由PhysicalFileProvider构建的物理文件系统

ASP.NET Core应用中使用得最多的还是具体的物理文件,比如配置文件、View文件以及网页上的静态文件,物理文件系统的抽象通过PhysicalFilePr...

22390
来自专栏BestSDK

是不是Bash编程老司机,看完这10条细节就知道了

Bash,作为大部分 Linux 发行版的出厂预设 Shell,因其晦涩难懂的语法设置,以及需要特别留心的编程细节,几乎成为 Linux 区别于其他操作系统的代...

36770
来自专栏前端小叙

jquery获取select多选框选中的值

46320
来自专栏大内老A

ASP.NET Web API标准的“管道式”设计

ASP.NET Web API的核心框架是一个消息处理管道,这个管道是一组HttpMessageHandler的有序组合。这是一个双工管道,请求消息从一端流入并...

21050
来自专栏xingoo, 一个梦想做发明家的程序员

Windows下elasticsearch插入数据报错!

  按照官方文档操作,但是windows下有些不同,它不认识单引号',因此如果这样操作,就会报错: C:\Users\neusoft>curl localhos...

203100
来自专栏前端迷

前端面试之JavaScript(总结)

基本数据类型:number、string、null、undefined、boolean、symbol -- 栈 引用数据类型:object、array、func...

14320

扫码关注云+社区

领取腾讯云代金券