SCSS RFC

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: Convert SCSS to CSS Automatically add vendor prefixes to CSS according to default settings: "> 0.5%, last 2 versions, Firefox ESR, not dead" https://github.com/browserslist/browserslist#queries Minify the CSS Save the result as staff-global.css / opac.css. 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.