Hello less

最新推荐文章于 2024-07-09 17:50:54 发布

zzzz~~~~

最新推荐文章于 2024-07-09 17:50:54 发布

阅读量35

点赞数

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

本文链接：https://blog.csdn.net/weixin_43656326/article/details/135112823

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

less

less是一种动态样式语言，属于css预处理器的范畴，它扩展了css语言，增加了变量、mixin、函数等特性，使css更易维护和扩展

less既可以在客户端上运行，也可以借助node.js在服务端运行。

less中的注释

以//开头的注释不会编译到css文件中

以/**/包裹的注释会被编译到css文件中

less中的变量

使用@来声明一个变量：@pink: pink;

作为普通属性值来使用：直接使用@pink
作为选择器和属性名：#@{selector的值}的形式（很少使用）
作为url：@{url}
变量的延迟加载（less中的变量是块级作用域）

@color: pink;
@m:margin;
@selector:#wrap;
@{selector}{
    @{m}:0;
}

//延迟加载
@var: 0;
.class {
    @var: 1;
    .brass {
        @var: 2;
        @three: @var; //3
        @var: 3;
    }
    one: @var;
}

嵌套规则

基本嵌套规则
&表示平级中间无空格

#wrap {
    .inner {
        &:hover{
            background: pink;
        }
    }
}

less的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

普通混合

//不加（）编译完会编译到css中
.juzhong {
    text-align: center;
}
#wrap {
    .inner{
        .juzhong;
    }
    .inner2{
        .juzhong;
    }
}

不带输出的混合

//加（）编译完不会编译到css中
.juzhong() {
    text-align: center;
}
#wrap {
    .inner{
        .juzhong;
    }
    .inner2{
        .juzhong;
    }
}

带参数的混合

.juzhong(@w,@h,@color) {
    text-align: center;
    width:@w;
    height:@h;
    color:@color;
}
#wrap {
    .inner{
        .juzhong(100px, 100px, pink);
    }
    .inner2{
        .juzhong(200px, 200px, deeppink);
    }
}

带参数并且有默认值的混合

.juzhong(@w:10px,@h:10px,@color:pink) {
    text-align: center;
    width:@w;
    height:@h;
    color:@color;
}
#wrap {
    .inner{
        .juzhong(100px, 100px, pink);
    }
    .inner2{
        .juzhong(200px, 200px, deeppink);
    }
}

带多个参数的混合

命名参数

.juzhong(@w:10px,@h:10px,@color:pink) {
    text-align: center;
    width:@w;
    height:@h;
    color:@color;
}
#wrap {
    .inner{
        .juzhong(@color: pink);
    }
    .inner2{
        .juzhong(@color: deeppink);
    }
}

匹配模式

//03.less
@import "./triangle.less";
    #wrap .sjx{
        .triangle(L, 40px, red);
}

//triangle.less
.triangle(L,@w,@c){
    border-color: transparent @c transparent transparent;
}

//03.less
@import "./triangle.less";
    #wrap .sjx{
        .triangle()
        .triangle(L, 40px, red);
}
//triangle.less
.triangle(){
    width: 0px;
}
.triangle(L,@w,@c){
    border-color: transparent @c transparent transparent;
}

//03.less
@import "./triangle.less";
    #wrap .sjx{
        .triangle(L, 40px, red);
}
//triangle.less
.triangle(@_){
    width: 0px;
}
.triangle(L,@w,@c){
    border-color: transparent @c transparent transparent;
}

arguments变量

.border(@1,@2,@3){
    border:@arguments;
}
#wrap .sjx{
    .border(1px,solid,black)
}

//编译后
#wrap .sjx{
    .border(1px,solid,black)
}

less运算

在less中可以进行加减乘除的运算

@conversion-1: 5cm + 10mm; // 6cm
@conversion-2: 2 - 3cm - 5mm; // -1.5cm
@conversion-3: 3.1 * 2cm; // 6.2cm
@conversion-4: 4px / 2; // 4px / 2

// conversion is impossible
@incompatible-units: 1cm - 1px; // 0.97354167cm

// example with variables
@base: 5%;
@filler: @base * 2; // 10%
@other: @base + @filler; // 15%

@color: #224488 / 2; // #112244
background-color: #112244 + #111; // #223355

less继承

继承可让多个选择器应用同一组属性，最终编译为并集选择器，其性能比混合高，但灵活性比混合低

//less
nav ul {
  &:extend(.inline);
  background: blue;
}
.inline {
  color: red;
}

//css
nav ul {
  background: blue;
}
.inline,
nav ul {
  color: red;
}

Extend “all”
可理解为把 all 前的选择器出现的地方全都替换为 extend 前的选择器,即把 .test 替换为 .replacement 生成一个新的选择器应用样式，且不破坏原有的选择器

//less
.a.b.test,
.test.c {
  color: orange;
}
.test {
  &:hover {
    color: green;
  }
}

.replacement:extend(.test all) {
}

//css
.a.b.test,
.test.c,
.a.b.replacement,
.replacement.c {
  color: orange;
}
.test:hover,
.replacement:hover {
  color: green;
}

避免编译

通过加引号可以避免 Less 编译，直接把内容输出到 CSS 中

//less
.banner .inline .header {
  width: '100px + 100px';
  height: 100px + 100px;
}

//css
.banner .inline .header {
  width: '100px + 100px';
  height: 200px;
}