Sassのサンプルコード

Category
Bookmark

使いまわしそうなSassのコードをメモっておいたら、(自分が)便利かなあとか思ったので載せておくテスト。

// ===============================
//   Variables
// ===============================
$red: #f00;
$blue: blue;

// ===============================
//     Mixins (Include)
// ===============================
@mixin link {
  color: #00f;
}
@mixin link_h {
  color: #fff;
  background: #00f;
}
@mixin link_v {
  color: #600;
}

@mixin min-height($px) {
  min-height: $px;
  height: auto!important;
  height: $px;
}

@mixin inline-block {
  display: inline-block;
  #display: inline;
  #zoom: 1;
}

@mixin position_Pattern($min, $padding, $top, $left, $width, $margin) {
  li {
    position: relative;
    @include min-height($min);
    padding: $padding;
    
    img {
      position: absolute;
      top: $top;
      left: $left;
      width: $width;
    }
    p {
      margin: $margin;
    }
  }
}

@mixin radius($px) {
  -moz-border-radius: $px;
  -webkit-border-radius: $px;
  -border-radius: $px;
}

@mixin gradient($color1, $position1, $color2, $position2, $color3, $position3) {
  background: -moz-linear-gradient(top, $color1 $position1, $color2, $position2, $color3 $position3);
  background: -webkit-gradient(linear, left top, left bottom, color-stop($position1, $color1), color-stop($position2, $color2), color-stop($position3, $color3));
  background: linear-gradient(top, $color1 $position1, $color2, $position2, $color3 $position3);
  background-color: #777;
}

/* ===============================
   Selector Inheritance (extend)
=============================== */
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
.clearfix {
  #zoom: 1;
}

/* ===============================
   Test
=============================== */
a {
  @include link;
}
a:visited {
  @include link_v;
}
a:hover {
  @include link_h;
}

div {
  @include inline-block;
  @include min-height(100px);
  @include radius(10px);
  @extend .clearfix;
  @include gradient(#777, 0%, #555, 50%, #222, 100%);
}

@include position_Pattern(40px, 10px, 10px, 10px, 60px, 0 0 0 70px);

/* ===============================
   Nesting
=============================== */
html {
  background: $red;
  body {
    background: $blue;
  }
}

gradient とか、逆に面倒になってる気がしないでもない。 radius・clearfix・min-heightとかは便利そう。