【SASS】【CSS3】画像にscaleを使ってホバーアニメーション

一個前の記事のオマケみたいなもの
これも今日のコーディングで作ったのでついでに載せとこうかなと
一個前の記事内 「@mixin anime」使ってます。

動きはあらかじめ拡大画像を表示させておき、ホバーすると標準サイズの画像に縮小するって感じです。

SASS


@mixin imgscale($scale-x : 1,$scale-y:1){
    -webkit-transform: scale($scale-x,$scale-y);
    -moz-transform: scale($scale-x,$scale-y);
    -o-transform: scale($scale-x,$scale-y);
    -ms-transform: scale($scale-x,$scale-y);
    transform: scale($scale-x,$scale-y);
}

			a {
				img {
					@include imgscale(1.1,1.1);
					@include anime;
				}
			a:hover {
				img {
					@include imgscale(1,1);
					@include anime;
				}
			}

配布されてるmixin使うのが手っ取り早いのでしょうが、人の作ったやつってどうも苦手で自分用のを作らないとダメな性分^▽^;

【SASS】【CSS3】ハンバーガーボタンに動きをつける

ハンバーガーメニューで動きのあるものを見つけて、これいいなぁと思ってたので、ちょうど今日コーディング依頼があったのでサクっと作ってみました。つっても全部SASSです。例のごとくsampleなどは面倒なのでないです。そのうち、このブログにも反映させとうかなー。できたてほっかほかですよー。(byライスの人)

動きとしては、クリックすると2個目の棒線が消え、1個目・3個目の線が斜めにアニメーションするようになっています。

SASS

@mixin anime {
    -moz-transition: -moz-transform 0.1s linear;
    -webkit-transition: -webkit-transform 0.1s linear;
    -o-transition: -o-transform 0.1s linear;
    -ms-transition: -ms-transform 0.1s linear;
    transition: transform 0.1s linear;
}
@mixin rotate($rotate : -10){
    -webkit-transform: rotate($rotate + deg);
    -moz-transform: rotate($rotate + deg);
    -o-transform: rotate($rotate + deg);
    -ms-transform: rotate($rotate + deg);
    transform: rotate($rotate + deg);
}

@mixin button {
	display:block;
	width:40px;
	height:40px;
	border:none;
	@include kadomaru(10px);
	background:$color5;
	@include abs-tr(25,15);
	
	span {
		display:block;
		height:3px;
		width:90%;
		margin:5px auto;
		background:$white;
		@include kadomaru(5px);
		@include anime;
		@include rotate(0);
	}
}
@mixin buttonclose {
	span:nth-child(2) {
		display:none;
	}
	span:nth-child(1) {
		@include anime;
		@include rotate(-45);
		position:relative;
		top:4px;
	}
	span:nth-child(3) {
		@include anime;
		@include rotate(45);
		position:relative;
		top:-4px;
	}
}


	button {
		display:block;
		@include button;
		
	}
	button.close {
		@include buttonclose;
	}

HTML

 <button><span></span><span></span><span></span></button>

【sass】@forを使ってnth-childでカラー分け

極力htmlにクラスタグを追加せずに nth-childでループ文使ってカラーわけできればよいのにって考えて
phpだとfor文で変数(可変変数)持ってこれるのに、sassではそれができないからウボァーーー!!!ってなってました。

中々できなかったけどズバリなサンプルがあったのでメモメモ
やっぱりfor文苦手だわぁ

まず変数セット

$color1:#000;
$color2:#ccc;
$color3:red;

そんでfor文に定義した変数をセットでループさせればOK

			$colors: $color1, $color2, $color3;
			@for $i from 1 through length($colors) {
				li:nth-child(#{$i}){
					color:nth($colors, $i);
				}
			}for 

配列格納はこっちでもよいんだけど、sassで使いまわし前提なので変数定義のほうがよいかな?

			$colors: (#000,#ccc,red);

【sass】擬似セレクタの繰り返し処理

sass勉強中… 便利なところ、不便なところが入り混じっている^^;

    @for $i from 0 through 3 {
        li:nth-child(#{$i + 1}) {
            margin-bottom: #{50 * $i}px;
        }

擬似セレクタごとに50pxずつ足していくって感じ
forとかwhile とか、ループ文苦手…if文は好きだけど^^;