# Diagonal Lines in Sass

While working on a new immersive experience for underarmour.com, we were given a comp that included some diagonal lines on it. These could always be created in background images, but Ken and I thought it cooler to create them in css. We recently made the switch to Sass as our preprocessor library, so Ken and I (mostly Ken) created a Sass partial to create diagonal lines. A demo of the partial is over at bl.ocks.org and the raw code is available via a gist

We’d like the interface to the mixin to be via start and stop positions, like so:

```
hr.line {
@include diagonal-line($x0, $y0, $x1, $y1);
}
```

To calculate the necessary angles, we’ll need some extra functions to be available in Sass. Luckily, this can be done with ruby. Here’s `math.rb`

```
# math.rb
require 'sass'
module Sass::Script::Functions
def atan2(x, y)
Sass::Script::Parser.parse(Math.atan2(y.value.to_f, x.value.to_f).to_s, 0, 0)
end
def sqrt(x)
Sass::Script::Parser.parse(Math.sqrt(x.value.to_f).to_s, 0, 0)
end
declare :atan2, :args => [:float, :float]
declare :sqrt, :args => [:float]
end
```

Now, if we start our Sass watcher, we can reference this file and use the functions provided in our Sass: `sass --watch path/to/sass:path/to/css -r ./math.rb`

. Its now a matter of building the mixin:

```
// Creates a line segment with start and end points
@mixin diagonal-line($x0, $y0, $x1, $y1) {
position: absolute;
left: #{$x0}px;
top: #{-$y0}px;
margin-top: 0px; // Reset hr's default styles
$x: $x1 - $x0;
$y: $y1 - $y0;
// This is just a cross-browser transform: rotate($deg) implementation
@include transform-rotate(#{-1 * atan2($x, $y)});
width: #{sqrt($x * $x + $y * $y)}px;
}
```

And whala! We’ve done it. Check out the demo for the full code.