Skip to content

Instantly share code, notes, and snippets.

@alice-liu
Created August 27, 2014 04:20
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 alice-liu/18d50dfcc08b75ff9381 to your computer and use it in GitHub Desktop.
Save alice-liu/18d50dfcc08b75ff9381 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
%a
test1
%a
test2
%a
test3
// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// ----
/**
* Failed to make a weird horizontal list.
*/
@import "compass";
ul {
@include inline-list;
}
li {
@include border-radius(10px);
background: green;
position: relative;
border: 1px solid blue;
padding: 0 20px;
margin: 0;
z-index: 10;
& ~ &:after {
@include border-radius(10px);
background: yellow;
content: " ";
width: 100%;
height: 100%;
position: absolute;
left: -90%;
}
}
a {
@include border-radius(10px);
float: right;
background: green;
// display: inline-block;
position: relative;
border: 1px solid blue;
padding: 0 20px;
margin: 0;
& ~ &:after {
@include border-radius(10px);
background: yellow;
content: "a";
width: 100%;
height: 100%;
position: absolute;
top: -10px;
// left: -90%;
}
}
/**
* Failed to make a weird horizontal list.
*/
ul {
list-style-type: none;
}
ul, ul li {
margin: 0;
padding: 0;
display: inline;
}
li {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: green;
position: relative;
border: 1px solid blue;
padding: 0 20px;
margin: 0;
z-index: 10;
}
li ~ li:after {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: yellow;
content: " ";
width: 100%;
height: 100%;
position: absolute;
left: -90%;
}
a {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
float: right;
background: green;
position: relative;
border: 1px solid blue;
padding: 0 20px;
margin: 0;
}
a ~ a:after {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: yellow;
content: "a";
width: 100%;
height: 100%;
position: absolute;
top: -10px;
}
<a>
test1
</a>
<a>
test2
</a>
<a>
test3
</a>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment