Skip to content

Instantly share code, notes, and snippets.

@rattlion

rattlion/main.scss

Created July 23, 2014 20:47
Show Gist options
  • Save rattlion/299523e5ae214d26c041 to your computer and use it in GitHub Desktop.
Save rattlion/299523e5ae214d26c041 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
main.scss
@import "compass";
@import "compass/reset";
@import "icon/*.png";
@include all-icon-sprites;
@import "logo/*.png";
@include all-logo-sprites;
@import "pencil/*.png";
@include all-pencil-sprites;
.icon-sprite,
.logo-sprite,
.pencil-sprite {
display: block;
text-indent: -99999em;
}
$icons: 'clock', 'people', 'truck';
@for $i from 1 through length($icons) {
.icon-#{nth($icons, $i)} {
$image: "#{nth($icons, $i)}";
height: icon-sprite-height($image);
width: icon-sprite-width($image);
}
}
$logos: 'large', 'small';
@for $i from 1 through length($logos) {
.logo-#{nth($logos, $i)} {
$image: "#{nth($logos, $i)}";
height: logo-sprite-height($image);
width: logo-sprite-width($image);
}
}
$pencils: 'large-button', 'button';
@for $i from 1 through length($pencils) {
.pencil-#{nth($pencils, $i)} {
$image: "#{nth($pencils, $i)}";
height: pencil-sprite-height($image);
width: pencil-sprite-width($image);
}
}
@rattlion
Copy link
Author 

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">

    <title>testing</title>

    <link rel="stylesheet" href="css/main.css" type="text/css" media="screen" charset="utf-8">

  </head>
  <body>

    <div class="icons">

      <h1>icons</h1>

      <a href="#" class="icon-sprite icon-clock">clock</a>
      <a href="#" class="icon-sprite icon-people">people</a>
      <a href="#" class="icon-sprite icon-truck">truck</a>

    </div>

    <div class="logos">

      <a href="#" class="logo-sprite logo-small">small</a>
      <a href="#" class="logo-sprite logo-large">large</a>

    </div>

    <div class="pencils">

      <a href="#" class="pencil-sprite pencil-button">pencil</a>
      <a href="#" class="pencil-sprite pencil-large-button">pencil</a>

    </div>


  </body>
</html>

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