Fifty-nine separate tools. Most of them answer one question. The category still looks like one big converter.
A beautifier inserts line breaks. A validator names a bad property. A dialect converter rewrites the lines the target language shares, then flags the rest.
Gray cells are missing pages.
Rows are the language you have. Columns are the language you want. Two links in one cell are two different jobs. A gray cell is a direction with no tool.
Paste is the whole input. An import, a plugin, or a partial in another folder stays unresolved. The SCSS compiler is the exception: one partial per tab, imported from an entry file. Everywhere else, a missing partial stays missing.
| From | To CSS | To LESS | To SCSS | To SASS | To Stylus |
|---|---|---|---|---|---|
| CSS | No page | ||||
| LESS | |||||
| SCSS | |||||
| SASS | No beautifier | ||||
| Stylus | No beautifier |
Scroll the grid sideways on a phone. The gray cells are the part worth reading.
Plain CSS also has a validator and a minifier. They do not change language, so they sit outside the grid. The validator reports syntax errors and unknown properties, each with a line number. A passing report is not a working layout. The minifier drops comments and whitespace. Spaces inside calc() stay. Quoted strings stay. A license comment opening with /*! stays. Gzip size shows before against after. Leave a file you still have to edit in the beautifier.
Plain CSS into LESS nests by selector and leaves repeated values repeated. Plain CSS into SCSS nests, pulls breakpoints into the blocks they change, and names repeated colors as variables. Those names are mechanical. Rename them before a review. Plain CSS into Stylus is a punctuation setting: braces off, colons off, with a colon kept wherever dropping one would change the parse. There is no plain CSS into indented SASS page. Hop through SCSS to SASS when indented SASS is the goal, then read the flags on the second pass. A flag is a line the target language does not share.
Cross-dialect cells are where a green file still needs a person.
The LESS compiler runs official Less 4, ranks selectors by specificity, and lists declarations repeated by mixin calls. Imports and plugins stay off. A project file fails here once an import is required. The failure is useful. You see the sheet alone, with the rest of the repo left out. LESS to CSS is the other hop to CSS: Less 3 or Less 4 division, a minify toggle, and the source line of a compile error. Specificity questions belong on the compiler. Division questions belong on LESS to CSS.
The SCSS compiler is the only page accepting more than one file. SCSS to CSS is a single paste, expanded or compressed, with the flattened selectors listed beside the output. The SASS compiler takes indented SASS, the form without braces or semicolons. SASS to CSS spells out = and + mixin shorthand, loops, and color functions. Plain nesting works on either page. Shorthand mixins belong on SASS to CSS. Stylus to CSS resolves variables, expands mixins, flattens nesting, and lists every skipped line with a reason.
Stylus to SCSS is the migration page: dollar variables, braces, semicolons. Stylus to LESS reads the file twice so bare variable names get found, then files every line LESS has no spelling for. Stylus to SASS looks cheap because both dialects drop braces. The edit is variable and mixin notation. LESS to SCSS rewrites variables, interpolation, mixin calls, guards, and extends, then flags every line Sass reads differently. LESS to SASS does the same rewrite into indented syntax and flags LESS-only constructions. LESS to Stylus asks which dialect you write: bare, with colons, or with braces.
SCSS to LESS rewrites variables and mixins. Maps, modules, and placeholders stay flagged. LESS has no spelling for them. SCSS to Stylus keeps the braces or strips them. You pick before copying. Mixins, loops, and extend carry across. SASS to SCSS puts braces and semicolons back and expands = and +. SASS to LESS rebuilds braces from whitespace, renames $ to the at-sign, and lists every line LESS has no spelling for, by number. SASS to Stylus rewrites variables, mixins, loops, maps, and math.div. You choose whether the dollar sign stays on the name.
Read the flags. Then copy.
REM follows the root. EM follows the parent and compounds. Percent on font-size follows the parent too, so 1.2em and 120% describe the same type size. Matching digits do not match: 1.2rem follows the root, and 1.2% is a sliver of the parent. Percent on width follows the containing block. Font size is a different base. The converters print a number either way. The number means something only against the base you typed.
The EM to point page includes a nesting calculator because EM compounds. The REM pages do not. Points are absolute, so a REM to point result stops scaling when a reader bumps the browser text size. Use REM to point for a print stylesheet. The same warning sits on PX to point, which treats 1px as 0.75pt at 96 DPI. PX to REM is the page with a scale preview when the design file handed you pixels and the stylesheet speaks rem.
PX to percent and percent to PX ask for a parent width. Percent to EM asks for a font size. Same word, two bases. Feed a font size into the width pair and you get a confident wrong number.
| From | To px | To em | To rem | To % | To pt |
|---|---|---|---|---|---|
| px | Same unit | PX to EM | PX to REM | PX to % | PX to pt |
| em | EM to PX | Same unit | No page | EM to % | EM to pt |
| rem | REM to PX | No page | Same unit | REM to % | REM to pt |
| % | % to PX | % to EM | % to REM | Same unit | % to pt |
| pt | pt to PX | pt to EM | pt to REM | pt to % | Same unit |
Ten generators. Each one emits a declaration you paste somewhere else. None of them share tokens with the next page.
clip-path. The border method sets width and height to zero, so the element has no inner box for text. Clip-path keeps the box.prefers-reduced-motion query. Add one before the animation ships.Indent and line breaks are the whole job. Selectors stay as pasted. Unknown properties belong on the validator, and each finding comes back with a line number. A clean validator report still says nothing about overflow at 320px.
The compiler runs Less 4, ranks selectors by specificity, and lists declarations repeated by mixins. Imports stay disabled. LESS to CSS is where you switch Less 3 or Less 4 division, minify, and read the error line. Audit on the compiler. Division bugs on LESS to CSS.
A single paste belongs on SCSS to CSS. Partials belong on the SCSS compiler, one file per tab, imported from an entry file. A partial you left closed is a partial the compile never saw.
No. Formatters, converters, compilers, unit math, and generators run in the tab. A token in the file stays on the machine. Someone at your shoulder still reads the file.
VW includes the scrollbar. The converter counts the scrollbar too. Fluid type built from vw overflows a tight box for the same reason. VH has a different trap: phone browsers change the height when the toolbar hides, so a desktop number will not match the device.
No shared tokens cross from the gradient page to the button page. The button page is the only one showing rest, hover, focus, and disabled together. The result is still a single button. Build the library in the repo.
The CSS tools index lists the same 59 tools as cards, without these limits. Open the index when you already know the slug. Stay on this page when you do not. Other category notes live on the resources list.