Less in Wyam

In the last post I showed how to use Bootstrap alerts from within a Wyam based blog site. I included some CSS to restyle the alerts to include glyphicons for the various alert types. The CSS I used had a lot of repetitive code. The Less CSS preprocessor makes it easy to use mixins to eliminate duplicate code in CSS files. Wyam has a module for using Less, so I updated my site to use it.

The first thing I had to do was modify my config.wyam file.

#n -p Wyam.Less
#n -p Wyam.Minification

Settings.Host = "digitaltapestry.net";
GlobalMetadata["Title"] = "Digital Tapestry";
GlobalMetadata["Description"] = "Weaving a Digital Tapestry";
GlobalMetadata["Intro"] = "The musings of a .NET developer.";

Pipelines.Add("Less",
    ReadFiles("**/*.less"),
    Less(),
    MinifyCss(),
    WriteFiles(".css")
);

Obviously this is specific to my site. You'll need the #n -p Wyam.Less, #n -p Wyam.Minification and the call to Pipelines.Add while the rest is site specific. MinifyCss is optional. it minifies the output CSS, which is a good idea for “production”, but you may not want to do it while working on the CSS.

With that in place I created a input\assets\css\override.less with the following code.

.alert {
    margin-left: 10px;
}
.alert > p {
    margin-top: 0px;
}
.alert-glyphicon {
    position: relative;
    top: 1px;
    float: left;
    margin-right: 8px;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}
.alert-success:before {
    content: "\e125";
    .alert-glyphicon;
}
.alert-info:before {
    content: "\270f";
    .alert-glyphicon;
}
.alert-warning:before {
    content: "\e107";
    .alert-glyphicon;
}
.alert-danger:before {
    content: "\e074";
    .alert-glyphicon;
}

This is simpler than the original CSS thanks to the .alert-glyphicon mixin.

If you've already created a input\assets\css\override.css you'll have to delete it. Now when you build the site, override.less gets compiled to override.css. This does still copy the override.less file to the output as well. _{If I figure
out how to remove that, I'll update this post.}

Update: Dave Glick, the awesome author of Wyam, solved the issue of the LESS file being copied for me on Gitter. He answers inquiries on there so quickly that I suspect he's actually an AI robot. 😉

Here's the code to add to remove LESS files from being copied to the output.

Pipelines[BlogPipelines.Resources].Clear();
Pipelines[BlogPipelines.Resources].Add(
    CopyFiles("**/*{!.cshtml,!.md,!.less,}")
);