婷林物语样式
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
2
3
4
5
6
7
8
9
10
11
变量
@定义变量, 变量里面又可以引用变量.
@banner-width: 1360px;
@height: @banner-width + 100px;
height: @height;
1
2
3
4
2
3
4
转义
可以理解为原样输出, 用
~'需要转义的内容'
映射
#color() {
bgcolor: #f00;
fontcolor: #5c5c5c;
}
div {
color: #color[fontColor];
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
混入
.bgc {
background-color: #fff;
}
div {
.bgc;
}
1
2
3
4
5
6
7
2
3
4
5
6
7
函数
scss
变量
1