SCSS RFC

From Koha Wiki

Jump to: navigation, search
Home
Koha > Technical > Development > RFCs

RFC: Convert OPAC and staff client CSS to SCSS

Status: DONE (18.11)
Sponsored by: Athens County Public Libraries
Developed by: Owen Leonard
Expected for: 2018-04-05
Bug number: Bug 19474
Work in progress repository: No URL given.
Description: I propose that we convert Koha's CSS to SCSS, and implement a build process for client-side assets.

In Bug 19474, "Convert staff client CSS to SCSS" and Bug 20427, "Convert OPAC LESS to SCSS" I have implemented patches which make the following changes:

  • Staff client CSS in staff-global.css has been rewritten as Sass with SCSS syntax
  • OPAC CSS has been converted from LESS (which hasn't been widely adopted) to Sass using SCSS syntax.
  • A build process has been added which uses yarn and gulp to run a build process with the following options:

Switching to Sass and incorporating a build process has the following advantages:

  • SCSS allows us to write CSS using a more concise syntax.
    • Nesting eliminates a lot of repetition when writing CSS.
    • Variables allow values like colors, padding, etc. to be defined once and used multiple times.
    • Imports can be used to combine multiple files at compile time. This provides the opportunity to organize CSS into separate files.
    • Mixins, like variables, allow for CSS to be written once and used multiple times.
    • The compilation process will fail on invalid SCSS, giving us some error-checking.
  • The build process provides automatic minification.
  • The build process, once in place, can be extended to perform other tasks like JavaScript linting, concatenation, and minification.

See http://sass-lang.com/ for more information about Sass.

Personal tools