Description

CSS Factoring processes one or more source files and produces a single CSS file for use as a style sheet.

Its main aim is to allow CSS style sheets to be parameterised by factoring out values that are repeated in the style sheet.  These usually include margin settings and colour values but can be any other value or string.

Download

Operation

Begin by making at least one text file with CSS rules and directives, as explained below, save it with extension scss.  Make more files of extension scss if they are referred to by include directives in the main one.

Launch CSS Factoring.  A single panel with one locked field will appear:

To make the style sheet from the source files, drag the main source file over the field.  The style sheet file will be written alongside the main source file and have the same name but extension css.  The field will display the path to the style sheet that was made.

To make the same style sheet again (e.g. after having modified one of the include files), click the field.  Note: the time in milliseconds used to write the style sheet will briefly appear at the right end of the panel.

Files

CSS Factoring is given a single source file with file name extension scss, which may refer to other files whose file name extension must also be scss, and produces a single output file with the same name as the source file and extension css.  The extension scss stands for "source CSS".

Directives, Expressions and @media rules

Files

All files involved are text files, with extension scss (source CSS) and containing CSS rules as well as directives and expressions.

Directives

There are two directives and one in-line construct:

• include
• define
• in-line-expression

Include and Define directives must occur on a line by themselves;  in-line expressions can occur anywhere.

Include directives can only occur in the single file that is given to CSS Factoring, i.e. includes cannot be nested.

Include

The syntax is:

where the relative file path is a path from the file with the include statement to the included file.  Files making up a style sheet will usually sit in the same folder.

Define

The syntax is:

where the expression can have several forms:

• a numeric value followed by a unit, which then defines a parameter
• an unquoted string, which then defines a string value.
• a numeric or a string expression which reduces to a value with possibly an inherited unit.

Examples:

The first defines MainLeftMargin to be a parameter with value 3.5 and unit em.

The second defines the string "H1Borders border-top: solid 0.15em rgb(67%,67%,33%); border-bottom: none"

The third defines a value of 3.5/2.3+5.5 = 7.022 with a unit of em (which is inherited from the definition of the parameter MainLeftMargin).

Finally the fourth defines a string by concatenating the string value of UsualStuff (not given here) with the string "yakity".

The last two are examples of expressions in definitions, one numeric the other string.

In-line Expressions

The syntax is:

whereby the expression may contain identifiers from define statements, and must evaluate properly when all the identifiers have been replaced by their values.

Note

It is possible to define an identifier as another identifier, i.e. this does work:

so that Y and Z will be defined with value 4 and unit em.  Although it looks superfluous, it may be useful to give such definitions e.g. in the case where different style sheets (perhaps for different sites) are constructed from a set of shared scss files, whereby Y and Z have different values from X in most sheets but not in all.

Media Rules

CSS @media rules surround sets of rules to be applied to one or more media.  Unfortunately for a given media selection only one set of rules can occur in a style sheet (though this may be browser dependent).

CSS Factoring collects all rules for one media in one set, and places all @media rules at the end of the CSS file.  Thus it is possible to have multiple @media sets for the same media spread over several places and/or include files.  For example, you can specify the rules for headings in one file, and also put all the @media rules for those headings in that file; then make a separate file for anchors and put all their @media rules in that file, even if that means a rule set for one media is now split over several files and locations.  CSS Factoring will collect all the @media rules for a given media at the end of the resulting final css file.

All CSS rules that are not media specific will come before all the @media sets in the final style sheet.

How it works

All directives are removed from the resulting CSS file.

First all includes are used to obtain one single text from several files.

Then all @media rules are sorted and placed at the end.

Finally definitions are processed to replace identifiers with values, and in-line expressions are evaluated.

After each stage the resulting file is written out.  If the next stage leads to an error, the line number reported will at or close to the line in the file of the previous stage, which can be inspected by reading that stage's output with a text editor.

Syntax of directives:

include relative-file-path

define identifier value

... {{ <expression> }} ...

Directives must be on a line by themselves.  Identifiers can have letters, digits and hyphens only.  File paths may contain spaces (there is no URL encoding).

Values may contain spaces:  the entire text following the space after the identifier is the value.  Values may be expressions and they may refer to other values.

There is no other restriction:  e.g. it is possible to replace the word margin with padding.

Replacement is case sensitive.

Includes are only one level deep, i.e. includes inside included files are not processed.

The program processes one file at a time.  The resulting style sheet is placed in a file with the same name and extension .css, located in the same folder as the source file.  An existing result file can be overwritten after a warning.

Caveat: replacement of identifiers by values is just text replacement.  It is done as a global replacement, one identifier after another.  Therefore if an identifier is a substring of the value of another identifier which was replaced earlier, there may be unintended results.  The probability is low however if you choose your defined identifiers well.

Using Expressions

The main use of expressions is to derive values from other values, and the main reason for doing that is typographical:  in many cases the change of one size requires a change in other size specifications.

A particular use is to set lengths independent of the font-size specification of the element in which they are used.  E.g. to determine the size of a left margin that is given as 1em, the browser first looks at the font-size of the element, and uses 1em of that size.  Thus if the font-size changes, the margin will change too.  This is not always desirable, for example if you want all headings and paragraphs to line up vertically to the same margin.  One way out is to set all margins to zero, put a div element around the headings and paragraphs, and give the margin to that element.  With CSS Factoring this method also works:

The left margins are now all physically the same, and still specified in em units.