Cloud Nine

Avatar

About IT things and others.

2月
13
lessで@importしたらcacheが残って変更が反映されない件
2月 13, 2012 0

WordPressのRoots Themeの中でlessが使われているのですが、ちょっとトラブったのでそのメモです。

問題は、lessの@importしたらcacheが残って変更が反映されない

それで、調べると同じような問題に起きている人がいる模様。

https://github.com/cloudhead/less.js/issues/47

解決方法

結局、下記のスクリプト追加して解決できました。

      <link rel="stylesheet/less" type="text/css" href="/css/less/bootstrap.less">
      <script> /* Provisory for dev environment: */ localStorage.clear(); </script>
      <script src="/js/less.js"></script>

ちなみに、bootstrap.lessの中はこんな感じです。

// CSS Reset
@import "reset.less";

// Core variables and mixins
@import "variables.less"; // Modify this for custom colors, font-sizes, etc
@import "mixins.less";

// Grid system and page structure
@import "scaffolding.less";
@import "grid.less";
@import "layouts.less";

2月
11
Ubuntuにlessをインストール＆設定
2月 11, 2012 0

最近、WordpressのRoots Themeを触っているのですが、その中でlessが使われていたのでそのメモ

$ sudo gem install less
Successfully installed libv8-3.3.10.4-x86-linux
Successfully installed therubyracer-0.9.9
Successfully installed commonjs-0.2.0
Successfully installed less-2.0.9

lesscの場所を確認
$ locate lessc
/var/lib/gems/1.8/bin/lessc
/var/lib/gems/1.8/gems/less-2.0.9/bin/lessc
/var/lib/gems/1.8/gems/less-2.0.9/lib/less/js/bin/lessc

コマンドを入力させやすくしておく
$ sudo ln -s /var/lib/gems/1.8/bin/lessc /usr/bin/

: Could not find RubyGem less と出てエラー

$ lessc hoge.less > hoge.css
/usr/lib/ruby/1.8/rubygems.rb:779:in `report_activate_error': Could not find RubyGem less (>= 0) (Gem::LoadError)
	from /usr/lib/ruby/1.8/rubygems.rb:214:in `activate'
	from /usr/lib/ruby/1.8/rubygems.rb:1082:in `gem'
	from /usr/bin/lessc:18

調べてみると、sudoでインストールしたので、lesscのコマンドもsudoで実行しないといけないらしい。。。

$ sudo lessc hoge.less > hoge.css

既に、Rubyの開発環境はrvmで導入済みの状態です。

せっかくなので、Roots Themeのlessでのcssを書き出しもメモしておきます。

$ cd ./wp-content/themes/roots/css/less
全体
$ sudo lessc bootstrap.less > bootstrap.css
レイアウト系
$ sudo lessc responsive.less > bootstrap-responsive.css

ちなみに、上のRoots Themeは、標準では、css/の中にあるcssを読み込むんですが、下記のやり方だとlessの中に書き出されます。

$ sudo lessc ./less/bootstrap.less > bootstrap.css
$ sudo lessc bootstrap.less > ../css/bootstrap.css

上記のコマンドを試したけどダメだったので、./inc/roots-actions.phpを書き換えました。

9月
23
CSSによる画像ロールオーバーのちらつきを防ぐ方法
9月 23, 2009 0

最近、久しぶりデザインをすることが増えたので、CSSを触っているんですが
CSSを使って画像ロールオーバー使うことがあるのですが、それが画面を開いた段階では、a:hoverに指定した画像を読み込みに行ってくれなくて
困っておりました。そこで下記方法を思いつき対応しました。

サンプル

画像を一枚にまとめます

使用した画像
rollover

htmlのソース

<p class="rollover"><a href="#">リンク</a></p>

CSS

p.rollover a{
	display:block;
	width:150px;
	height:50px;
	text-indent:-9999px;
	overflow:hidden;
}
p.rollover a{
	background:url(rollover.jpg) top left no-repeat;
}
p.rollover a:hover{
	background:url(rollover.jpg) top right no-repeat;
}

9月
29
text-indent:-9999pxでaタグにつく横棒を消す方法のメモ
9月 29, 2008 0

今更ですが、よく忘れるのでメモしておきます。

outline: none;

にすると点線自体が消えるので　すべてのブラウザでクリック領域がわかりにくくなります

overflow:hidden;

にするとMacのIEでおかしくなる（確かリンク自体機能しなくなるとか）という点を除けばこちらの方がいいと思います。
もしくは　Macにのみハックを使用するなどがもっとも

個人的に、「text-indent:-9999px」は使いたくないですが、どうしても昔のテーブルで作られたものを
コーディングし直すときにつかったりします。

7月
23
meadow(Emacs)のCSS　css-mode.elのメモ
7月 23, 2008 0

css-mode.el

Ctl＋C　＋　Ctl＋U = url（）を挿入
Ctl＋C　＋　Ctl＋C =　/* */を挿入
M＋tab キーで CSS の属性を入力補完してくれる。

7月
10
IE6をCSSで中央配置にする際のメモ
7月 10, 2008 0

IE6をCSSで中央配置する際に、よく忘れるのでメモしておきます。

IE6には過去のIEの互換性のため、DOCTYPEの有無により、標準準拠モードと互換モードを切り替えるようです
（DOCTYPEスイッチだって）
で、互換モードだとtext-align:centerとか指定しないと中央配置されない。
HTML 4.01の標準モードだと、互換モードになるので、ちゃんと、htmlの一番上に宣言を明確に書くといいらしい。

参考として、

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

メモ
IE5(Win), IE5.5(Win), IE5.2(Mac)、ネスケ4もmargin:autoが未サポートだって。

Real Time Analytics