単孔式腹腔鏡下手術, laparoendoscopic single-site surgery
出典(authority):フリー百科事典『ウィキペディア(Wikipedia)』「2014/03/25 23:14:04」(JST)
Unix用ページャについては「less」をご覧ください。 |
この項目「LESS」は途中まで翻訳されたものです。(原文:en:LESS_(stylesheet_language)) 翻訳作業に協力して下さる方を求めています。ノートページや履歴、翻訳のガイドラインも参照してください。要約欄への翻訳情報の記入をお忘れなく。(2014年1月) |
登場時期 | 2009 |
---|---|
設計者 | Alexis Sellier |
開発者 | Alexis Sellier, Dmitry Fadeyev |
最新リリース | 1.6.0[1] / 2014年01月1日(2か月前) (2014-01-01) |
影響を受けた言語 | CSS, Sass |
影響を与えた言語 | Sass, Less Framework |
プラットフォーム | Cross-platform |
ライセンス | Apache License Ver2 |
ウェブサイト | lesscss.org |
拡張子 | .less |
テンプレートを表示 |
LESS(Leaner CSS)は、Alexis Sellierが設計した動的スタイルシート言語である。 Sassに触発され[2]、後にCSSに似たブロック形式構文を採用した新しいSassの「SCSS」構文に影響を与えている。[3] オープンソースソフトウェアであり、最初のバージョンはRubyで組まれたが、以降は非推奨とされJavaScriptに置き換えられている。 インデント構文はネストされたメタ言語であり、プログラム意味論上、有効なCSSは有効なLESSコードである。 変数、ネスティング、Mixin、演算子及び関数に対応しており、他のCSS用プリコンパイラとの主な違いはブラウザによりLESS.jsを経由してリアルタイムのコンパイルが可能な点である。[4][5] クライアント側とサーバー側で実行でき、[5]単純なCSSにコンパイルできる。
変数定義の際には単価記号で始まり、代入記号にコロンを用いる。
変換時に、変数値が出力されCSSに挿入される。[5]
@color: #4D926F; #header { color: @color; } h2 { color: @color; }
コンパイラ結果
#header { color: #4D926F; } h2 { color: #4D926F; }
クラス内の属性値に別クラス名を指定することで、クラス属性を別クラスに転用して組み込めるので、定数や変数のように振舞うほか、関数のように引数を使用できる。 CSSはミックスインに対応しておらず、同一コードを各位置に連記する必要がある。 これにより効率的なコーディングや記述の簡略化だけでなく、内容変更を容易にする。[5]
.rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } #header { .rounded-corners; } #footer { .rounded-corners(10px); }
コンパイル結果
#header { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #footer { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }
CSSは論理的なネスティングに対応しているが、コードブロック自体がネストされていない。 LESSにより他のセレクタ内部のネストができ、明確な継承や簡略化に役立つ。[5]
#header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px; } } } }
コンパイル結果
#header h1 { font-size: 26px; font-weight: bold; } #header p { font-size: 12px; } #header p a { text-decoration: none; } #header p a:hover { border-width: 1px; }
演算子はプロパティの値や色の加減乗除を行い特性間の複雑な関係の作成に活用し、 関数は1対1のJavaScriptコードを使用し値の操作を行う。
@the-border: 1px; @base-color: #111; @red: #842210; #header { color: @base-color * 3; border-left: @the-border; border-right: @the-border * 2; } #footer { color: @base-color + #003300; border-color: desaturate(@red, 10%); }
コンパイル結果
#header { color: #333; border-left: 1px; border-right: 2px; } #footer { color: #114411; border-color: #7d2717; }
共にCSSプリプロセッサとして、規格化したプログラミング記法で整ったCSSを記述できる。[6]
LESSのVer1.4以降はネスティングや、&:extends
と@extends
擬似セレクタを経由した継承に対応した。 それ以前のSassなど他のプリプロセッサとの主な違いは、CSSコードの重複回避に役立つ、クラス全体のルールの継承をサポートするための指向的@extends
要素の有無であった。
SassはCSSの簡素化(中括弧などの冗長な要素を構文中から削除するなど)し拡張するため設計された。 一方のLESSは可能な限りCSS記法に従い設計されたので、構文は既存のCSSコードと同じであった。 その結果、既存のCSSは有効なLESSコードとして使用できる。
Sassの新Verでは、SCSS(Sassy CSS)と呼ばれるCSSに似た構文を導入した。[3]
より多くの構文の比較については、https://gist.github.com/674726 を参照。
この項目は、ソフトウェアに関連した書きかけの項目です。この項目を加筆・訂正などしてくださる協力者を求めています(プロジェクト:コンピュータ/Portal:コンピュータ)。 |
Appeared in | 2009 |
---|---|
Designed by | Alexis Sellier |
Developer | Alexis Sellier, Dmitry Fadeyev |
Stable release | 1.7.0[1] (February 27, 2014 (2014-02-27T03)) |
Typing discipline | dynamic |
Influenced by | CSS, Sass |
Influenced | Sass, Less Framework |
OS | Cross-platform |
License | Apache License 2 |
Usual filename extensions | .less |
Website | lesscss.org |
LESS (Leaner CSS) is a dynamic stylesheet language designed by Alexis Sellier. It is influenced by Sass and has influenced the newer "SCSS" syntax of Sass, which adapted its CSS-like block formatting syntax.[2] LESS is open-source. Its first version was written in Ruby, however in the later versions, use of Ruby has been deprecated and replaced by JavaScript. The indented syntax of LESS is a nested metalanguage, as valid CSS is valid LESS code with the same semantics. LESS provides the following mechanisms: variables, nesting, mixins, operators and functions; the main difference between LESS and other CSS precompilers being that LESS allows real-time compilation via LESS.js by the browser.[3][4] LESS can run on the client-side and server-side,[4] or can be compiled into plain CSS.
LESS allows variables to be defined. LESS variables are defined with an at sign(@). Variable assignment is done with a colon (:).
During translation, the values of the variables are inserted into the output CSS document.[4]
@color: #4D926F; #header { color: @color; } h2 { color: @color; }
The code above in LESS would compile to the following CSS code.
#header { color: #4D926F; } h2 { color: #4D926F; }
Mixins allow embedding all the properties of a class into another class by including the class name as one of its properties, thus behaving as a sort of constant or variable. They can also behave like functions, and take arguments. CSS does not support Mixins. Any repeated code must be repeated in each location. Mixins allow for more efficient and clean code repetitions, as well as easier alteration of code.[4]
.rounded-corners (@radius: 5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } #header { .rounded-corners; } #footer { .rounded-corners(10px); }
The above code in LESS would compile to the following CSS code:
#header { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #footer { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; }
LESS has a special type of ruleset called parametric mixins which can be mixed in like classes, but accepts parameters.
CSS supports logical nesting, but the code blocks themselves are not nested. LESS allows nesting of selectors inside other selectors. This makes inheritance clear and style sheets shorter.[4]
#header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px; } } } }
The above code in LESS would compile to the following CSS code:
#header h1 { font-size: 26px; font-weight: bold; } #header p { font-size: 12px; } #header p a { text-decoration: none; } #header p a:hover { border-width: 1px; }
LESS allows operations and functions. Operations allow addition, subtraction, division and multiplication of property values and colors, which can be used to create complex relationships between properties. Functions map one-to-one with JavaScript code, allowing manipulation of values.
@the-border: 1px; @base-color: #111; @red: #842210; #header { color: @base-color * 3; border-left: @the-border; border-right: @the-border * 2; } #footer { color: @base-color + #003300; border-color: desaturate(@red, 10%); }
The above code in LESS would compile to the following CSS code:
#header { color: #333; border-left: 1px; border-right: 2px; } #footer { color: #114411; border-color: #7d2717; }
Both Sass and LESS are CSS preprocessors, which allow writing clean CSS in a programming construct instead of static rules.[5]
As of LESS 1.4, LESS supports nested, inherited rules via the &:extends
and @extends
pseudo-selector. Prior to this, a main difference between LESS and other preprocessors like Sass was the lack of an @extends
directive to support inheritance of rules across classes, leading to cleaner CSS with less duplication.
LESS is inspired by Sass.[6] Sass was designed to both simplify and extend CSS, so things like curly braces were removed from the syntax. LESS was designed to be as close to CSS as possible, so the syntax is identical to existing CSS code. As a result, existing CSS can be used as valid LESS code.
The newer versions of Sass also introduced a CSS-like syntax called SCSS (Sassy CSS).[2]
For more syntax comparisons, see https://gist.github.com/674726.
LESS can be applied to sites in a number of ways. One option is to include the less.js JavaScript file to convert the code on-the-fly. The browser then renders the output CSS. Another option is to render the LESS code into pure CSS and upload the CSS to a site. With this option no .less files are uploaded and the site does not need the less.js JavaScript converter.
Name | Description | Software License | Platform | Functionality |
---|---|---|---|---|
WinLess | GUI LESS Compiler | Apache 2.0[7] | Windows | Compiler |
Crunch | LESS editor and compiler (requires Adobe AIR) | GPL[8] | Windows, MacOSX | Compiler Editor |
less.js-windows | Simple command-line utility for Windows that will compile *.less files to CSS using less.js. | MIT_License[9] | Windows | Compiler |
less.app | LESS Compiler | Proprietary | MacOSX | Compiler |
CodeKit | LESS Compiler | Proprietary | MacOSX | Compiler |
SimpLESS | LESS Compiler | free but no explicit license[10] | Windows MacOSX |
Compiler |
Chirpy | Compiles various JavaScript and CSS extension languages, including LESS | Ms-PL[11] | Visual Studio Plugin | Compiler |
Mindscape Web Workbench | Syntax highlighting and Intellisense for LESS (also Sass and CoffeeScript) | Proprietary | Visual Studio Plugin | Compiler Syntax Highlighting |
Eclipse Plugin for LESS | Eclipse Plugin | EPL 1.0[12] | Eclipse Plugin | Syntax highlighting Content assist |
mod_less | Apache2 module to compile LESS on the fly | Open Source | Linux | Compiler |
|
全文を閲覧するには購読必要です。 To read the full text you will need to subscribe.
リンク元 | 「単孔式腹腔鏡下手術」 |
関連記事 | 「LES」「LE」「less」 |
[★] エリテマトーデス lupus erythematosus
.