less布局

最新推荐文章于 2023-02-13 00:13:45 发布

Jayson柴

最新推荐文章于 2023-02-13 00:13:45 发布

阅读量360

点赞数

文章标签： flex布局 Less预处理器变量设置 :global覆盖样式继承

本文链接：https://blog.csdn.net/weixin_45678402/article/details/119424023

版权

一、flex布局

flex-basis的使用：

.parents {
	display: flex;
	flex-wrap: wrap;
	.child1 {
		flex-basis: 100%;
	}
	.child2 {
		flex-basis: 70%;
	}
}

二、less的语法和继承

less 的写法

.position {
	&>span {
		.outDate {
			color: red;
		}
	}
}

less 的继承

.base {
	font-size: 16px;
	color: #fff;
	width: 4px;
	height: 4px;
	transform: rotate(45deg);
}

.content1, .content2 {
	.base;
	line-height: 26px;
}

三、设置变量

// 设置变量
@bg-color: #b7d4a8;

// 清楚默认样式
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box; // width 为内容区 + padding + border 宽度
}

// 设置主窗口的样式
#main {
	width: 360px;
	height: 420px;
	background-color: @bg-color;
}

四、使用global进行格式覆盖

CSS Modules允许使用:global(.className)的语法，声明一个全局规则，凡事这样申明的class，都不会被编译成哈希字符串。

下面的代码：color的颜色被覆盖为green；

.title {
  color: red;
}
:global(.title) {
  color: green;
}

import React from 'react';
import styles from './App.css';

export default () => {
  return (
    <h1 className={styles.title}>
      Hello World
    </h1>
  );
};

这段代码使用Hello world的颜色就是绿色；

使用global的目的在于： 比如说我们引用来antd的一个样式，我们希望覆盖掉它原来的样式，那可以使用:global；那么问题来了，如果大部分样式希望保留antd原来的样式，只有部分组件希望覆盖掉原来的样式，那可以选择下面这种写法：将:global包裹在其他类名下；这样只有wrap下面的global才会覆盖样式。

.wrap {
  width: 100%;
  :global {
    .ant-spin {
      width: 100%;
      height: calc(100vh - 120px);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}