zx-css
Commonly used css styles
npm i zx-css
# or
yarn add zx-cssUsage
Default
Import in .js/.ts file
// main.js/ts
// css
import 'zx-css'
// scss
import 'zx-css/src/index.scss'
// Import only common scss
import 'zx-css/src/common/index.scss'Custom
scss/vars/index.scss
@import "/node_modules/zx-css/src/vars";
// Override the _calc method (重写_calc方法)
@function _calc($val) {
@return calc(1rem / 16 * #{$val});
}scss/common/index.scss
@import "/node_modules/zx-css/src/reset";
@import "/node_modules/zx-css/src/common";
// ...main.js/ts
import 'scss/common/index.scss'Register global variables
vite
vite.config.js
import { defineConfig } from 'vite'
export default defineConfig({
// ...,
css:{
preprocessorOptions: {
// Register global variables
scss: {
// additionalData: `@import "zx-css/src/vars/index.scss";`
additionalData: `@import "scss/vars/index.scss";`
}
}
}
})webpack 5.x
webpack.config.js
module.exports = {
// ...,
module: {
rules: [
{
test: /\.s(c|a)ss$/,
use: [
'style-loader',
'css-loader',
'sass-loader',
{
// https://www.npmjs.com/package/style-resources-loader
loader: 'style-resources-loader',
options: {
// patterns: ['zx-css/src/vars/index.scss'],
patterns: ['scss/vars/index.scss'],
},
}
],
},
],
},
}scss @mixin
clamp($line)
The clamp CSS property allows limiting of the contents of a block container to the specified number of lines.
// https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp
.line-clamp {
@include clamp(3);
}border($position, $color, $size)
.border-top {
// border-top: 2px solid #ccc;
@include border(top, #ccc, 2);
}scss @function
_calc($input)
width: _calc(100);
// Use rem to overwrite, calc(1rem / 16 * #{$val});
// width: calc(1rem / 16 * 100);
// Use vw to overwrite, calc(100vw / 750 * #{$val});
// width: calc(100vw / 750 * 100);Common CSS
m/p[n] (margin and padding)
.m-40, .m-35, .m-30, .m-25, .m-20, .m-19, .m-18, .m-17, ...., .m0, .m1, .m2, .m3, .m4, ...., .m19, .m20, .m25, .m30, .m35, .m40, .m45, .m50
.p-40, .p-35, .p-30, .p-25, .p-20, .p-19, .p-18, .p-17, ...., .p0, .p1, .p2, .p3, .p4, ...., .p19, .p20, .p25, .p30, .m35, .p40, .p45, .p50
m margin, p padding
mt margin-top, mr margin-right, mb margin-bottom, ml margin-left
pt padding-top, pr padding-right, pb padding-bottom, pl padding-left
mh/ph: margin/padding horizontal(ml and mr), mv/pv: margin/padding vertical(mt and mb)
<div class="m20 pv20">
margin: 20px; padding-top: 20px; padding-bottom: 20px;
</div>
<div class="mt-20">
margin-top: -20px;
</div>fs[n] (font-size)
.fs10, .fs12, .fs14, .fs16, ...., .fs38, .fs40
<div class="fs20">
font-size: 20px;
</div>ell
<div class="ell" style="width: 200px">
The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('…'), or display a custom string.
</div>break
<div class="break" style="width: 200px">
breakwordbreakwordbreakwordbreakwordbreakwordbreakwordbreakwordbreakwordbreakwordbreakword.
</div>wrap
<div class="wrap">
white-space: initial !important;
</div>flex wrap
<div class="flex wrap">
flex-wrap: wrap;
</div>nowrap
<div class="nowrap">
white-space: nowrap !important;
</div>bold
<div class="bold">
font-weight: bolder !important;
</div>justify
<div class="justify">
text-align: justify;
</div>pointer
<div class="pointer">
cursor: pointer;
</div>block
<div class="block">
display: block !important;
</div>center
<div class="center">
text-align: center;
</div>flex center
<div class="flex center">
display: flex;
align-items: center;
justify-content: center;
</div>left
<div class="left">
text-align: left;
</div>right
<div class="right">
text-align: right;
</div>flex right
<div class="flex right">
display: flex;
align-items: center;
justify-content: flex-end;
</div>flex
<div class="flex">
display: flex;
align-items: center;
</div>inline
<div class="inline">
display: inline;
</div>flex inline
<div class="flex inline">
display: inline-flex;
align-items: center;
</div>flex column
<div class="flex column">
flex-direction: column;
</div>flex between
<div class="flex between">
display: flex;
align-items: center;
justify-content: space-between;
</div>flex wrap
<div class="flex wrap">
display: flex;
flex-wrap: wrap;
</div>