Skip to content

Instantly share code, notes, and snippets.

@dbspringer

dbspringer/screen.scss

Last active December 19, 2015 00:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save dbspringer/5869794 to your computer and use it in GitHub Desktop.
Save dbspringer/5869794 to your computer and use it in GitHub Desktop.
Download ZIP
Barebones example of of using Compass & SCSS to use sprites with pseudo selectors. In my icons directory I have a handful of icons (one called wrench.png) which I'm importing for .foo:before.
Raw
screen.scss
@import "icons/*.png";
.foo {
font-size: 20px;
color: red;
&:before {
@include icons-sprite(wrench);
width: 32px;
height: 32px;
content: "";
display: inline-block;
}
}
Raw
test.html
<html>
<head>
<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
<link href="stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
<![endif]-->
<title>Compass Test</title>
</head>
<body>
<h1>Sup Dawgs</h1>
<p class="foo">Aww yis</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment