Its spelt right in my css, i just spelled it wrong in the comment

Doesn’t work for me… I get the following error

Invalid CSS After “…ond-to(tablet) ” : expected “}”, was “{width:60%;}”

Heres mine:

  @mixin respond-to($media) {
  @if $media == default {
    @media (min-width: 1024px) { @content; }
  }
 
  @else if $media == tablet {
    @media (max-width: 1024px) { @content; }
  }
}

And further down I call it here

.class
{
     width:100%;

    @include respond-to(table) { width:60% }
}

It may be similar to the breakpoint approach you mentioned, but it has the advantage of being grid based — so instead of figuring out your widths and using variables, you just determine how many columns you’re expecting for a specific layout, and it does the math for you. For example:

// 8 column breakpoint
@include breakpoint(8){
    .fluid-demo {
        .grid-cell { width: fluid(4); }
    }
    .fixed-demo {
        .grid-cell { width: fixed(2); }
    }
}

// 12 column breakpoint
@include breakpoint(12){
    .fluid-demo {
        .grid-cell { width: fluid(3); }
    }
    .fixed-demo {
        .grid-cell { width: fixed(3); }
    }
}

I haven’t tried it out (don’t have SASS 3.2, on Windows) but the author’s demo was pretty awesome.

Codekit seemed to take the new Sass path and shows that it is using /usr/bin/sass which, when tested with sass –version is indeed 3.2.0.alpha.277.

Can anyone guess what I might be doing wrong? Thanks in advance!

.selector-1 { color: blue; }
@media screen and (min-width: 40em) {
    .selector-1 { color: red; }
}

.selector-2 { color: blue; }
@media screen and (min-width: 25em) {
    .selector-2 { color: green; }
}
@media screen and (min-width: 40em) {
    .selector-2 { color: red; }
}

Do this: (puts both media queries in the end of .css compiled)

.selector-1 { color: blue; }


.selector-2 { color: blue; }


@media screen and (min-width: 40em) {
.selector-1 { color: red; }
.selector-2 { color: red; }
}
@media screen and (min-width: 25em) {
.selector-2 { color: green; }
}

Because when I try using {LESS} compiler this is the final code:

.selector-1 {
  color: blue;
}
@media screen and (min-width: 40em) {
  .selector-1 {
    color: red;
  }
}
.selector-2 {
  color: blue;
}
@media screen and (min-width: 25em) {
  .selector-2 {
    color: green;
  }
}
@media screen and (min-width: 40em) {
  .selector-2 {
    color: red;
  }
}

They duplicate min-width 40em.

Do a sudo gem install compass --pre to get the bleeding edge.

And for me, Sass and Compass were not installed to the /usr/bin directory, but instead to the /Library/Ruby/Gems/1.8/gems/[sass/compass version]/bin directory

@mixin breakpoint($point) {
	@if $point == 2x {
		@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
		only screen and (min-moz-device-pixel-ratio: 1.5),
		only screen and (min-device-pixel-ratio: 1.5) { @content; }
	}
}