Linux.com

Home Linux Community Community Blogs General Linux Using m4 macros in CSS stylesheets

Using m4 macros in CSS stylesheets

For one of the projects I'm working on, I decided to avoid using a separate CSS framework and instead rely on 960 grid (plain old css) and m4, the macro processing language that's been in UNIX/Linux since forever. M4 gives you a way to use variables and define functions to use in your CSS and to make up for the flaws of CSS. Just like other separate CSS frameworks, you have to compile the code.

 

The first thing I had to do was convert the main 960 grid CSS classes/ids into m4 macros. This was a simple copy and paste, and I used some macro magic in Emacs to clean it up. Here's how the macros look like:

dnl m4 macros for 960 grid system written by Rudolf Olah
dnl learn more about 960 grid system here: http://960.gs/
dnl
define(`_container', `margin: 0 auto; width: 960px;') dnl
define(`_grid', `display: inline; float: left; position: relative; margin-left: 10px; margin-right: 10px') dnl
define(`_alpha', `margin-left: 0;') dnl
define(`_omega', `margin-right: 0;') dnl
define(`_grid_1', `_grid; width: 60px;') dnl
define(`_grid_2', `_grid; width: 140px;') dnl
define(`_grid_3', `_grid; width: 220px;') dnl
define(`_grid_4', `_grid; width: 300px;') dnl
define(`_grid_5', `_grid; width: 380px;') dnl
define(`_grid_6', `_grid; width: 460px;') dnl
define(`_grid_7', `_grid; width: 540px;') dnl
define(`_grid_8', `_grid; width: 620px;') dnl
define(`_grid_9', `_grid; width: 700px;') dnl
define(`_grid_10', `_grid; width: 780px;') dnl
define(`_grid_11', `_grid; width: 860px;') dnl
define(`_grid_12', `_grid; width: 940px;') dnl
define(`_prefix_1', `padding-left: 80x;') dnl
define(`_clear', `clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0') dnl used to fix height

The function define is how you define a macro in the m4 language, and the keyword dnl means ignore everything up until the next new line (basically, everything after dnl is a comment).

The second thing I did was create a utility file with general macros that would be used all over the website. A few of these macros define the background colour and the text colour used. m4 macros make it easy to make up for the lack of variables in CSS.

Here's how the utility file looks like:

include(`960_macros.m4') dnl
changecom(`/*', `*/') dnl
changequote(`^', `^') dnl
dnl Copyright (C) 2010 Rudolf Olah
dnl Colour palette
dnl dark teal 0c6847
dnl teal 85d4b7
dnl light yellow f1cb76
dnl grey 333333
define(^background_color^, ^#ffffff^) dnl
define(^text_color^, ^#333333^) dnl
define(^link_color^, ^#0c6847^) dnl
define(^light_background_color^, ^#f1cb76^) dnl
define(^light_link_color^, ^#85d4b7^) dnl
dnl
define(^_round_corners^, ^border-radius: $1; -moz-border-radius: $1; -webkit-border-radius: $1;^) dnl Rounded corners
define(^_invert^, ^border-bottom: 1px solid #dddddd;
  padding-left: 6px;
  padding-right: 6px;
  padding-bottom: 0.75em;
  color: text_color;^ ) dnl Inverted color scheme
define(^_opacity^,^opacity: 0.$1; filter: alpha(opacity=$1); -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=$1)";^) dnl Adjusts opacity using opacity and MSIE filters, specified as an integer

The function changecom changes the way m4 recognizes comments. In this case, comments begin with /* and end with */. The changequote function changes how m4 recognizes quotes used as part of defining a macro. Typically you use a backtick/backquote as in the 960 grid macros file above, but in my utility file I changed it so it uses the ^ character instead. This way it doesn't interfere with urls in CSS.

So now that I have variables defined, it's easy to change the colour that's being used in different CSS classes.

 

Comments

Subscribe to Comments Feed

Who we are ?

The Linux Foundation is a non-profit consortium dedicated to the growth of Linux.

More About the foundation...

Frequent Questions

Join / Linux Training / Board