三十分钟学会 Less
每一门技术的出现都是为了解决现存的问题，同样的，Less 的出现是为了解决 CSS 中过于呆板的写法。Less 官方文档 中对 Less 的使用有详细的介绍，总结一下为：Less = 变量 + 混合 + 函数。如果你对 js 和 css 有所了解，那么就可以很快
2024年08月26日
每一门技术的出现都是为了解决现存的问题，同样的，Less 的出现是为了解决 CSS 中过于呆板的写法。Less 官方文档 中对 Less 的使用有详细的介绍，总结一下为：Less = 变量 + 混合 + 函数。如果你对 js 和 css 有所了解，那么就可以很快
2024年08月26日
#
使用less.js编译
<!--第一步，引入less文件--> <link rel="stylesheet/less" href="01.less"> <!--第二部：引入less.js文件--> <script src="less.js"></script>
2024年08月26日
变量允许我们单独定义一系列通用的样式，然后在需要的时候去调用。所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了
混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。
2024年08月26日
Less是一种流行的CSS预处理器，它扩展了CSS的功能，使得样式表更易于维护和组织。以下是Less的主要语法特性：
1. 变量
使用@符号定义变量：
```less
@primary-color: #4CAF50;
2024年08月26日
- home.jsx文件
import React from "react";
// less
import "./style.less";
// 组件
import AsideView from "./AsideView";
import ContentView from "./ContentView";
import HeaderView from "./HeaderView";
// antd
import { Layout } from "antd";
const { Sider, Header, Content } = Layout;
export default class Home extends React.Component {
constructor(props) {
super(props)
this.state = {
isCollapsed: true
}
}
toggleCollapsed = () => {
this.setState({ isCollapsed: !this.state.isCollapsed })
}
render() {
const {isCollapsed} = this.state
return (
<Layout style={{ height: "100vh" }}>
<Header style={{ padding: "0" }} >
<HeaderView isCollapsed={isCollapsed} toggleCollapsed={() => this.toggleCollapsed()}/>
</Header >
<Layout>
<Sider collapsed={isCollapsed}>
<AsideView />
</Sider>
<Content>
<ContentView />
</Content>
</Layout>
</Layout>
);
}
}
- HeaderView.jsx文件
import React, { Fragment } from "react";
// icon
import {
MenuFoldOutlined
} from '@ant-design/icons'
// css
import "./style.less";
export default class HeaderView extends React.Component {
constructor(props) {
super(props)
this.state = {
isCollapsed: props.isCollapsed
}
}
onCollapseIconClick = () => {
this.props.toggleCollapsed()
}
componentWillReceiveProps(props) {
const {isCollapsed} = props
this.setState({isCollapsed})
}
render() {
const {isCollapsed} = this.state
return (
<div className="header_container">
<div className={isCollapsed ? 'close' : 'logo'}>
<div className="logo_img">logo</div>
</div>
<div className="header_content">
<MenuFoldOutlined onClick={this.onCollapseIconClick} style={{fontSize: '24px', marginLeft: '10px'}}/>
header
</div>
</div>
);
}
}
2024年08月26日
Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。一遍一遍写一大段一大段一样的代码，有木有很乏味，如果要换一个contain为cover呢？编译之后引用css文件 我推荐使用Koala.exe 下载地址 多语言支持 支持Less、Sass、CoffeeScript 和 Compass Framework。实时编译 监听文件，当文件改变时自动执行编译，这一切都在后台运行，无需人工操作。项目配置 支持为项目创建一个全局配置，为文件设置统一编译选项。跨平台 Windows、Linux、Mac都能完美运行。
2024年08月26日
说到less，我们首先肯定会想到css或者scss。那抛开scss，就单独谈谈为什么选择了less，而非css，他们的区别又有那么些呢？