CSS files now createt with Sass (SCSS)

[BFallert]

Motivation

So local adjustments can be made more easily

Compatibility

In case somebody does not want to use Sass, the currently generated css files are still left in this repository. Sass is just an optional option. Developers should also make adjustments to the CSS file in the associated scss files, or just maintain the scss file and recreate the css files.

Dokumentation

how to call and install see Resources/Private/scss/Readme.md and Resources/Private/scss/watch.cmd

CSS sourcemaps allow the browser to map CSS generated by a pre-processor, such as Sass, back to the original source file, including exactly which Sass mixin, placeholder or variable is responsible for a given line of CSS.

Sass changes some things in the output:

• only 2 spaces instead of 4

• At the beginning the @charset is added

• Closing brackets always uniform.

• Unfortunately, with multiline indented elements, the second, third ... lines are not indented. I have not found a fix for this "bug".
  e.g.

@media only screen and (max-width: 1600px) {
  .tx-dlf-collection-list,
.calendar-items,
.tx-dlf-newspaper-years .year-view ul {
    grid-template-columns: 1fr 1fr 1fr;
  }
  ...

• all colors are written uniformly.
• Blank lines are partially removed (or their number changed), and in some situations, blank lines are not inserted
• Distances are standardized (always spaces after ":", symbols after comma).
• For the @ font-face entries, the documentation had to be changed within the line, otherwise the comments were simply removed except for the first and the last one.

src: url('../Fonts/raleway-v12-latin-800.eot'); /* IE9 Compat Modes */
src: local('Raleway ExtraBold'), local('Raleway-ExtraBold'),
url('../Fonts/raleway-v12-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
url('../Fonts/raleway-v12-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
...

now:

/* eof:        IE9 Compat Modes
   eot?#iefix: IE6-IE8
   woff2:      Super Modern Browser
   ....
*/
src: url("../Fonts/raleway-v12-latin-regular.eot");
  src: local("Raleway"), local("Raleway-Regular"), url("../Fonts/raleway-v12-latin-regular.eot?#iefix") format(...

• A source map is added so that the underlying scss file can be viewed in the browser.