Cloud Nine

Avatar

About IT things and others.

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";

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を書き換えました。

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;
}

Fonts list for Mac & Windows in common.
2月 28, 2009 0

I checked fonts list for Mac & Windows in common.

Arial Smaple text
Arial Black Smaple text
Century Gothic Smaple text
Comic Sans MS Smaple text
Courier New Smaple text
Lucida Sans Unicode Smaple text
Impact Smaple text
MS UI Gothic Smaple text
Times New Roman Smaple text
Trebuchet MS Smaple text
Verdana Smaple text

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

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

outline: none;

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

overflow:hidden;

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

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

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 の属性を入力補完してくれる。

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