Skip to content

Instantly share code, notes, and snippets.

@fnando
Created July 5, 2013 14:34
Show Gist options
  • Save fnando/5934963 to your computer and use it in GitHub Desktop.
Save fnando/5934963 to your computer and use it in GitHub Desktop.
.course {
background-repeat: no-repeat;
background-position: 510px center;
}
.course.ruby-on-rails {
background-image: image-url("ruby-on-rails.svg");
}
.no-svg .course.ruby-on-rails {
background-image: image-url("ruby-on-rails.png");
}
.course.javascript {
background-image: image-url("javascript.svg");
}
.no-svg .course.javascript {
background-image: image-url("javascript.png");
}
.course.nodejs {
background-image: image-url("nodejs.svg");
}
.no-svg .course.nodejs {
background-image: image-url("nodejs.png");
}
.course.jquery {
background-image: image-url("jquery.svg");
}
.no-svg .course.jquery {
background-image: image-url("jquery.png");
}
.course.responsive-web-design {
background-image: image-url("responsive-web-design.svg");
}
.no-svg .course.responsive-web-design {
background-image: image-url("responsive-web-design.png");
}
@mixin course-background($name) {
&.#{$name} {
background-image: image-url("#{$name}.svg");
}
.no-svg &.#{$name} {
background-image: image-url("#{$name}.png");
}
}
.course {
@include course-background("ruby-on-rails");
@include course-background("javascript");
@include course-background("nodejs");
@include course-background("jquery");
@include course-background("responsive-web-design");
background-repeat: no-repeat;
background-position: 510px center;
}
@douglasresende
Copy link

👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment