• Less的Extend_Less继承


    Extend就相当于Java的继承,它允许一个选择器继承另一个选择器的样式。Extend有两种语法格式。

    一种是:

    1. <selector>:extend(<parentSelector>) { }

    另一种是:

    1. <selector> {
    2. &:extend(<parentSelector>);
    3. }

    假设有一个 .inline 的类:

    1. .inline {
    2.     color: red;
    3. }

    现在希望 nav ul 选择器能够让继承 .inline类的 color 属性,就可以使用以下两种方式的任意一种来实现:

    1. nav ul:extend(.inline) {
    2. }

    或者

    1. nav ul {
    2.     &:extend(.inline);
    3. }

    这两种方式得到的结果完全相同,编译后的CSS代码为:

    1. .inline,
    2. nav ul {
    3.   color: red;
    4. }

    一个选择器还可以继承多个选择器的属性,只需写多个 :extend 语句就可以了。如,.e 同时继承了 .f 和 .g 的属性:

    1. .e:extend(.f) {}
    2. .e:extend(.g) {}

    为了方便,Less允许仅使用一个 :extend 语句,只需在括号中提供用逗号隔开的选择器列表即可。什么两个 :extend 语句的等价写法为:

    1. .e:extend(.f, .g) {}
  • 相关阅读:
    CSS3---用户界面
    CSS3---媒体查询与响应式布局
    HDU 5285 wyh2000 and pupil
    POJ 2488 A Knight's Journey
    POJ 1067 取石子游戏
    POJ 2777 Count Color
    POJ 3259 Wormholes
    Project Euler 26 Reciprocal cycles
    POJ 2104 K-th Number
    POJ 1013 Counterfeit Dollar
  • 原文地址:https://www.cnblogs.com/waibo/p/7911949.html
Copyright © 2020-2023  润新知