前端菜鸟必学！less使用基础讲解

前端菜鸟必学！less使用基础讲解

• • 概述
  • 使用方法
  • 语法简介
  • 嵌套规则
  • 实例

概述

less是动态的样式表语言,通过简单,明了的语法定义,使编写css 的工作变得非常简单,在实际项目开发中,大大提高了前端工程师的工作效率。

不过个人觉得less的编写过程较为复杂，若是在平时的小项目中大可不必使用它。但是在大型工程项目中可以实现高效的代码管理，所以less是前端工程师必学的内容之一。

使用方法

使用less语法将样式表达式写进格式为 .less 的文档中，再将less文档编译成css文档直接引入html中使用

编译文档我们需要一个 less 编译的工具：个人推荐使用（考拉）koala。

koala 的下载与安装: http://koala-app
使用方法十分简单，直接拖拽进去 点击编译即可在原文档路径下生成一个css文档，这里不多做介绍。

语法简介

学习less需要有css的基础，原因可通过下文实例自行思考

less 的注释有两种方法
 /*   */ 和    //  
前一种会在 css 文件中显示，后一种不会在 css 显示

嵌套规则

变量延迟加载：同级属性加载完后加载变量 ，从上往下加载。

@var: 0;
.class {
@var: 1;
    .brass {
      @var: 2;
      three: @var;  //=3
      @var: 3;
    }
  one: @var;  //=1
}

定义一个变量，并为它赋上默认参数：

// 形参 实参 都可以写默认参数： @w：10px 

.box1(@w:100px,@h:100px,@c:pink){
    &:extend(.common all);
    
    width: @w;
    height: @h;
    background: @c;

实例

@zero:0;
@selector:wrap;
@url:"../img/zdy.jpg";
*{
    margin: @zero;
    padding: @zero;
}
//用属性名调用变量 要加中括号
#@{selector}{
    position: relative;
    width: 300px;
    height: 300px;
    border: 1px solid;
    margin: @zero auto;
    background: url("@{url}");
}

&可以提级，使变量与其父元素同级。

a{
    float: left;
   
    &:hover{
         /*&代表父级*/
        color: red;
    }
}