婷林物语

样式

dl-css

个人基于 tailwind-css 的灵感, 封装的 css 工具库

已经发布包, 使用方法: npm i dl-css, 然后在 package.json 中注册一个 script, style: node ./node_modules/dl-css/index.js, 然后引入生成的 css 文件, import './node_modules/dl-css/index.css'

less

准备工作

安装 less 和 less-loader

配置 webpack 的 loader

  rules: [
      {
        test: /\.less$/i,
        loader: [
          // compiles Less to CSS
          'style-loader',
          'css-loader',
          'less-loader',
        ],
      },
    ],
1
2
3
4
5
6
7
8
9
10
11

变量

@定义变量, 变量里面又可以引用变量.

@banner-width: 1360px;
@height: @banner-width + 100px;

height: @height;
1
2
3
4

转义

可以理解为原样输出, 用~'需要转义的内容'

映射 

#color() {
  bgcolor: #f00;
  fontcolor: #5c5c5c;
}

div {
  color: #color[fontColor];
}
1
2
3
4
5
6
7
8

混入 

.bgc {
  background-color: #fff;
}

div {
  .bgc;
}
1
2
3
4
5
6
7

函数

https://lesscss.cn/functions/

scss

变量
1