css_less基础

✻只影为谁去

已于 2023-04-13 16:42:48 修改

阅读量81

点赞数 1

分类专栏： css-study 文章标签： css 前端 less

于 2023-03-09 17:22:22 首次发布

本文链接：https://blog.youkuaiyun.com/qq_57226103/article/details/129406734

版权

css-study 专栏收录该内容

12 篇文章

订阅专栏

文章介绍了Less预编译语言的核心特性，包括定义和使用变量、嵌套规则、混合功能（Mixins）、运算以及继承。Less允许开发者通过更高级的语法来编写CSS，提高代码的可维护性和效率。此外，还提到了如何使用注释、避免编译的内容以及编译工具Koala。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介
预编译语言，其他类似还有sass(scss),stylus
less编译工具
koala: www.koala-app.com
less注释

  以"//"开头注释不会被编译到文件中,给开发人员看的
  以"/**/"开头注释会被编译到css文件中

less中的变量

  1.定义普通变量:@color=red
    使用:@color
  2.定义属性变量:@m:margin
    使用:@{m}
  3.定义选择器变量:@select:#main
    使用:@{select}
  4.定义URL变量:@URL:
    使用@{URL}
  5.变量的延迟加载
    @var=0;
    .class{
      @var=1;
      .class2{
        @var=2;
        three:@var;//编译后为3
        @var=3;
      }
      one:@var;//编译后为1
    }

嵌套规则

  .main{
    color:black;
    &:hover{
      color:white;
    }
  }
  //不加&编译后会显示有空格，不生效

less混合(Mixins)

6.1 如果是不带参数混合要写()，列如.common()，否则混合部分会被保存到编译文件中

  .common(@w:100%,@h:100%,@m:0,@p:0){
    //":"后表示默认值
    width:@w;
    height:@h;
    margin:@m;
    padding:@p;
  }
  html{
    .common();
    body{
      .common();
    }
  }

6.2 匹配模式

  @import "triangle";
  .main{
    .triangle(L,100px,red);
  }

triangle.less文件

  .triangle(@_,@w,@c){
    width:0;
    height:0;
  }//默认每次引用triangle都会加载这个,参数数量要和使用时传入一样
  .triangle(L,@w:100px,@c:black){
    border-width:@w;
    border-style:dashed dashed dashed solid;
    border-color:transparent transpanent transparent @c;
  }
  .triangle(R,@w:100px,@c:black){
    border-width:@w;
    border-style:dashed solid dashed dashed;
    border-color:transparent @c transpanent transparent;
  }

6.3 arguments

  .border(@w,@s,@c){
    border:@arguments;
  }
  .main{
    .border(2px,solid,red);
  }

less运算

  .main{
    width:100px + 100;
  }

less继承

  <div class="main">
    <div class="inner"></div>
    <div class="inner"></div>
  </div>

  @import "extend";
  .main{
    width:300px;
    height:300px;
    position:relative;
    background:black;
    .inner{
      &:extend(.jz all);
      &:nth-child(1){
        background:red;
        width:50%;
        height:50%;
      }
      &:nth-child(2){
        background:skyblue;
        width:20%;
        height:20%;
      }
    }
  }

extend.less文件

  .jz{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
  }
  .jz:hover{
    background:pink ！important;
  }

less避免编译

  ～"避免编译内容"