HOME>WEBプログラム覚書>[LESS]!important キーワード

[LESS]!important キーワード

この機能いつからあったんだろ。 日本語マニュアルの方にないから新しいのかな??

!important キーワード

本家ドキュメントから引用すると

LESS

  1. .mixin (@a: 0) {
  2.   border: @a;
  3.   boxer: @a;
  4. }
  5.  
  6. .unimportant {
  7.   .mixin(1);
  8. }
  9.  
  10. .important {
  11.   .mixin(2) !important;
  12. }
  13.  

コンパイル結果

  1. .unimportant {
  2.   border: 1;
  3.   boxer: 1;
  4. }
  5.  
  6. .important {
  7.   border: 2 !important;
  8.   boxer: 2 !important;
  9. }
  10.  

という感じでミックスインのあとに「!important」をつけるとコンパイル結果にも!importantがつく。 サイト固有の深い名前空間で設定されているCSSをリセットしたい場合とか役立つかも。

コンパイル結果

  1. // プロジェクト用のLESS
  2. #contents h1.title {
  3.     font-weight: bold;
  4.     border: 1px solid #000;
  5.     .border-radius(4px);
  6. }
  7.  
  8. // ライブラリであらかじめ用意するLESS
  9. .reset-border-radius {
  10.     .border-radius(0px) !important;
  11. }
  12.  

ここだけ角丸いらないんだよなぁーって場合は

HTML

  1. <h1 class="title reset-border-radius">角丸じゃないタイトル</h1>
  2.  

って感じで使えます。まぁ微妙か。

投稿日 2013年8月 2日 03:39
カテゴリ HTML/CSS
タグ LESS
トラックバック URL http://www.kantenna.com/cgi-bin/mt504/mt-tb.cgi/1321

コメント

コメントする
Name
Email Address
URL