ホーム > HTML講座 > LESS編 > 第1章 LESSとは

第1章 LESSとは

登録タグ: CSS スタイルシート 効率化 CSSメタ言語 LESS ダイナミックスタイルシート 変数 入れ子ルール ミックスイン 関数 値操作 説明 紹介 メリット


Webページの見た目を記述するためにスタイルシートというものがあります。
HTMLに対して使うものは特にCSS(Cascading Style Sheets、 カスケード スタイルシート)と呼ばれていて、これについてはCSS編の第1章でも紹介しました。

ここ最近、このCSSの再利用性や保守性などを上げるための仕組みとして、CSSに変数やミックスイン(独自に定義できる関数のようなもの)、各種の拡張文法、標準定義関数などを加えたCSSメタ言語というものがいくつか生まれました。
SCSS(Sass)やLESSと呼ばれるものがそれに当たります。

この講座では、その中でも後発で文法もCSSとほとんど同じなLESS(レス)というCSSメタ言語について紹介や実践などをしていきます。

LESSは、2010年にAlexis Sellierさんが作ったもので、CSSの文法はそのままに、新しい文法や機能を追加して誕生しました。
LESSには、既存のCSSと比べて主に次のような機能(メリット)があります。
CSSに慣れ親しんだ人たちには、とても魅力的な機能が多いのではないでしょうか。

LESSの主な機能とメリット(良い点)

変数
@hogehoge という感じで自在に変数を定義し、好きな場所で使用出来ます。
入れ子ルール(今後更新予定)
セレクターを入れ子記述することで、直感的に子孫セレクターなどを記述出来ます。
ミックスイン(今後更新予定)
CSSのセレクターを記述する感覚で、自在にユーザー定義関数を作成出来ます。
関数と値操作(今後更新予定)
いくつかの関数が定義されているほか、変数や数値の操作も出来ます。

第2章からは、これらの機能を例をまじえて順番に解説していきます。

← 前へ | 次へ →


カテゴリー:LESS編
2013/05/21 05:38:59 更新

Powered by AkiWiki. Wiki syntax is based on PukiWiki, and extends it.

スポンサード リンク

メニュー

HTML講座

HSP講座

Inkscape講座

スポンサード リンク