less语法总结学习

1.变量

1.属性值作为变量

@color:#333;
div{
  background：@color；
}

2.选择器作为变量

@mySelector: #wrap;
@Wrap: wrap;
@{mySelector}{ //变量名 必须使用大括号包裹
      color: #999;
       50%;
 }
 .@{Wrap}{
      color:#ccc;
 }
 #@{Wrap}{
      color:#666;
 }  
  /* 生成的 CSS */
 #wrap{
      color: #999;
       50%;
 }
.wrap{
      color:#ccc;
 }
#wrap{
      color:#666;
 }

3.属性值作为变量　

     @borderStyle: border-style;
      @Soild:solid;
      #wrap{
        @{borderStyle}: @Soild;//变量名 必须使用大括号包裹
      }
      /* 生成的 CSS */
      #wrap{
        border-style:solid;
      }

4.url路径作为变量

     @images: "../img";//需要加引号
      body {
        background: url("@{images}/dog.png");//变量名 必须使用大括号包裹
      }
      /* 生成的 CSS */
      body {
        background: url("../img/dog.png");
      }

5.申明变量作为方法 eg：@name{}；

    @background: {background:red;};
      #main{
          @background();
      }
      @Rules:{
           200px;
          height: 200px;
          border: solid 1px red;
      };
      #con{
        @Rules();
      }
    
      /* 生成的 CSS */
      #main{
        background:red;
      }
      #con{
         200px;
        height: 200px;
        border: solid 1px red;
      }

6.变量运算

规则：

加减法时，以第一个数据的单位为基准。

乘除法时，注意单位一定要统一。

      @300px;
      @color:#222;
      #wrap{
        @width-20;
        height:@width-20*5;
        margin:(@width-20)*5;
        color:@color*2;
        background-color:@color + #111;
      }
      /* 生成的 CSS */
      #wrap{
        280px;
        height:200px;
        margin:1400px;
        color:#444;
        background-color:#333;
      }

7.变量的作用域

就近原则，不是指代码的位置，而是指代码的层级结构。

@color:red;
div{
  @color:blue;
  background: @color;
}

8.用变量定义变量

解析的顺序是从后向前逐层解析。

      @fnord:  "I am fnord.";
      @var:    "fnord";
      #wrap::after{
        content: @@var; //将@var替换为其值 content:@fnord;
      }
      /* 生成的 CSS */
      #wrap::after{
        content: "I am fnord.";
      }

2.嵌套　

1.&符号，表示的是上1级选择器的名字。

     #header{
        &:after{ //注意：不能省略&，如果省略会给每一个子元素添加一个after。
          content:"Less is more!";
        }
        .title{
          font-weight:bold;
        }
        &_content{//理解方式：直接把 & 替换成 #header
          margin:20px;
        }
      }
      /* 生成的 CSS */
      #header::after{
        content:"Less is more!";
      }
      #header .title{ //嵌套了
        font-weight:bold;
      }
      #header_content{//没有嵌套！
          margin:20px;
      }

2.嵌套覆盖原有样式

div{
  200px;
  height:200px;
  background:red;
  .show{
      display: none;
  }
}
.show{
  display: block; //被覆盖，只有在div使用show时才覆盖
}

3.媒体查询

css写法：

@media only screen and {max-width：1200px；}{
  div{}
}
@media only screen and  {min-992px;}{
  div{}
}
@media only screen and {min-768px}{
  div{}
}

less写法：

#main{
  @media screen{
      @media (max-768px){
        100px;
      }
  }
  @media tv {
    2000px;
  }
}
/* 生成的 CSS */
@media screen and (max-768px){
  #main{
      100px;
  }
}
@media tv{
  #main{
    2000px;
  }
}

4.混合方法

1.基本方法

要点：“.”与“#”都可以作为方法前缀。可以不适用小括号，但是为了避免css格式混淆，建议加上小括号“（）”。

.card(){
  background: red;
}
#post(){
  color: #fff;
}
// 或者
.card{
  background: red;
}
#post{
  color: #fff;
}
#wrap{
  .card();
  #post();
}
//生成的css
.card {
  background: red;
}
#post {
  color: #fff;
}
#wrap {
  background: red;
  color: #fff;
}

2.传参的方法，第一传入默认参数，第二可以传入不定参数，类似函数

.setSize(@width_size,@height_size){
  @width_size;
  height:@height_size;
}
.card(){
  background: red;
}
.setFont(@color:#fff,@fontSize:20px){
  color: @color;
  font-size: @fontSize;
}
.boxShadow(...){
  box-shadow: @arguments;
}
.textShadow(@a,...){
  text-shadow: @arguments;
}
#wrap{
  .setSize(100px,200px);
  .card();
  .setFont();
  .boxShadow(1px,4px,30px,blue);
  .textShadow(1px,4px,30px,green);
}
//生成的css
#wrap {
   100px;
  height: 200px;
  background: red;
  color: #fff;
  font-size: 20px;
  box-shadow: 1px 4px 30px blue;
  text-shadow: 1px 4px 30px green;
}

3.多个方法的情况下的匹配

类似于多态。有点类似于switch case

同一个方法名的多个方法，由于传入的参数不同而实现不同的功能。

.triangle(top,@20px,@color:#000){
  border-color:transparent  transparent @color transparent ;
}
.triangle(right,@20px,@color:#000){
  border-color:transparent @color transparent  transparent ;
}

.triangle(bottom,@20px,@color:#000){
  border-color:@color transparent  transparent  transparent ;
}
.triangle(left,@20px,@color:#000){
  border-color:transparent  transparent  transparent @color;
}
.triangle(@_,@20px,@color:#000){
  border-style: solid;
  border- @width;
}
#main{
  .triangle(left, 50px, #999)
}
/* 生成的 CSS */
#main{
border-color:transparent  transparent  transparent #999;
border-style: solid;
border- 50px;
}

4.方法的嵌套用法，类似js的对象

在 CSS 中> 选择器，选择的是儿子元素，就是必须与父元素有直接血源的元素。 - 在引入命令空间时，如使用 > 选择器，父元素不能加括号。 - 不得单独使用命名空间的方法必须先引入命名空间，才能使用其中方法。 - 子方法可以使用上一层传进来的方法

#card(){
  background: #723232;
  .d(@w:300px){
       @w;
      #a(@h:300px){
          height: @h;//可以使用上一层传进来的方法
           @w;
      }
  }
}
#wrap{
  #card > .d > #a(100px); // 父元素不能加 括号
}
#main{
  #card .d();
}
#con{
  //不得单独使用命名空间的方法
  //.d() 如果前面没有引入命名空间 #card ，将会报错
  #card; // 等价于 #card();
  .d(20px); //必须先引入 #card
}
/* 生成的 CSS */
#wrap{
  height:100px;
  300px;
}
#main{
  300px;
}
#con{
  20px;
}

5.条件的使用：less具有一个when，and，not与“，”语法

比较运算有：> >= = =< <

=代表是等于

除去关键字true以外的值其他都会被默认为fales

#card{
  // and 运算符 ，相当于 与运算 &&，必须条件全部符合才会执行
  .border(@width,@color,@style) when (@width>100px) and(@color=#999){
      border:@style @color @width;
  }
  // not 运算符，相当于 非运算 !，条件为 不符合才会执行
  .background(@color) when not (@color>=#222){
      background:@color;
  }
  // , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行
  .font(@size:20px) when (@size>50px) , (@size<100px){
      font-size: @size;
  }
}
#main{
  #card>.border(200px,#999,solid);
  #card .background(#111);
  #card > .font(40px);
}
/* 生成后的 CSS */
#main{
  border:solid #999 200px;
  background:#111;
  font-size:40px;
}

6.循环语法

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
     (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}
.generate-columns(4);
/* 生成后的 CSS */
.column-1 {
   25%;
}
.column-2 {
   50%;
}
.column-3 {
   75%;
}
.column-4 {
   100%;
}

7.使用important: 相当于这个方法中的每一个属性都设置了一遍important，不允许覆盖

.border{
  border: solid 1px red;
  margin: 50px;
}
#main{
  .border() !important;  //border里面的每个属性都会被important
}
/* 生成后的 CSS */
#main {
  border: solid 1px red !important;
  margin: 50px !important;
}

8.继承属性：extend是less的一个伪类。它可以继承所匹配声明中的全部样式。

加上all 可以继承所有属性

选择器和扩展之间是允许有空格的：pre:hover :extend(div pre).

可以有多个扩展: pre:hover:extend(div pre):extend(.bucket tr) - 注意这与 pre:hover:extend(div pre, .bucket tr)一样。

扩展必须在最后 : pre:hover:extend(div pre).nth-child(odd)。如果一个规则集包含多个选择器，所有选择器都可以使用extend关键字。

.mainBg{
  background: red;
  .fontSize{
    color: #fff;
  }
}

#main{
  background: green;
   100px;
  height: 100px;
  &:extend(.mainBg);
}
#con{
  background:blue;
   100px;
  height: 100px;
  &:extend(.mainBg .fontSize);
}
#wrap:extend(.mainBg all) {
   100px;
  height: 100px;
  font-size: 30px;
}
//生成的css
.mainBg,
#main,
#wrap {
  background: red;
}
.mainBg .fontSize,
#con,
#wrap .fontSize {
  color: #fff;
}
#main {
  background: green;
   100px;
  height: 100px;
}
#con {
  background: blue;
   100px;
  height: 100px;
}
#wrap {
   100px;
  height: 100px;
  font-size: 30px;
}

9.导入

在less文件中可以引入其他的less文件。使用关键字import。

导入less文件，可以省略后缀。

import “index.less”;
import “index”;

@import可以放在任何地方

@import 'index.less'

加reference属性，不会编译该引入文件，但是可以使用该文件的变量

@import (reference) “bootstrap.less”;

加once属性，表明相同的文件只会被导入一次，而随后的导入文件的重复代码都不会解析。

@import (once) "foo.less";
@import (once) "foo.less"; // this statement will be ignored

加multiple属性，允许导入多个同名文件

@import (multiple) "foo.less";
@import (multiple) "foo.less";

10.避免编译

 #main{
     ~'calc(300px - 30px)';
 }
    
/* 生成后的 CSS */
#main{
    calc(300px - 30px);
}

11.在less中使用js

less语法总结学习

相关推荐