less入门

2017-01-07 本文已影响0人 GarenWang

1. 什么是less?

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。
less的同类型工具还有Sass,stylus等
less 它必须要编译成css文件，才能被浏览器解析。

2.怎么使用less?

如果不想安装任何软件和插件，练习less语法的使用，可以直接到js.jirengu.com中直接写代码。
如下图，在css中选择less模板

U95%(NHYI`WT~N}$I7QU5CW.png

less 语法

注释，/**/注释的内容后它会编译到对应的css文件，// 注释的内容会保留在less文件中不会注释到对应的css文件中
/这段文字注释会编译到css文件/
//这段文件注释不会编译到css文件中
变量声明 @变量名:值,有利于在多个重复代码一次修改，只需要修改变量值即可
@color:red;
body{background:@color}
div{background:@color}

![)P%%TIDSPU%H{9HG]U_RODP.png](https://img.haomeiwen.com/i3361706/4f83994b44c59bb1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

混合

无参数，可以把写好.border直接写入div的样式中，结果如下图
.border{
border:1px solid #fff;
}
div{
width:100px;
height:100px;
.border
}

![MC$A1C0DBGK]8`4(G0KT5ZC.png](https://img.haomeiwen.com/i3361706/4717ddfe27d87851.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

2.有参数，形式如.xxx(@变量)

   .border-01(@width){
          border: solid red @width;
    }
      .test{
          .one;
          .border-01(20px)
  }

1.png

3.参数可以传递默认值 .xxx(@变量:value)

    .border-02(@border_width:10px){
    border: solid red @border_width
   }
    div{
    .one;
    .border-02()//此时div的border默认宽度为10px;
    //也可以对默认值进行修改如  .border-02(20px);
    }

匹配模式，相当于javascript 中的if;
//css中我们一般这样画一个三角形
.sanjiao{
width: 0;height: 0;
overflow: hidden;
border-width: 10px;
border-color: red transparent transparent transparent;
border-style: solid dashed dashed dashed
}
less中我们可以使用匹配模式,如.triangle(top,@w:5px,@c:#ccc)，让三角形有更好的复用性
.triangle(top,@w:5px,@c:#ccc){
border-width: @w;
border-color: transparent transparent transparent @c;
border-style: solid dashed dashed dashed
}
//@_ 表示继承上面.triangle的样式
.triangle(@_,@w:5px,@c:#ccc){
width: 0;height: 0;
overflow: hidden;
}
.sanjiao{
.triangle(top)
}
运算，可以的使用+-*/等运算符对宽度、高度、颜色进行运算（一般不建议使用）等
@test_01:300px;
.box_02{
width: @test_01+205;//宽度为300+205=400px
color:#ccc-10;//减法颜色会变淡，#c2c2c2
}
嵌套，功能强大，可以让我们像写html的结构一样写css;
div{
ul{
li{ }
}
}

![F%HTLYTS1~H]POCDP`9KXJK.png](https://img.haomeiwen.com/i3361706/cc044452c4f98dc8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

arguments，类似于JS中arguments类数组
.border_arg(@w:30px,@c:red,@xx:solid){
boder:@arguments;//代表（）中的三个参数
}
.test_arguments{
.border_arg();
}
避免编译 ~'xxxx ',主要是有些属性less编译成css会让浏览器无法解析，这里以CSS3中的calc()计算属性
//编译前
.test_04{
width: 300px;
height:calc(300px-30px);//让浏览器计算为300-30=270px
}
//编译后
.test_04 {
width: 300px;
height: calc(270px);//失去了计算的意义，浏览器不起作用
}
// 避免编译使用
.test_03{
width: 300px;
height:~'calc(300px-30px)';
}
//编译后仍就保持原样
.test_03 {
width: 300px;
height: calc(300px-30px);
}
!important 使用增加优先级
//编译前
.border-radius(@radius:5px){
-webkit-border-radius:@radius;
-moz-border-radius:@radius;
border-radius: @radius;
}
.test_important{
.border-radius()!important;
}
//编译后
.test_important {
-webkit-border-radius: 5px !important;
-moz-border-radius: 5px !important;
border-radius: 5px !important;
}

3.安装less的编译软件

最简单的是国产软件koala，使用很简单,很强大，可以编译多种CSS的预处理语言，如less,sass,compass等，适合新手使用，安装很简单，可以报错提示，可以实施编译，相当好用！
网址：koala
nodejs安装包，可以结合gulp使用，通过npm install gulp-less的包，再去配置gulpfile.js中的任务，实现工程化自动编译less语言，比较复杂，不适合新手。
第三种就是让浏览器解析，不用安装软件，直接在html的文件<head></head>中引入less.js,而且less.js必须放在style.less的后面
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
建议新手练习less,sass等语法时可以直接使用koala软件，或是到js.jirengu.com直接练习，node的安装less包有了一定命令行基础和前端gulp等工具的经验使用，但是node执行不能很简单实时编译，每次修改后都要重新执行任务（备注：当然有些大神肯定会配置，反正我是不会）
参考资料：less文档

less入门

1. 什么是less?

2.怎么使用less?

less 语法

3.安装less的编译软件

猜你喜欢

热点阅读