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.
What opens 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.
Windows
- VS Code
- WebStorm
- any text editor
macOS
- VS Code
- WebStorm
- any text editor
Linux
- VS Code
- vim
- any text editor
Open a .scss file step by step
- Confirm the file really is a .scss. Drop it into the WhatFileType identifier, which reads its signature in your browser without uploading anything.
- On Windows, open it with VS Code or WebStorm.
- On Mac, use VS Code or WebStorm.
- On Linux, try VS Code or vim.
- Still stuck? Convert the .scss to css, which opens more widely.
Why can't I open my .scss file?
Almost always because no installed app understands SCSS. Install one of the apps above, or convert the file to a format your existing software already reads. If double-clicking opens the wrong program instead of nothing at all, the file association is set to the wrong app rather than the file being broken.
The other possibility is that the file is not really a .scss at all. Drop it into the file identifier to check it by its bytes instead of its name. Nothing is uploaded.
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 has no fixed magic number, so there is no signature table on this page. Its bytes alone do not prove the format: identification relies on the extension, the structure of the content and the program that created it. The magic-numbers reference lists the formats that do carry one.
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. How sources are ranked and what is deliberately left out is set out in the methodology.