css超集-less

最新推荐文章于 2024-08-12 19:03:59 发布

前端Jason

最新推荐文章于 2024-08-12 19:03:59 发布

阅读量294

点赞数 1

文章标签： less

本文链接：https://blog.csdn.net/qq_44704740/article/details/102852392

版权

前端同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

css

12 篇文章 0 订阅

订阅专栏

less是什么

less是css的超集，css有的less有,css没有的less也有。比如函数、变量、新书写规则
浏览器不认识less 但是可以借助于插件将less 转换成css 浏览器最终还是识别的是css 只是这个css是有less编译过来的
vscode插件：easy less

注意：安装less的时候需要在setting.json文件中添加

"less.compile": {
"out": "../css/"
}

好处

语法简洁以易懂，基本和css一致
有了函数和变量，省事
让代码结构清晰，好折叠

less的使用

注意：less的/**/注释会编译到css文件中，增加文件大小，而//注释不会

less的嵌套

后代选择器: 直接嵌套即可

.father {
  width: 200px;
  height: 200px;
  background-color: red;

  >.son {
    width: 100px;
    height: 100px;
    background-color: green;

    .sun {
      width: 50px;
      height: 50px;
      background-color: blue;
    }
  }

子代选择器: >

.father {
    width: 200px;
    height: 200px;
    background-color: red;
    .son {
        width: 100px;
        height: 100px;
        background-color: green;

    .sun {
        width: 50px;
        height: 50px;
        background-color: blue;
    }
  }

并集选择器: , (选择a和b)

.father {
    width: 200px;
    height: 200px;
    background-color: red;
    .son1,
    .son2 {
        width: 100px;
        height: 100px;
        background-color: pink;
  }
}

交集选择器: 使用& &代表自己（选择既满足a又满足b的元素）

.father {
  width: 200px;
  height: 200px;
  background-color: red;
  &.active {        /*此时&表示.father，既是.father又是.active的元素*/
    background-color: gold;
  }
}

伪元素: 使用& &代表自己

.father {
  width: 200px;
  height: 200px;
  background-color: red;
  &::after {
    content: '';
  }
}

伪类: 使用& &代表自己

.father {
  width: 200px;
  height: 200px;
  background-color: red;
  &:hover {
    background-color: #fff;
  }
}

less计算

@变量名: 变量值;
例：

@val: 100px;
.box {
  width: @val + 200px;
  height: 100 * 100px;
  border: 10px / 5 solid #ccc;
  width: 59 / 50rem;
}

less函数

less的函数就是将一些复用的css做成一个函数供css使用
less的函数的声明 .自定义函数名 () {}
less的函数是不会编译到css当中去的，调用时将复用的css复制粘贴到调用位置
less函数的使用: 直接在css里面调用即可
调用语法: .自定义函数名 ();
例：设置版心公共类和居中效果

.w() {
  width: 1200px;
  margin: 0 auto;
}
.center() {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

header {
  .w();
  .center();
}
nav {
  .w();
  .center();
}
section {
  .w();
  .center();
}

less传参

函数传参的过程
参数的传递过程: 调用函数的时候将函数小括号的值传递给声明函数里面的变量, 如果调用函数的小括号里面没有值会使用默认值,默认值在函数形参中设置
@val: 15px;
函数声明

.br (@val: 10px) {//默认值为10px
  -webkit-border-radius: @val;
  -moz-border-radius: @val;
  -ms-border-radius: @val;
  -o-border-radius: @val;
  border-radius: @val;
}

header {
  // 10px
  // 函数调用
  .br();
}

nav {
  // 5px
  // 函数调用
  .br(5px);
}

section {
  // 15px
  // 函数调用
  .br(15px);
}

footer {
  // 20px
  // 函数调用
  .br(20px);
}