Less学习笔记

一、简介
二、编译工具
kaola(推荐)、node.js、浏览器
三、用法
(一)变量
@变量名:值;
(二)混合
将一个包含多个属性的类作为另一个类的子属性集
可以让一个类接收一个变量值
便于“相同属性较多 但部分属性不同”的类的复用
eg .border_radius(@radius:5px){
-webkit-border_radius:@radius;
-moz-border_radius:@radius;
border_radius:@radius;
}
.radius_test{
width:100px;
height:40px;
background-color:green;
.border_radius(10px);//若无传入参数则默认为5px
}
(三)匹配模式
类似于js中的if 但不完全相同;
应用其他类型时 根据首个参数匹配同名的对应样式
如定义了.triangle(left) .triangle(right).triangle(top)三个同名类,应用哪个类由匹配决定 类似于c语言中的同名函数的重载

(四)运算

      可以给属性赋变量进行运算后的值
    // 运算的两个对象只要有一个带单位即可
 eg  @test:200px;
       .box{
           width:@test-20*5;      
      }

(五)嵌套规则

   .list{
     width:100px;
     height:100px;
     margin:30px auto;
     li{
         height:30px;
         line-height:30px;
       }
     a{
         float:left;
         //&代表上一层选择器
         &:hover{
           color:red;
         }
      }
     span{
        float:right;
     }
   }

(六)arguments变量(不常用)
@arguments包含了所有传递进来的参数
eg:
.border_arg(@w:30px,@c:red,@xx:solid){
border:@arguments;
}
.test_arguments{
.border_arg(40px);//仅仅修改了w值
}
(七)避免编译、!important
eg:
//避免编译
.test_01{
width:~'cal(300px - 30px)';//当该计算需要由浏览器进行 需要避免在css中计算完成
}
//important常用于调试,
.test_important{
.border_radius()!important;//对应的编译出来的css后面均带有!important
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Less作为 CSS 的一种扩展,不仅完全兼容 CSS 语法,而且连新增的特性也是使用 CSS 语法,你可以在任何...
    zhangivon阅读 582评论 0 1
  • 编译器 koala 编译器创建一个 style 文件夹,在其中创建 .less 文件,将文件夹拖入 koala 编...
    _月光临海阅读 327评论 0 0
  • less是什么 Less 是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、...
    刘挚珂阅读 210评论 0 1
  • 花了这两天上班的空闲时间把mixins的大部分的相关内容写完了,但是还有两小块内容还没写,预计放在下一篇当中,下一...
    程恺阅读 2,424评论 0 1
  • 一、什么是less less是一种动态样式语言,属于css预处理语言的一种,它使用类似css的语法,为css赋予了...
    间阳幕宾阅读 654评论 0 1