私がSCSSでまとめているソースもろもろ

SCSSを実務でも使用するようになって早1年…

私自身SCSSをいろいろとまとめて書いてあとは各ページのSCSSに@importするってやり方を主にやっています。

で今回はそれのいくつかを紹介します。他のサイトさんでもっと多種多様に説明されているものもあるのですが
私はそのサイトでも絶対これは使うってやつをまとめてみました。

みなさんにもお役立ちできれば幸いです♪

角丸

角丸は％とpxの時があるのでどちらも使用できるようにかいてます。


//こっちが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(5)
@include border-radius-per(50)

透明

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

//書き出しは
@include opacity(.6)

ページのど真ん中にもってくる

@mixin vertical-align {
	position: absolute;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

//書き出しは
@include vertical-align()

リストの左側装飾アイコン

これはときと場合によって（というかデザインによって）フォントを変えてます。
結構使えて便利です。

@mixin list-icon {
    position: absolute;
    left: 0;
    font-family: "Font Awesome 5 Free";
    content: "\f138";
    width: 14px;
    height: 14px;
    color: #139cb7;
    font-weight: 900;
}

//書き出しは
@include list-icon()

縦書き

@mixin writing-mode {
/* -webkit-writing-mode: vertical-rl;*/
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
  	-webkit-text-orientation: mixed;
  	text-orientation: mixed;
	-ms-text-combine-horizontal: digits 2;
	text-combine-upright: digits 2;
}

//書き出しは
@include writing-mode()

hoverアニメーション

ここではデフォを0.7にしてます。

@mixin fade-hover {
    -webkit-transition: 0.7s;
    -moz-transition: 0.7s;
    -o-transition: 0.7s;
    transition: 0.7s;
}

//書き出しは
@include fade-hover(.4)

hoverアニメーション

@mixin box-shadow( $h: 10px , $v: 10px , $b: 40px , $c: rgba(0,0,0,0.2)) {
   -webkit-box-shadow: $h $v $b $c;
 	-moz-box-shadow: $h $v $b $c;
 	box-shadow: $h $v $b $c;
 }

//書き出しは
@include box-shadow()

以上です！みなさんもコピペして使ってみてください！

Share: