less-postcss

2024-02-23 08:52:22

Less

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端

https://www.bootcss.com/

也可以通过编译工具来进行编译，比如考拉:http://koala-app.com/

全局安装less

npm info
npm i less -D 
lessc -h 查看如何使用
lessc 地址.less  编译成.css   进行编译(源文件到目标文件)

1 变量

@width: 10px;
@height: @width + 10px;

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

编译为：

#header {
  width: 10px;
  height: 20px;
}

2 嵌套

Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。假设我们有以下 CSS 代码：

清楚浮动：开启BFC:伪元素+css-hark

父元素 {
    *zoom：1
}
父元素::after {
    content: "";
    display: block;
    clear: both;
}

编译成：

.父元素 {
  *zoom: 1;
  &:after {
    content: " ";
    display: block;
    clear: both;
  }
}

3 混合

复制到另外一个地方

.clearfix(@a,@b) {
	  background:@a
      color:@b
}

然后在less中进行引入和调用

@import "./mixin.less"
元素 { 
	.clearfix(red,green)；
}

4 继承

继承是对选择器的组合，而不是对样式集的复制,继承的是类：extend.less

.clearfix() {
	  *zoom: 1;
      &:after {
        content: " ";
        display: block;
        clear: both;
}

然后在less中进行引入和调用

元素 { 
	&:extend(.clearfix all)
}

区分混合与继承：

当样式是固定不变的推荐继承,继承的事类，没有办法传变量

公共样式需要动态的（颜色，宽高指定），用混合，混合比较灵活

5 import

@import url

6 PostCss - CSS后置处理器

① 安装node

npm init -y

② 安装postscc-cli

npm install postcss-cli postcss  -D

③ 安装插件

npm install autoprefixer -D  必须要用
npm install cssnano -D

④ 配置文件 .pastcss.js

const autoprefixer = require("autoprefixer");
const  cssnanao =  require("cssnano");
module.exports={
    plugins:[
        autoprefixer(),
        cssnanao
    ]
}

⑤ 编译命令

postcss src/index.css  -o  build/index.css  (源文件到目标文件)

若全局已经有了，则在本地脚本配置

"script": {
	"postcss":"postcss ./src/index.css -o ./src/index/min.css"
}

⑥ 兼容

默认没有做兼容，要用browerlist手动做兼容（github-browerlist）

"browerlist": {
	"cover 99.5%"
}

⑦ 运行

npm run postcss

码农公寓