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










SDLC - Software Development Life Cycle




















Resim







SDLC -  Software Development Life Cycle  is a process used by the software industry to design, develop and test high quality softwares.   1- Requirement Analysis  2- Defining Requirements   To clearly define and document the product requirements  SRS (Software Requirement Specification)   document which consists of all the product requirements  to be designed and developed during the project life cycle.    3-   Designing  the Product Architecture    One design approach for the product architecture is proposed and documented in a DDS - Design Document Specification .  DDS  is reviewed by all the important stakeholders and based on various parameters as risk assessment, product robustness, design modularity, budget and time constraints, the best design approach is selected for the product.  DDS  defines all the architectural modules of the product along with its communication and data flow representation with the external and third party modules.    4- Developing  the ...








Devamı










@SerializedName and @Expose annotations





















 The  @SerializedName  annotation is needed for Gson to map the JSON keys with our fields. In keeping with Java's camelCase naming convention for class member properties, it is not recommended to use underscores to separate words in a variable.  @SerializedName  helps translate between the two.    @SerializedName ( "quota_remaining" )  @Expose   private  Integer quotaRemaining;    In the example above, we are telling Gson that our JSON key  quota_remaining  should be mapped to the Java field  quotaRemaining .  If both of these values were the same, i.e. if our JSON key was  quotaRemaining  just like the Java field, then there would be no need for the  @SerializedName  annotation on the field because Gson would map them automatically.   The  @Expose  annotation indicates that this member should be exposed for JSON serialization or deserialization.   








Devamı