Compass - Horizontal List

HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Compass</title>

    <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]-->
    <link href="stylesheets/index2.css" rel="stylesheet" type="text/css"/>
</head>
<body>
    <ul id="social-links">
        <li class="social_blogger"></li>
        <li class="social_facebook"></li>
        <li class="social_rss"></li>
        <li class="social_google"></li>
        <li class="social_twitter"></li>
    </ul>
</body>
</html>

SCSS Code
@import "compass";

$default-sprite-separator: "_"; // this should be first before import
@import "social/*.png";

//$social-sprite-dimensions: true; // dimensions are added each of them
@include all-social-sprites(true); // add one by one social sprites with dimensions by true parameter

p{
  border: 2px solid black;
  @include border-radius(12px);
}

#social-links{
  @include horizontal-list(25px); //25px space in each item
}

Reference: http://compass-style.org/reference/compass/typography/lists/horizontal_list/


Output - Rendered CSS Code
/* line 96, social/*.png */.social_sprite, .social_blogger, .social_facebook, .social_google, .social_rss, .social_twitter, .social_youtube {
  background-image: url('../images/social-scfbb21856f.png');
  background-repeat: no-repeat;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */.social_blogger {
  background-position: 0 0;
  height: 64px;
  width: 64px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */.social_facebook {
  background-position: 0 -64px;
  height: 64px;
  width: 64px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */.social_google {
  background-position: 0 -128px;
  height: 64px;
  width: 64px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */.social_rss {
  background-position: 0 -192px;
  height: 64px;
  width: 64px;
}
/* line 59, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */.social_rss:hover, .social_rss.rss_hover {
  background-position: 0 -256px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */.social_twitter {
  background-position: 0 -320px;
  height: 64px;
  width: 64px;
}

/* line 84, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */.social_youtube {
  background-position: 0 -384px;
  height: 64px;
  width: 64px;
}

/* line 9, ../sass/index2.scss */p {
  border: 2px solid black;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  border-radius: 12px;
}

/* line 14, ../sass/index2.scss */#social-links {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  *zoom: 1;
}
/* line 62, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.0.3/stylesheets/compass/typography/lists/_horizontal-list.scss */#social-links li {
  list-style-image: none;
  list-style-type: none;
  margin-left: 0;
  white-space: nowrap;
  float: left;
  padding-left: 25px;
  padding-right: 25px;
}
/* line 49, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.0.3/stylesheets/compass/typography/lists/_horizontal-list.scss */#social-links li:first-child {
  padding-left: 0;
}
/* line 50, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.0.3/stylesheets/compass/typography/lists/_horizontal-list.scss */#social-links li:last-child {
  padding-right: 0;
}
/* line 52, C:/Ruby26-x64/lib/ruby/gems/2.6.0/gems/compass-core-1.0.3/stylesheets/compass/typography/lists/_horizontal-list.scss */#social-links li.last {
  padding-right: 0;
}

Bu blogdaki popüler yayınlar

Angular Material Design Mat-Select Unit Test

@SerializedName and @Expose annotations