hlb

請配合 SassMeister 使用。

• comment
  • https://gist.github.com/hlb/6076561
• variables
  • 1: https://gist.github.com/hlb/6076570
  • 2: https://gist.github.com/hlb/6076577
  • 3: https://gist.github.com/hlb/6076582
  • 4: https://gist.github.com/hlb/6076583
• 5: https://gist.github.com/hlb/6076584

hlb

@import "compass";

$experimental-support-for-webkit: false;
$experimental-support-for-mozilla: false;

.box {
    @include border-radius(8px);
    @include box-shadow(
      rgba(#ccc, 0.5) 3px 3px 5px
    );

hlb

@import "compass";

.box {
    @include border-radius(8px);
    @include box-shadow(
      rgba(#ccc, 0.5) 3px 3px 5px
    );
}

hlb

@import "compass";

.linear {
    @include background(linear-gradient(top left, #333, #0c0));
}

hlb

@import "compass";

section {
    @include clearfix;
}

.evil {
    @include pie-clearfix;
}

hlb

%error {
    border: 1px #f00;
    background-color: #fdd;
}
.seriousError {
    @extend %error;
    border-width: 3px;
}
.inputError {
    @extend %error;

hlb

#admin .tabbar a {
    font-weight: bold;
}
#demo .overview .fakelink {
    @extend a;
}

hlb

.error {
    border: 1px #f00;
    background-color: #fdd;
}
.error.intrusion {
    background-image: url("/image/hacked.png");
}
.seriousError {
    @extend .error;
    border-width: 3px;

hlb

.error {
    border: 1px #f00;
    background-color: #fdd;
}
.seriousError {
    @extend .error;
    border-width: 3px;
}

hlb

@mixin respond-to($media) {
    @if $media == handhelds {
        @media only screen and (max-width: 479px) { @content; }
    }
    @else if $media == wide-handhelds {
        @media only screen and (min-width: 480px) and (max-width: 767px) { @content; }
    }
    @else if $media == tablets {
        @media only screen and (min-width: 768px) and (max-width: 959px) { @content; }
    }