Skip to content

Sass

Keep repeated styling choices such as field spacing in one place across forms that share source files.

Visit Sass

What does Sass do before a browser sees your page?

Sass takes an editable stylesheet and turns it into ordinary CSS. The browser reads the CSS output. Your form still comes from HTML or app components.

You may see source files ending in .scss. A compiler is the program that reads those files and produces the stylesheet your page can load.

$form-gap: 1rem;

.appointment-form {
  display: grid;
  gap: $form-gap;
}

How do you change one form’s spacing in an existing Sass project?

Find the file the build uses as input and the stylesheet the browser actually loads. Change one spacing value in the source and verify the change reaches the output.

  1. Find the rule used by the form
    In a disposable copy, locate the form wrapper and the style source that controls the gap. In the example, the shared value is form-gap.
  2. Use the project’s existing build
    In the example, change 1rem to 1.25rem and build the styles the usual way. Confirm that the generated CSS now says gap: 1.25rem. Edit the source because the next build can replace manual changes to the generated file.
  3. Check both screens
    Open the result at phone and desktop widths. If the same value is shared with another form, confirm that the change makes sense there too.

What should you check when Sass warns about an old setup?

Check which compiler the project actually uses. Dart Sass is the current implementation. Node Sass and LibSass reached end of life.

Sass imports with @import and global built-in functions were deprecated in Dart Sass 1.80.0. The current module system uses @use and @forward. This warning refers to Sass behavior. Start by finding the source and dependencies responsible for it, then compare the rendered form after a migration.

Which files should you keep to build the styles again?

Keep the editable Sass files, the modules they use and the exact build setup. A compiled CSS file is useful to serve but cannot recover the original module structure.

The Dart Sass compiler has a permissive code license. A theme, font or image used by your app can have separate terms. Check browser support for the CSS that the build produces, because Sass does not make every CSS property work in older browsers.