Sass

[CSS] rem でフォントサイズを相対指定する

2014/09/26 CSS No comments , ,

以前 「YUI Fonts CSS でフォントサイズを相対指定する」 という記事を2008年に書いたんだけど、
6年後(!!)の現在はremで指定しているのでそれについてメモっておく。
(さらに…)

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

2014/07/10 wordpress , ,

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

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

Bootstrapはデザインが出来なくても眉目麗しいスタイルになる上に、
あるあるなUIのJavascriptまでついてくるのがいい所だと思う。
しかも以前はLessのしかなかったけど今はSassのもあるんだ。
(さらに…)

[Sass] @extend の挙動

2013/08/01 CSS

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

[Sass] Speech Bubble(tail) Mixin

2013/02/25 CSS No comments

CSSでふきだし作る時に最も面倒くさいしっぽを全方位カバーしたmixinが出来てしまいました。
Sassだけで動作します。

しっぽの向きはtriangle generatorと同じ。
枠線がある場合、しっぽの大きさを超える太さにすると背景色のしっぽが消えて線だけになります。

(さらに…)

9日目:CSS Preprocessor Advent Calendar 2012

2012/12/09 Sass No comments , ,

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

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

Sassオレオレリファレンス

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

明日はTakatsudoさんです！
(さらに…)