Drop any file to identify it
No upload. No signup. No sending your file halfway across the internet.
We tell you what it is, right here in your browser.
Drop it!
Let go to identify this file.
Couldn't identify this file
Need to convert it? fwip it →
You're looking at a .scss file — CSS with superpowers. SCSS (Sassy CSS) adds variables, nesting, mixins, functions, and partials to standard CSS, making large stylesheets maintainable instead of nightmarish. It compiles to regular CSS that browsers understand.
SCSS is the newer syntax of the Sass preprocessor (the original Sass used indentation instead of braces — SCSS uses standard CSS syntax, making it a strict superset of CSS). Any valid CSS file is also valid SCSS, which means you can adopt it incrementally. Variables (`$primary-color: #4589FF`), nesting (putting `.nav .link` styles inside `.nav`), and mixins (reusable blocks of styles) are the features that make the biggest difference in day-to-day work.
Any text editor opens .scss files. VS Code has built-in SCSS syntax support. To compile SCSS to CSS, use the `sass` CLI tool (`npm install -g sass && sass input.scss output.css`), or let your build tool (Vite, webpack, Parcel) handle it automatically. Note: CSS has caught up significantly — custom properties (variables), nesting (new), and container queries are now native CSS features.