less 基本语法

less 基本语法

变量

//定义变量
@color:red;

div{
  //使用变量
  color:@color;
}

嵌套

div{
  color:red;

  div{
    background-color:red;
  }
}

编译成css之后:

div{
  color:red;
}

div div{
    background-color:red;
}

混合

//定义变量
@color:red;
@baseWidth：2px;

//声明的集合  1、固定
.radius(){
  border-radius:4px;
}  
等同于： 可以不要括号
.radius{
  border-radius:4px;
}

//声明的集合  2、变量形式
.marginFunc(@px){
  margin:@px;
}

//声明的集合  3、变量形式（有默认值形式   当前是默认10px）
.paddingFuncDeafult(@px:10px){
  padding:@px;
}
.c1{
  border:1px solid @color;
  marginFunc(5px);
  //调用声明的集合
  .radius();
  .paddingFuncDeafult();
}

编译成css之后:

.c1{
  border:1px solid red;
  margin:5px;
  border-radius:4px;
  padding:10px;
}

继承 -- extend 是less的一个伪类，他可继承所匹配声明中的全部样式

.animation{
  transition:all .3s ease-out;
  .hide{
    transform:scale（0）；
   }
}

#main{
  &:extend(.animation);
}
等同于 ==>
#main{
   transition:all .3s ease-out;
}

#con{
  &:extend(.animation .hide);
}
等同于 ==>
#con{
    transform:scale（0）;
}

继承的另一种写法：（不想写一起呐）

// 变量名
@color: red;

body {
  background-color: aquamarine;
  // 嵌套
  div {
    font-size: 15px;
    color: @color; //变量用法
    div {
      border: (1+1) px solid lighten(hsl(90, 100%, 50%), 20%);
      padding: 30/4px;
    }
  }
}
.p0 {
  color:violet;
  .p1 {
    font-size: 15px;
    .p2 {
      height: 20px;
    }
  }
}

.div1 {
  &:extend(body);
}

.div3 {
  color: @color;
}
//继承写法
.div2 {
  .div1;
  .div3;
}
//继承写法
.div4 {
  .p0 .p1 .p2;
}
/* 这样就报错了
.div5{
    body div div
} */



===>生成：

body,
.div1,
.div2 {
  background-color: aquamarine;
}
body div {
  font-size: 15px;
  color: red;
}
body div div {
  border: 2 px solid hsl(90, 100%, 70%);
  padding: 30/4px;
}
.p0 {
  color: violet;
}
.p0 .p1 {
  font-size: 15px;
}
.p0 .p1 .p2 {
  height: 20px;
}
.div3 {
  color: red;
}
.div2 {
  color: red;
}
.div4 {
  height: 20px;
}
/* 这样就报错了
.div5{
    body div div
} */

继承中的all 全局搜索替换 使用选择器匹配到的 全部声明 包括子集

#main{
    width:20px
  }

  #main{
    &:after{
      content:"abcdefg";
    }
}
  .wrap{
      &:extend(#main all);
  }


===>生成：

#main,
.wrap {
  width: 20px;
}
#main:after,
.wrap:after {
  content: "abcdefg";
}

## 导入 @import ""
    //允许在less文件中引入其他的less或css文件 
    // 就相当于把要引入的文件复制了一份到当前文件中
    @import 'reset.less';

    @import "index.css"   //意思是直接引入index.css文件（在本样式文件的最上方）
 

函数 内置函数

1、判断函数：

//  isnumber  判断给定的值 是否是一个数字
``` less
  isnumber(#ff0000);   //false
  isnumber(red);   //false
  isnumber('string');   //false
  isnumber(123456);   //true
  isnumber(12px);   //true
  isnumber(12%);   //true
  isnumber(keyword);   //false
  isnumber(url('...'));   //false
```

// 2、iscolor 判断给定的值 是否是一个颜色
// 3、isurl 判断给定的值 是否是一个url

2、颜色操作

// Saturate ：增加一定数值的颜色饱和度
// Lighten：增加一定数值的颜色亮度
// Darken：降低一定数值的颜色亮度
// Fade：给颜色设定一定数值的颜色亮度
// Mix：根据比例混合两种颜色

3、数学函数

// Ceil：向上取整

div{
font-size:Ceil(100/3)px;
}

循环方法：

没有内置循环函数，得用递归自己写

@danger:#ffffff;

//循环
.generate(@n, @i:1) when (@i =< @n){
  .column-@{i}{
    width:(@i * 100% / @n);
    color:darken(@danger,1.5%*@i);
  }
  .generate(@n, (@i + 1));
}

.generate(5);