CSS中能否全局设置默认单位为px以省略px后缀？

Short answer: No, vanilla CSS doesn’t support omitting the px suffix for length values. Browsers require explicit units for any numeric value that represents a length (except 0, which works without a unit). Writing padding: 50 25 25 40; directly in your CSS will be treated as invalid and ignored.

But there are practical workarounds using preprocessors or build tools that let you write cleaner code without repeating px everywhere:

1. Use a CSS Preprocessor (Sass, Less, Stylus) #

Preprocessors are built to simplify CSS authoring, and they include features to handle automatic unit appending. For example, in Sass:

You can create a simple helper function to append px to numeric values:

@function px($value) {
  @return $value + px;
}

// Usage:
.my-element {
  padding: px(50) px(25) px(25) px(40);
}

Or, if you prefer even less boilerplate, Sass will automatically interpret unitless numbers as px in contexts where a length is expected (just be cautious—this can cause issues if you mix up values meant to be unitless, like z-index):

.my-element {
  padding: 50 25 25 40; // Sass compiles this to padding: 50px 25px 25px 40px;
}

2. CSS Custom Properties with calc() (Vanilla CSS) #

If you don’t want to use a preprocessor, you can store numeric values in CSS variables and combine them with px using calc():

:root {
  --pad-top: 50;
  --pad-y: 25;
  --pad-left: 40;
}

.my-element {
  padding: calc(var(--pad-top) * 1px) calc(var(--pad-y) * 1px) calc(var(--pad-y) * 1px) calc(var(--pad-left) * 1px);
}

This works in all modern browsers but is a bit more verbose than preprocessor solutions.

3. PostCSS Plugins (Build-Time Conversion) #

If you want to write unitless numbers in your source CSS and have them converted to px automatically during your build process, use a PostCSS plugin like postcss-unitless or configure postcss-pxtorem (usually for px-to-rem conversion) to add px to unitless values instead.

Key Caveat: #

Not all numeric values in CSS are lengths. For example, opacity: 0.8 or z-index: 5 don’t use units. Any solution you choose needs to avoid appending px to these values—preprocessors and PostCSS plugins handle this context-aware conversion better than manual vanilla CSS approaches.

So while you can’t skip px in plain CSS, preprocessors or build tools let you achieve the cleaner syntax you want without breaking your site.

内容的提问来源于stack exchange，提问作者nairb00