Less总结

最新推荐文章于 2022-06-20 22:05:42 发布

HumbleFool

最新推荐文章于 2022-06-20 22:05:42 发布

阅读量94

点赞数

分类专栏： CSS 基础文章标签： css

本文链接：https://blog.csdn.net/qq_45925322/article/details/115149581

版权

基础同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

CSS

2 篇文章 0 订阅

订阅专栏

Less简介

less 是一门css预处理语言，less是css的增强版，可以使用更强大的功能，在less中添加了许多新特性，对变量的支持，less与css语法一致，增加了扩展，浏览器无法直接执行less代码，需要先编译，转化为css代码，再执行。

Less语法

Less基础

<title>less简介</title>
    <style>
        html{
        /*    css原生也支持变量设置*/
            --color: #bfa;
            --length: 200px;
        }
        .box1{
            width: var(--length);
            height: var(--length);
            background-color: var(--color);
        }
        .box2{
            width: var(--length);
            height: var(--length);
            color: var(--color);
        }
        .box3{
            width: var(--length);
            height: var(--length);
            border: var(--color) 10px solid;
        }
    </style>
</head>
<body>
<!--
       less 是一门css预处理语言
         less是css的增强版，可以使用更强大的功能
         在less中添加了许多新特性，对变量的支持
         less与css语法一致，增加了扩展
           浏览器无法直接执行less代码，需要先编译，转化为css代码，再执行
-->
    <div class="box1">aaaa</div>
    <div class="box2">aaaa</div>
    <div class="box3">aaaa</div>

//单行注释
/* 多行注释
注释内容会编译到css文件
 */
 .box1{
  background-color: #bfa;
  .box2{
    background-color: #ff0;
    .box4{
      background-color: red;
    }
    .box3{
      background-color: orange;
    }
  }
}
//变量，在变量中可以存任何值
//需要的时候可以任意改变变量的值
//变量语法  @变量名
@a:200px;
@b:#bfa;
@c:box5;
.box5{
  //使用变量时如果直接使用  @变量名
  width:@a;
  color:@b;
}
//作为类名或者部分值使用时，必须以@{变量名}的·形式
@{c}{
  width: @a;
  background-image: url("@{c}/1.png");
}
@d:200px;
@d:300px;
div{
  //变量发生重名时，以最下面的为准
  @d:400px;
  width: @d;
  height: @e;
}
@e:200px;
div{
  width:300px;
  height: $width;
}

.box1{
    .box2{
        color: red;
    }
    >.box3{
        color:red;

        &:hover{
            color:blue;
        }
    }
    //为box1设置一个hover
    //&表示外层父元素
    &:hover{
        color:orange;
    }
    div &{
        width: 100px;
    }
}
.p1{
    width:200px;
    height: 200px;
}
//:extend()对当前元素扩展指定选择器样式（选择器分组）
.p2:extend(.p1)
{
    color:red;
}
.p3{
    //直接指定样式进行引用，相当于对原样式的复制
    .p1();
}
//使用类选择器可以再选择器后面加一个括号，创建一个mixin相当于函数
.p4(){
    width:100px;
    height: 100px;
    background-color: #bfa;
}
.p5{
    .p4();
}
//混合函数，如果参数有默认值，则调用函数时可以不设置参数值
//还有一些已经写好的函数，区zeal里面查
.text(@w,@h,@col){
    width:@w;
    height: @h;
    color: @col;
}
div{
    .text(100px, 200px, red);
    // .text(@w：100px, @h:200px, @col:red);
}

HumbleFool

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Less总结

Less简介less 是一门css预处理语言，less是css的增强版，可以使用更强大的功能，在less中添加了许多新特性，对变量的支持，less与css语法一致，增加了扩展，浏览器无法直接执行less代码，需要先编译，转化为css代码，再执行。Less语法Less基础<title>less简介</title> <style> html{ /* css原生也支持变量设置*/ --colo
复制链接

扫一扫

专栏目录