46、less

最新推荐文章于 2024-07-25 19:12:52 发布

原创最新推荐文章于 2024-07-25 19:12:52 发布 · 217 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

50 篇文章

订阅专栏

文章目录

介绍
less

介绍

本文是在学习CSS时做的学习笔记，所有笔记内容为 CSS学习笔记

less

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>meta</title>
</head>
<style>

1\less是css的预处理语言
   - less是css的增强，通过less编写更少的代码实现更强大的样式
   - 在less中添加了许多的新特性，像对变量的支持，对minin的支持
   - less的语法大体上和css语法一致的，但是less增添了许多对css的扩展
    
   

html{
    /*css原生也支持变量的设置*/
    --color:#bfa
}
.box1{
    width:100px;
    height:100px;
    /* 使用变量 */
    background-color:var(--color)
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>

</body>
</html>

style.less
body{
    width:100px;
    height:100x;
    div{
        color:red;
    }
}

less语法

syntax.less
// less中的单行注释，注释中的内容不会被解析到css中
/*
  css中的注释，内容会被解析到css中
*/
.box1{
    background-color:#bfa
    .box2{
        background-c0lor:#ff0
        .box4{
            color:red
        }
    }
    .box3{
        background-color:orange
    }
}

1、 变量，在变量中可以存储任意一个值
     并且可以在需要时，任意修改变量中的值
     变量标志，@变量名
@a:100px;
@b:#bfa;
@c:box6;
.box5{
    1、使用变量时，如果直接使用则以@变量名的形式使用即可
    width:@a;
}

   2、作为类名使用，或者一部分值使用时，必须以@{变量名}的形式使用
.@{c}{
    width:200px;
    background-image:url("@{c}/1.png")
}
@d:200px;
@d:300px；
div{
    3、 变量发生重名时，会优先使用比较近的变量
    @d:115px;
    width:@d;
    height:@e
}

4、 可以在变量声明前就使用变量
@e:15px;

div{
    width:300px;
    5、直接引用width的值
    height:$width;
}

.box1{
    .box2{
        color:red
    }
    1、子元素选择器
    >.box3{
        color:orange
    }
    
    2、为box1设置一个hover
          & 就表示外层的父元素
    &：hover{
        color:orange
    }
    
    div &{
        color:red
    }
}
.p1{
    width:100px;
    height:200px;
    
}
3、扩展，对我们当前选择器扩展指定选择器的样式(选择器分组)
.p2:extend(.p1){
    color:red
}
.p2{
    width:100px;
    height:200px;
    color:red
}
.p3{
  4、 直接对指定的样式进行引用，这里相当于将p1的样式在这里进行了复制
     mixin 混合
    .p1()
}
5、使用类选择器可以在选择器后添加一个括号，这时我们实际上就创建了一个
   mixins
.p4(){
    width:100px;
    height:100px;
    bacground-color:#bfa
}

混合函数

1、混合函数 在混合函数中可以直接设置变量
 可以指定默认值
.test(@w:100px,@h:200px){
    width：@w;
    height:@h;
    border:1px solid red;
}
div{
    // 调用混合函数，按照顺序传递参数
    .test(200px，100px);
    // 按照名字写好
    .test(@bg-color:red,@h:100px,@w:300px);
}

span{
    // 取两个颜色的平均
    color:average(red,blue)
    
    font-size:average(100px,300px)
}

html{
    width:100%;
    height:100%;
}
body{
    width:100%;
    height:100%;
    background-color:bfa
}
body:hover{
   // 加深颜色 50%
    background-color:darken(#bfa,50%)
}

less补充

1、import用来将其它less引入当前less
import syntax.less
.box1{
    2、在less中所有的数值都可以直接进行运算
    // + - * /
    width:100px+100px
    height：100px-50px;
}