SCSS Clock

index.html

<p>
	<time class="wknds-clock" data-time="now">
		<i class="hour-hand"></i><i class="separator"></i><i class="minute-hand"></i>
	</time>
	<br />
	Now
</p>

<p>
	<time class="wknds-clock" data-time="2210">
		<i class="hour-hand">10</i><i class="separator">:</i><i class="minute-hand">10</i>PM
	</time>
	<br />
	10:10pm
</p>

<p>
	<time class="wknds-clock square" data-time="0745">
		<i class="hour-hand">7</i><i class="separator">:</i><i class="minute-hand">45</i>AM
	</time>
	<br />
	7:45am
</p>

<div class="note">
	<h1>A little clock built using SASS.</h1>
	<p>This example uses a hint of jQuery to rotate the hour and minute hands to set the time (based on the 24hour dat-time attribute). But you could inline the rotation styles if you didn't want that dependancy.</p>
	<p>Use em units to set the $radius and $stroke-width so it scales with font size changes. It holds up well at tiny sizes too!</p>
	<p>It would be trivial to feature detect for CSS transforms and fall back to displaying the time in a rectangle, old school digital clock style.</p>
  <p><a href="https://twitter.com/dominicwhittle">@dominicwhittle</a></p>
</div>

script.js

jQuery(document).ready(function(){

	$('time[data-time]').each( 
		function(){
			
			var hrs = 0, mins = 0;
			
			if ( $(this).data('time') == "now" ){
				var currentTime = new Date();
				hrs  = currentTime.getHours();
				mins = currentTime.getMinutes();
			} else {
				hrs  = parseInt( $(this).data('time').toString().slice(0,2), 10 ),
				mins = parseInt( $(this).data('time').toString().slice(2,4), 10 );	
			}
			
			var	minutesDegrees = 6 * mins, 				 // 1 min = 6 deg
				hoursDegrees   = 30 * ( hrs + mins/60 ); // 1 hr = 30 deg
							
			$(this).find('.hour-hand').css({
				'transform' : 'rotate(' + hoursDegrees + 'deg)',
				'-ms-transform' : 'rotate(' + hoursDegrees + 'deg)',
				'-webkit-transform' : 'rotate(' + hoursDegrees + 'deg)'
			});

			$(this).find('.minute-hand').css({
				'transform' : 'rotate(' + minutesDegrees + 'deg)',
				'-ms-transform' : 'rotate(' + minutesDegrees + 'deg)',
				'-webkit-transform' : 'rotate(' + minutesDegrees + 'deg)'
			});
		}
	);
	
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

SCSS Clock.markdown

SCSS Clock

A little clock built using SASS, with a hint of JS.

A Pen by Dominic on CodePen.

License.

style.css

@import "compass/css3";

// Clock
$radius: 80/16*1em;
$stroke-width: 16/16*1em;
$stroke-colour: #333;

.wknds-clock {
	margin: 2em 0;
	padding: 0;
	text-align: left;
	text-indent: -999px;
	position: relative;
	overflow: hidden;
	display: inline-block; *display:inline; zoom:1;
	height: $radius * 2;
	width: $radius * 2;
	border: $stroke-width solid $stroke-colour;
	border-radius: $radius + $stroke-width * 2; // 50% has not great suuport on IOS, I think... 
	i {
		font-style: normal;
	}
	//
	// The only reason I'm not using :before and :after pseudo-elements for the hands is that they're hard to select with javascript in order to animate. 
	// It would also make it impossible to insert the rotation on the hands as inline styles (i.e., PHP dumps inline styles with rotation valuse on the hands).
	// 
	.hour-hand,
	.minute-hand {
		position: absolute;
		bottom: $radius - $stroke-width / 2;
		left: $radius - $stroke-width / 2; //50%;
		
		content: "";
		background: $stroke-colour;
		border-radius: $stroke-width;
		width: $stroke-width;
		height: $radius * 0.9;

		-ms-transform-origin: 	  50% ( $radius * 0.9 ) - ( $stroke-width / 2 );
		-webkit-transform-origin: 50% ( $radius * 0.9 ) - ( $stroke-width / 2 );
		transform-origin: 		  50% ( $radius * 0.9 ) - ( $stroke-width / 2 );
    
  -webkit-transition: all 1s;
		-moz-transition: 	all 1s;  
		-ms-transition: 	all 1s;  
		-o-transition: 		all 1s;  
		transition: 		all 1s;
	}
	.hour-hand {
		height: $radius * 0.6;
		-ms-transform-origin: 	  50% ( $radius * 0.6 ) - ( $stroke-width / 2 );
		-webkit-transform-origin: 50% ( $radius * 0.6 ) - ( $stroke-width / 2 );
		transform-origin: 		  50% ( $radius * 0.6 ) - ( $stroke-width / 2 );
	}
	// Optional Spindle
	.separator {
		display: none;
		//
		position: absolute;
		bottom: $radius - $stroke-width * 1.2 / 2;
		left: $radius - $stroke-width * 1.2 / 2; //50%;
		background: $stroke-colour;
		width: $stroke-width * 1.2;
		height: $stroke-width *1.2;
		border-radius: 50%;
		z-index: 1;
	}
}


.wknds-clock.square {
	border-radius: 1.5em;
	background: red;
	border-color: darken( red, 10% );
	.hour-hand, 
	.minute-hand,
	.separator {
		background: #fff;
	}
}



@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);

body {
	font-family: 'Droid Sans Mono', monospace, sans-serif;
	font-size: 13/16*1em;
	line-height: 1.5;
	color: #666;	
	text-align: center;
}

a { 
	color: blue; 
	text-decoration: none;
}

h1 {
	font-size: 1em;
	font-weight: normal;
	color: #000;
}

.note {
 text-align: left;
	margin-top: 5em;
	border-top: 2px solid #eee;
	padding: 2em;
}