0

Having a very weird breakpoint problem.

Screen.scss contains the most basic breakpoint example:

@import "breakpoint";

  $high-tide: 500px;

  .johnny-utah {
    color: blue;
    @include breakpoint($high-tide) {
      content: 'Whoa.';
    }
  }

This gets compiled to:

  .johnny-utah {
      color: blue; 
  }

Seems like breakpoint is not returning anything. It used to work before.

Compass 1.0.1, Breakpoint 2.5.0 and SASS 3.4.3 running on OS X.10.

My config.rb is nothing special: 

# Require any additional compass plugins here.
require 'breakpoint'

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
fonts_dir = "fonts"

output_style = :nested

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false
color_output = true


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
preferred_syntax = :scss
Tim Broddin
  • 53
  • 3

1 Answers1

0

Never mind, this was my most stupid error ever!

This was an old project and I thought I was using Breakpoint back then, but no ... I used my own mixin called _breakpoint.scss which looked like this:

@mixin breakpoint($breakpoint) {
  @if $breakpoint == tablet {
    @media only screen and (min-width: 768px) { @content; }
  }

  @if $breakpoint == desktop {
    @media only screen and (min-width: 1024px) { @content; }
  }

  @else if $breakpoint == big_desktop {
    @media only screen and (min-width: 1280px) { @content; }    
  }
}

That's why nothing was outputted ..

Tim Broddin
  • 53
  • 3