less继承

本是古典何须时尚 2021-10-19 06:16 299阅读 0赞

### **性能比混合高，灵活度比混合低。** ###

加all继承所有的状态。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>less继承</title>
        <link rel="stylesheet" type="text/css" href="css/inherit.css">
    </head>
    <body>
    <div class="test">
        <span class="test1">1</span>
        <span class="test2">2</span>
    </div>
    </body>
    <script type="text/javascript" src="../less.min.js"></script>
    </html>

.inherit {
      display: inline-block;
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
    .inherit:hover{
      background-color:yellow;
    }
    
    .test {
      width: 400px;
      height: 400px;
      border: 1px solid red;
      position: relative;
    
      .test1:extend(.inherit all) {
        width: 100px;
        height: 100px;
        border: 1px solid blue;
      }
    
      .test2:extend(.inherit all) {
        width: 50px;
        height: 50px;
        border: 1px solid yellow;
      }
    
    }

.inherit,
    .test .test1,
    .test .test2 {
      display: inline-block;
      position: absolute;
      margin: auto;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
    }
    .inherit:hover,
    .test .test1:hover,
    .test .test2:hover {
      background-color: yellow;
    }
    .test {
      width: 400px;
      height: 400px;
      border: 1px solid red;
      position: relative;
    }
    .test .test1 {
      width: 100px;
      height: 100px;
      border: 1px solid blue;
    }
    .test .test2 {
      width: 50px;
      height: 50px;
      border: 1px solid yellow;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，299人围观）

还没有评论，来说两句吧...

相关阅读

相关 Less预处理——初识Less

系列文章目录 -------------------- 文章目录系列文章目录一、Less 简介二、安装 Easy LESS

男娘i/ 2023年09月27日 11:44/ 0 赞/ 126 阅读

相关 Less预处理——继承、导入、条件表达式和函数

系列文章目录 -------------------- 文章目录系列文章目录一、继承 1、extend 关键字的使用

落日映苍穹つ/ 2023年09月26日 09:21/ 0 赞/ 46 阅读

相关 less

less > less可以说是动态化的css语言，主要是因为他的代码可以复用 less的使用: 1. 在全局npm 安装less ，并执行`lessc less文件

缺乏、安全感/ 2023年01月07日 01:23/ 0 赞/ 181 阅读

相关 vue lang=“less“ less

文章目录 vue引入lang=“less“的方法以及报错的解决方案第一步：安装 less 和less-loader

客官°小女子只卖身不卖艺/ 2023年01月03日 14:17/ 0 赞/ 262 阅读

相关 less笔记-继承（Extend）

一、Extend Syntax（语法）说明：The extend is either attached to a selector or placed into a rul

- 日理万妓/ 2022年09月25日 15:23/ 0 赞/ 634 阅读

相关 less笔记-less概要

一、概要 As an extension to CSS, Less is not only backwards compatible with CSS, but the ex

刺骨的言语ヽ痛彻心扉/ 2022年09月25日 13:22/ 0 赞/ 283 阅读

相关 LESS详解之编译LESS

　　掌握LESS，必须先掌握LESS的编译。因为LESS是CSS预处理语言的一种，是一种动态语言。LESS可以运行在各种语言和环境中，包括浏览器端、服务器端等。就因为是一种CS

╰+攻爆jí腚メ/ 2022年09月17日 13:11/ 0 赞/ 484 阅读

相关 less （一） less 的环境

less , css的预处理语言，扩展了css ,但是不能直接使用，需要编译成css文件；下面看看如何配置 less 的使用环境；前提：安装node

川长思鸟来/ 2022年05月25日 22:59/ 0 赞/ 316 阅读

相关 less继承

性能比混合高，灵活度比混合低。加all继承所有的状态。 <!DOCTYPE html> <html lang="en"> <head>

本是古典何须时尚/ 2021年10月19日 06:16/ 0 赞/ 300 阅读

相关 less

[预处理器][Link 1]就是在代码交给编译器处理前，预先进行一些处理 less要点：变量，混合，嵌套，函数&运算，扩展 1.链接 <link re

ゞ浴缸里的玫瑰/ 2021年09月16日 04:42/ 0 赞/ 490 阅读