What is a .scss file?
Sassy CSS · Code and data · Hampton Catlin / Sass team · 2010
A .scss file is Sass source in the CSS-like SCSS syntax. Sass extends CSS with variables, nesting, mixins and functions, then compiles down to ordinary CSS the browser can use.
What is a .scss file used for?
SCSS is a superset of CSS: any valid CSS is also valid SCSS, so you can adopt it gradually. Its variables and nesting make large stylesheets far easier to maintain than plain CSS.
A compiler such as Dart Sass turns .scss into .css before the browser sees it. The files are plain text and open in any editor.
How to open a .scss file
The .scss format opens in the following apps, grouped by operating system. If one app does not work, try another from the same list. For a step-by-step walkthrough, see how to open a .scss file.
Windows
- VS Code
- WebStorm
- any text editor
macOS
- VS Code
- WebStorm
- any text editor
Linux
- VS Code
- vim
- any text editor
How to convert a .scss file
You can convert a .scss file to css using a conversion tool or the export menu of an app that opens it.
.scss file signature (magic bytes)
Programs recognise a .scss file by the bytes at the start of the file, not by its name. These are the signatures for SCSS.
| Hex signature | Offset | Note |
|---|---|---|
| (no fixed signature) | 0 | plain text; no fixed magic bytes |
See the full magic-numbers reference for every format.
Frequently asked questions
What is a .scss file?
A .scss file is Sass source in the CSS-like SCSS syntax. Sass extends CSS with variables, nesting, mixins and functions, then compiles down to ordinary CSS the browser can use.
What is the difference between SCSS and CSS?
SCSS adds variables, nesting, mixins and functions on top of CSS, then compiles to plain CSS. Every valid CSS file is also valid SCSS.
What is the difference between SCSS and Sass?
They are two syntaxes for the same language. SCSS uses braces and semicolons like CSS; the older .sass syntax uses indentation instead.
How do I compile SCSS to CSS?
Run a Sass compiler such as Dart Sass (sass input.scss output.css), or let your build tool do it automatically.
Related formats
Sources
Details on this page were checked against authoritative references: