[CSS] 縦スクロールのニュースティッカー

縦方向に1件ずつスクロール表示するやつ

See the Pen Pure CSS News Ticker (vertical) by Tenderfeel (@Tenderfeel) on CodePen.

表示エリアの高さ=リスト要素1件の高さ=keyframeのスクロール量 にする。
keyframesに入れてるvisibilityを消すと巻き戻る様子が表示される。
演出として巻き戻すところを敢えて見せるなら消してもよろしいと思う。

[WP] Underscoresでカスタムテーマを作る:Bootstrap(Sass)導入編

Underscores で魔改造したメモその3。
Sass版のBootstrapをBowerでインストールして部分的にimportして使ってみる。

  • Compass導入編
  • ナビゲーションメニュー改造編
  • Bootstrap(Sass)導入編 ←今ここ

Bootstrapはデザインが出来なくても眉目麗しいスタイルになる上に、
あるあるなUIのJavascriptまでついてくるのがいい所だと思う。
しかも以前はLessのしかなかったけど今はSassのもあるんだ。
“[WP] Underscoresでカスタムテーマを作る:Bootstrap(Sass)導入編” の続きを読む

[Sass] @extend の挙動

classとplaceholder selecterについてそれぞれ@extendを試みた以下のSCSSをコンパイルする。


%ext {
 color:red;

  &::before {
    content: 'ext';
  }

  &[data-aaa="ext"] {
    border:solid 1px red;
  }
}

.klass {
@extend %ext;

  &::after {
    content: 'klass';
  }

  &[data-aaa="aaa"] {
    background:pink;
  }
 
  &.amb {
    color:yellow;
  }

  .child {
     width:100px
  }
}

.klass[data-bbb="bbb"] {
   background:black
}

.klass .child2 {
   height:100px;
}

.klass2 {
 @extend .klass;
}

.klass3 {
 @extend .klass2;
}

.klass4 {
 @extend %ext;
  box-shadow:0 0 5px #000;
}

結果こうなる

.klass, .klass2, .klass3, .klass4 {
  color: red; }
  .klass::before, .klass2::before, .klass3::before, .klass4::before {
    content: 'ext'; }
  [data-aaa="ext"].klass, [data-aaa="ext"].klass2, [data-aaa="ext"].klass3, [data-aaa="ext"].klass4 {
    border: solid 1px red; }

.klass::after, .klass2::after, .klass3::after {
  content: 'klass'; }
.klass[data-aaa="aaa"], [data-aaa="aaa"].klass2, [data-aaa="aaa"].klass3 {
  background: pink; }
.klass.amb, .amb.klass2, .amb.klass3 {
  color: yellow; }
.klass .child, .klass2 .child, .klass3 .child {
  width: 100px; }

.klass[data-bbb="bbb"], [data-bbb="bbb"].klass2, [data-bbb="bbb"].klass3 {
  background: black; }

.klass .child2, .klass2 .child2, .klass3 .child2 {
  height: 100px; }

.klass4 {
  box-shadow: 0 0 5px #000; }

classに対する@extendは対象範囲が広い。

.klassのスタイルを最初に設定しているこの部分だけを@extendする事に期待して

.klass {
@extend %ext;

  &::after {
    content: 'klass';
  }

  &[data-aaa="aaa"] {
    background:pink;
  }
 
  &.amb {
    color:yellow;
  }

  .child {
     width:100px
  }
}

@extendを書いていたとしても、

.klass2 {
 @extend .klass;
}

フタを空けてみれば .klass がセレクタに含まれているスタイルの全てにextendされている。

本当にextendした部分だけピックアップしてplaceholder selecterに置き換え、
それをextendした方がまだ余計なセレクタを生まずに済むが、
&の置換に関してはまだ不具合(と思われる挙動)があるので注意が必要。

9日目:CSS Preprocessor Advent Calendar 2012

CSS Preprocessor Advent Calendar 2012の9日目です。

今年の8月にSassの神バージョンアップがあった勢いでレポートを書いたんです。
社内にSass使い増えるといいなーと思って書いてはみたものの、とにかく使い勝手が悪い。
長文過ぎて見づらかったのでカッとなってWebサイト化しました。

Sassオレオレリファレンス

加筆し過ぎて序盤しか出来てないんですが、後は追々書いていくつもりです。

明日はTakatsudoさんです!
“9日目:CSS Preprocessor Advent Calendar 2012” の続きを読む

[Compass] 超訳 Configuration Reference

CSSのメタ言語、Sassベースで作られた便利なフレームワーク、それがCompass。

Compassの設定ファイルはRubyファイルです。
これはRubyを知っていれば色々なことが出来るということなんですが、逆にRubyを知らないと取っつきにくさがあると思います。
それで損をしてしまうのはあまりに勿体無いので、オレオレリファレンスを書いてみました!

※この記事は完全な和訳ではありません。

公式 Configuration Reference

“[Compass] 超訳 Configuration Reference” の続きを読む

[Sass] Compass CSS3-animations snipets & mixin

CompassのCSS3モジュールでは
transitionsのmixinがあるのにanimationsはないので
-mozとかのプレフィックスが欲しい時にはexperimentalを使うしか無い感じ。


@include experimental(animation-name, sample); //アニメーション名
@include experimental(animation-duration, 1s); //実行時間
@include experimental(animation-iteration-count, 1); //実行回数(number | infinite)
@include experimental(animation-direction, normal); //反復の有無(normal | alternate)
@include experimental(animation-delay, 0s); //実行までの待ち時間
@include experimental(animation-fill-mode, both);//実行前や実行後のスタイル指定(none | forwards | backwards | both)
@include experimental(animation-timing-function, linear);//タイミング(ease | liner | ease-in | ease-out | ease-in-out | cubic-bezier)
@include experimental(animation-play-state, running); //実行状態(running | paused) *削除検討中のプロパティ

transformを参考にまとめたmixin


//再生時間
$default-animation-duration       : 0.5s !default;     

//実行までの待ち時間
$default-animation-delay          : 0    !default;

//実行回数(number | infinite)
$default-animation-iteration-count: 1    !default;

//タイミング(ease | liner | ease-in | ease-out | ease-in-out | cubic-bezier)
$default-animation-timing-function: ease !default;

//反復の有無(normal | alternate)
$default-animation-direction: normal     !default;

//実行前や実行後のスタイル指定(none | forwards | backwards | both) 
$default-animation-fill-mode: both       !default;

@mixin animation (
  $name     :false, 
  $duration :$default-animation-duration,
  $delay    :$default-animation-delay,
  $count    :$default-animation-count,
  $function :$default-animation-timing-function,
  $direction:$default-animation-direction,
  $fillMode :$default-animation-fill-mode
){
    @if $name {
       @include experimental(animation-name,            $name);
    }
    @include experimental(animation-duration,        $duration);
    @include experimental(animation-delay,           $delay);
    @include experimental(animation-iteration-count, $count); //実行回数(number | infinite)
    @include experimental(animation-timing-function, $function);
    @include experimental(animation-direction,       $direction); //反復の有無(normal | alternate)
    @include experimental(animation-fill-mode,       $fillMode);//実行前や実行後のスタイル指定(none | forwards | backwards | both) 
}

“[Sass] Compass CSS3-animations snipets & mixin” の続きを読む