less 基本使用

less是什么

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

less的编译工具

    我前端开发使用的是HBuilder编译工具，在HBuilder中提供了less的编译插件。打开工具--安装插件里面有less、scss编译插件点击安装；

     打开工具中的预编译器设置点击新建：a文件后缀为：.less；b触发命令地址就是less.cmd所在的地址，可以在你的HBuilder安装目录下搜索一下文件，填写地址D:\software\HBUILDER\HBuilder_7.6.2\plugins\com.pandora.nodejs.thrift_1.0.0.201609081718\js\node_modules\.bin\lessc.cmd  ;c命令参数：%FileName% %FileBaseName%.css

     最后确定就好啦，以后每次的less文件有所改动保存的时候就会自动编译了。

less的使用

    l、直接引用css文件 

     比如less编译后的index.css文件<link rel="stylesheet" type="text/css" href="css/index.css"/>

    2、less中声明变量一定要用@开头  例如：@变量名：值；@text-width：300px；

    3、mixins（混合）：Mixins是一种复用代码的方式。它被叫做 "Mixin in"  mixin使我们能将一个css样式混合到另外一个css样式中去。创建一个mixin十分简单，仅需要将要混合的样式包含到当前样式里。如：

  index.less:  

.myStyle {  
  color: #333;  
  border: 1px solid gray;  
}  

#myDiv {  
  .myStyle  
} 

  index.css:

 

 

.myStyle {  
  color: #333;  
  border: 1px solid gray;  
}  
  
#myDiv {  
  color: #333;  
  border: 1px solid gray;  
} 

  4、嵌套

 

   我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。

      &代表它的上一层选择器

index.less 文件

 

#myDiv {  
  background-color: black;  
  a {  
    color: red;  
  }  
    
  p {  
    color: white;  
  }  
} 

 index.css文件

 

 

#myDiv {  
  background-color: black;  
}  
  
#myDiv a {  
  color: red;  
}  
  
#myDiv p {  
  color: white;  
}

  5、运算

 

   任何数字、颜色或者变量都可以参与运算，运算应该被包裹在括号中。

 

@text-width:300px;
.mydiv{
    width:@text-width-20; //宽度为280px
}

 6、@arguments 变量

   @arguments 包含了所有传递进来的参数。

 7、!important关键字

   会为所以混合所带的样式，添加上!important

 8、less文件中可以引入less文件和css文件

      @import"文件名"   //这种是引入less文件后缀可有可无 ；

      @import(less)"文件名.css";    //这是引入css文件需要后缀；