Guides for working with css. Mixins to creates guides like the ones from photoshop.

css-guides.scss

@mixin css-guide {
  content: '';
  position: absolute;
  opacity: 0.3;
  background-color: cyan;
}

@mixin css-guide-h {
  @include css-guide;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
}

@mixin css-guide-v {
  @include css-guide;
  left: 50%;
  top: 0;
  width: 1px;
  height: 100%;
}

css-guides.styl

css-guide()
  content ''
  position absolute
  opacity 0.3
  background-color cyan

css-guide-h()
  left 0
  top 50%
  size 100% 1px
  css-guide()

css-guide-v()
  left 50%
  top 0
  size 1px 100%
  css-guide()

example.scss

html.guides {
  &::before {
    @include css-guide-h;
  }

  &::after {
    @include css-guide-v;
  }

  body {
    &::before {
      @include css-guide-v;
      left: 38.2%;
      background-color: darken(cyan, 50%);
    }
  }
}

example.styl

html.guides
  &::before
    css-guide-h()
  &::after
    css-guide-v()
  body
    &::before
      css-guide-v()
      left: 38.2%
      background-color: darken(cyan, 50%)