タグ: Sass

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

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

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

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

By CSS 、、コメントする

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

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

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

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

By wordpress 、、

[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した方がまだ余計なセレクタを生まずに済むが、
&の置換に関してはまだ不具合（と思われる挙動）があるので注意が必要。

By CSS