Compass Daily Dev Watermark

Description

Ruby function & Sass Mixin for adding a datetime stamp to the compiled CSS and adding dated & commented watermarks to the body tag.

Requirements

Usage

Add ruby module to the bottom of the config.rb file

module Sass::Script::Functions
    def timestamp()
    	return Sass::Script::String.new(Time.now.to_s)
    end

    def unix_timestamp()
    	return Sass::Script::String.new(Time.now.to_i.to_s)
    end

    def today()
    	return Sass::Script::String.new(Time.now.strftime("%m/%d"))
    end
end

Add #{timestamp()} on the top of your main.scss file:

/*!
 * CSS Compiled on: #{timestamp()}
 */

output:

/* CSS Compiled on: 2016-06-04 12:00:00 -0400 */

Alternatively, for Unix-style time stamp, use #{unix_timestamp()}.

Add following code to your main.scss file:

Add @import "compass/css3"

Define variable to set development watermark true/false

// for development tracking
$devmode:true;

SASS Mixin

@mixin dev($devmode, $msg:"", $today: "#{today()}") {
   @if ($devmode) {
        &:after { //for development only
            content: 'updated '+ $today + $msg;
            position: fixed;
            top: 1rem;
            right: 1rem;
            background: #fff;
            @include box-shadow(4px 4px 8px 0px rgba(0,0,0,0.12));
            @include border-radius(20px);
            @include opacity(0.8);
            text-align: center;
            padding: 0 1rem;
            font-family: courier;
            color:#333;
            z-index: 10000;
        }
    }
}

Paste the Mixin into your .scss files

@include dev($devmode, " - your comment here");

(5. Update your watermark in Terminal compass compile --force if your latest project edits did not include styles.)

Example:

/* Small Screen Mobile ----------- */
@media only screen and (max-width: 480px) {
  body{
    @include dev($devmode, " - Small Screen Mobile");
  }
}