Sassで何かと便利で使えるmixin12選

Sassで何かと便利で使えるmixin12選

現場でもSassを使うことが多くなってきました。その理由の一つとして便利で強力なmixinを使えるからってゆうのがありますね。とゆうことで、何かと便利で使えるmixinを集めてみました。

下記からダウンロードできます。

remを使ったfont-size

remを使った文字サイズの指定です。対応していないブラウザ用にpxでの記述も。

@mixin font-size($size, $base: 16) {
  font-size: $size + px;
  font-size: ($size / $base) + rem;
}

使い方

@include font-size(16);

link-color

場所によってリンクカラーって違う場合ありますよね。しかも、擬似クラスも幾つか書かなければいけないとか。
このmixinで色の指定のみでできちゃいます。

@mixin link-color($color) {
     color: $color;
     
     &:hover, &:active, &:focus {
         color: lighten($color, 20%);
     }
}

使い方

@include link-color(#345fc9);

position absolute

positionを使ったレイアウトって地味あるんですよね。px表記、%表記に対応してます。

@mixin absolute-top-left($top: 0, $left: 0) {
  position: absolute;
  top: $top;
  left: $left;
}

@mixin absolute-top-right($top: 0, $right: 0) {
  position: absolute;
  top: $top;
  right: $right;
}

@mixin absolute-bottom-left($bottom: 0, $left: 0) {
  position: absolute;
  bottom: $bottom;
  left: $left;
}

@mixin absolute-bottom-right($bottom: 0, $right: 0) {
  position: absolute;
  bottom: $bottom;
  right: $right;
}

使い方

@include absolute-top-left(20px, 30px);
@include absolute-top-left(10%, 50%);

border-radius

角丸です。これはほかのmixinとの兼ね合いもあってpx表記と%表記を分けてます。

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

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

使い方

@include border-radius(10);
@include border-radius-per(100%);

box-shadow

box-shadowですが意外に使いませんか?例えばカードデザインとか、パネルとか。

@mixin box-shadow($horizontal: 10px, $vertical: 10px, $blur: 0px, $shadow: 0px, $color: #000000){
  -webkit-box-shadow: $horizontal $vertical $blur $shadow $color;
  -moz-box-shadow: $horizontal $vertical $blur $shadow $color;
  box-shadow: $horizontal $vertical $blur $shadow $color;
}

使い方

@include box-shadow(10px, 10px, 0px, 0px, #000);

clearfix

これはFloatレイアウトやるなら鉄板ですね。

@mixin clearfix{
  *zoom: 1;
 
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

使い方

@include clearfix;

opacity

ieにも対応してます!

@mixin opacity($opacity) {
  opacity: $opacity;
  // IE8 filter
  $opacity-ie: ($opacity * 100);
  filter: alpha(opacity=$opacity-ie);
}

使い方

@include opacity(.7);

ボックス内の上下真ん中に

単語などをボックスの上下真ん中に配置したい場合に使います。

@mixin middle-line($height){
    height: $height + px;
    line-height: $height + px;
}

使い方

@include middle-line(40);

正円

これはデザインによってはあまり使わないかもですが、こんなこともできるよってことで。

@mixin circle($size){
    width: $size + px;
    text-align: center;
    @include middle-line($size);
    @include border-radius-100(100%);
}

使い方

@include circle(50);

左右が丸い長方形

ブログとかのタグクラウドとかリスト表記のリンクとかでも使うかなー

@mixin rounded($height, $display: inline-block){
    $space: round($height / 2) + px;
    display: $display;
    padding: 0 $space;
    @include border-radius($height);
    @include middle-line($height);
}

使い方

@include rounded(50);

吹き出し

最近、現場で使うこと多かったので作ってみました。

@mixin arrow($color, $size, $position) {
	position: relative;
	background: $color;

	&:after{
		bottom: 100%;
		left: $position;
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
		border-bottom-color: $color;
		border-width: $size + px;
		margin-left: -$size + px;
	}
}

使い方

@include arrow(#ccc, 10, 30%);

三点リーダー

長すぎる文章の見せ方にどうぞ。

@mixin line-clamp($size){
    display: box;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: $size;
    -webkit-box-orient: vertical;
}

使い方

@include line-clamp(3);

イチマルニデザインブログをフォローしよう

イチマルニデザインブログではTwitterアカウントでWebに関する情報をつぶやいています。フォローすることで最新情報をすぐに受け取ることができます

いいなと思ったらシェアお願いします

同じカテゴリーの記事

ページの先頭へ