CSS Preprocessor

Table of Contents

• Introduction
• CSS Preprocessor Example
• CSS Preprocessor References
• Lexer & Parser References
• W3C References

The following is a quick list of available pages in this documentation that we think you will find useful.

Introduction

The CSS Preprocessor is a C++ library that one can use to read, parse, compile, and assemble (output) CSS files. The parsed data appears as a tree of tokens. The assembler can output the data compressed or beautified.

The data is not really useable to display HTML in a browser, at least, it would be rather complicated in its current form. We may change that at a later time and then replace the assembler to output the objects as valid and minified CSS instead of keeping the tree as we do now.

CSS Preprocessor Example

The following is an example of input data to the CSS Preprocessor. The sample shows the use of two variables, and of nested rules which I think is one of the most powerful feature of the CSS Preprocessor.

 
  // Sample SCSS file
  //
 
  $color: #23841A;
  $image: url("images/ladybug.png");
 
  body
  {
    // background color defined in variable
    background-color: $color;
 
    // this is like "body div.flowers"
    div.flowers
    {
      background-image: $image;
    }
 
    // this is like "body p"
    p
    {
      // use the opposite color for text in paragraphs
      // (use rgb() to make sure it does not become transparent)
      color: rgb(white - $color);
 
      // this is like "body p span.highlight"
      span.highlight
      {
    // highlight is always yellow
        background-color: yellow;
      }
    }
  }
 

First there is the command line used to process the file (assuming you installed the package as expected by default). As we can see, I use the "expanded" style to show a beautified version. To generate a CSS as compressed as possible, use the compressed style (which is the default).

csspp --style expanded --output sample.css sample.scss

The following is the resulting output:

body
{
  background-color: #23841a;
}
body div.flowers
{
  background-image: url( images/ladybug.png );
}
body p
{
  color: #dc7be5;
}
body p span.highlight
{
  background-color: #ff0;
}
/* @preserve -- CSS file parsed by http://csspp.org/ v1.0.32 on 11/02/2023 */

CSS Preprocessor References

The command line tool is documented in src/csspp.cpp (make sure to click on the More... link to see all the details.)

The supported CSS extensions are defined in the CSS Preprocessor Reference. Look closely, it has sub-pages such as the -keywords and expression that define many of the features of the compiler.

Lexer & Parser References

The code of the lexer and parser classes is based on W3C documents which we extended to support our own syntactical extensions. The following pages describes those extensions. If you are not a programmer of the CSS Preprocessor, it probably won't be of much interest to you.

• Lexer Rules
• Parser Rules

W3C References

I find it really difficult to find documents on the w3c website. I am hoping that one of these days someone will tell me, hey dude, the summary is here: ... So far, I only found scattered documents and links from other websites to those documents of interest.

There are links for CSS 3 on the w3c website:

• http://www.w3.org/TR/css-syntax-3/ (lexer, grammar)
• http://www.w3.org/TR/css3-color/ (colors)
• http://www.w3.org/TR/css3-values/ (dimensions and calc(), toggle(), attr() functions)
• http://www.w3.org/TR/selectors/ (rule selectors)

CSS Preprocessor Logo