umi框架中使用less

# 变量

# 全局变量

// global.less
import '~antd/es/style/themes/default.less'

.mylink{
    color:@primary-color;
}

1
2
3
4
5
6

<div className={mylink}>测试</div>
<div className="mylink">测试</div>

1
2

# 局部变量

// index.less
@width:100px;
@height:@width - 80px;

.header{
    width:@width;
    height:@height;
}

1
2
3
4
5
6
7
8

import styles from './index.less'
<div className={styles.header}>测试</div>

1
2

# 混合

// index.less
// topW 默认1px
.bordered(@topW:1px,@bottomW:2px){
	border-top:dotted @topW black;
	border-bottom:dotted @bottomW black;
}

#a1{
    color:#111;
    // 混入两个边框
    .bordered();
}

.a2{
    color:#111;
    // 混入并传入默认值
    .bordered(2px,4px);
    // 覆盖混合
    border-bottom：solid 5px black;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

import styles from './index.less'
<div id={styles.a1}>测试</div>
<div className={styles.a2}>测试</div>

1
2
3

# 嵌套

// index.less
.nesting{
    color:blue;
    
    h3{
        color:orange;
    }
    
    p{
        color:aqua;
    }
}

1
2
3
4
5
6
7
8
9
10
11
12

import styles from './index.less'
<div className={styles.nesting}>
	<h3>测试</h3>
	<p>测试</p>
</div>

1
2
3
4
5

# 父选择器

运用模块化，会自动加上序列号，我们希望编译后，脱离模块化作用到全局（在局部编写样式作用到全局）

// index.less
.bars_right{
    font-weight:blod;
    // 希望下方选择器作用到全局
    :global{
        .ant_btn{
            border:0;
        }
        
        .title{
            background:#fafafa;
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

import styles from './index.less';
<div className={styles.bars_right}>
    <button className={`ant-btn`}>按钮</button>
</div>

1
2
3
4

上次更新: 2024/08/14, 04:14:33

← Animate.css nvm介绍→