おおたおおた
2017/07/26

Sassのお役立ちテクニック mixinで矢印アイコン

この記事は約3分で読めます。

Sassのお役立ちテクニック mixinで矢印アイコン

CSS

前回のブログではSassのmixinという機能について説明しました。
今回はさらにmixinの便利さについて、実例を挙げて説明していきます!

Sassのイイところと言えば、何といっても簡潔にコードが書けてしまうところ。
CSSにおいて面倒で長い記述はどんどんmixinに変えて、ササっとincludeしてしまいましょう♪

今回はCSSで使えて便利だけど、記述が長い「矢印アイコン」について書いていきます~

前回のmixin基礎編はこちら↓

Sassのお役立ちテクニック mixin基礎編

べた三角矢印

 

よく使いますよね、この▼型の矢印アイコン。

右向きだったり、左向きだったり時には下向き…色や大きさも違うことも多いです。

mixinで一度スタイルを作っておけば、後はそのケースごとに使い分けていく事ができます。

まずはmixinファイルに以下の通りに記述します。

/*Sass*/
@mixin arrow_beta($color, $border-width, $border-color, $left,$top){
	position:relative;
	padding: 0 0 0 15px;
	&:before{
		content:"";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: $border-width;
		border-color: $border-color;
		position:absolute;
		left:$left;
		top: $top;
	}
}

次にincludeするファイルには

/*Sass*/
.demo{
	@include arrow_beta($color:#000,$border-width:5px 0 5px 7px,$border-color:transparent transparent transparent #000,$left:0%,$top:27%);
}


このような右向きのべた矢印がでてきます。
ちなみに三角形の向きは「$border-width」「$border-color」の値で変わってきます。
↓ジェネレーターなどで確認してもらうと分かりやすいかと思います。
http://apps.eky.hk/css-triangle-generator/ja

 

別バージョンの矢印もまたの機会に追加していこうと思います!

Sassのお役立ちテクニック mixinで矢印アイコン
おおた イラストレーター / フロントエンジニア

リトルトゥースです。

一覧へ戻る

私たちについて

私たち『Camarade(カマラード)』はクリエイター目線で
総合的な情報を発信するWebメディアとして
PhotoShopやillustratorの活用方法や、WordPressなどのCMSの
カスタマイズ方法など幅広い情報をお届けしていきます。
同時にSOHOやフリーランスのパートナーを募集しております。