Subscribed unsubscribe Subscribe Subscribe

Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

Re: ゼロから始める{less} 生活

Less.js

http://lesscss.org

 

f:id:DDramonQ:20161224005508p:plain

 

 

LESS*1

 As an extension to CSS, Less is not only backwards compatible with CSS, but the extra features it adds use existing CSS syntax. This makes learning Less a breeze, and if in doubt, lets you fall back to vanilla CSS.

 

 Lessは、CSSの拡張ツールとして、CSSとの下位互換性があるだけでなく、既存のCSS構文を元にした、さらなる拡張機能が得られます。CSS構文を元にしているので、Lessの学習は容易です。

もし容易ではないと感じたのなら、CSSに戻ればよいのですから。

 

 LESS とは、一言で言うと「CSSを、より少ない記述で・より機能的に記述する方法(言語)」です。CSSだと、HTML のように階層をインデントできず、行数が増えたり、セレクターが長くなると、CSSやHTMLを把握しづらくなってきます。

その様な際にも LESS は非常に役立ちます。

また、引用にも書かれていますが、それはLESS のほんの一部の機能で、変数や関数を使って、もっともっと便利でエキサイティングな事ができてしまう、それが{less}なのです!(๑• ̀д•́ )b✧+°←(ドヤ顔ですが、何を隠そう実は、僕も絶賛学習中ですw(´つヮ⊂) あ、後、タイトルはアニメ「Re:ゼロから始める異世界生活」のオマージュですw なんか色々すみません(´*つヮ⊂)💦w)

 

 

 

●解説ページ ( /Language Future )

   Language Features | Less.js

 

●オンラインコンパイラ

   LESS2CSS | LESS Live Preview

 

f:id:DDramonQ:20161224010622p:plain

 

 サンプルコードが予め入力されている為、そのまま学習にもなります。

また、実際に書いたlessファイルをCSS にコンパイル(変換) する事もできます。

構文エラーの際は、間違い箇所を指摘してくれます。

 

 


公認 日本語翻訳ページ

LESS - The Dynamic Stylesheet language

f:id:DDramonQ:20161224004928j:image

 

 

LESS の本家サイトの About /Translation のリストにも、翻訳ページとして、このページのリンクが載っています。翻訳してくださった方(々)、ありがとうございます🌟

 

 

その他の日本語ページ

その他、独断と偏見で←、分かりやすそうな日本語Webサイトをリンクしておきます。

 

● CSSの拡張メタ言語 LESS の基本的な使い方のメモ | Web Design Leave

● CSS拡張メタ言語「LESS」の使い方: 小粋空間

 

とは言うものの、公式解説(翻訳)自体、シンプルで分かりやすい目だと思いますので、先ずは公認翻訳ページを読まれる事を、強くお勧めします🌟

後は、とりあえずオンライン・コンパイラで色々と試してみましょう٩(⁼̴̀ꇴ⁼̴́٩)♪(僕もっ✨♪)

 

 

実際に LESS 試してみた🌟

色々便利な機能があるけど、とりあえず Nested rule を使えれば、もうそれは立派なLESSer(LESS 使用者の事。勝手に作りました ₍₍(꒪່౪̮꒪່)⁾⁾✨w) と言えるのでは🌟

これだけでも随分CSSの記述が楽になるし、HTML, CSSの構造を把握しやすくなる✨

 

 基本編

f:id:DDramonQ:20161224214501p:plain

 

&:extend();

&:extend(プロパティを同じにしたいセレクター名);

 

 

 ちょっと応用編

 先の例と全く同じCSS(出力結果)ですが、別の記述方法もあります。

ex1)

f:id:DDramonQ:20161225034209p:plain

 

ex2)

f:id:DDramonQ:20161225034358p:plain

 

 とは言うものの初学者の僕にとっては、やはりHTML, CSSの構造が把握しやすい基本編の書き方の方がしっくりきます🌟w

 

 

 

Nested ruleとは

nest とは、「鳥などの巣」の事を指す単語です。ただし、コンピューター・サイエンスで使われる場合は、意味が少し違ってくるようです。

Embedding one object in another object of the same type. Nesting is quite common in programming, where different logic structures sequence, selection and loop) are combined (i.e., nested in one another). It also occurs in applications. For example, many word processing applications allow you to embed (nest) one document inside another.

nesting --- Webopedia.com

 大雑把に言うと「物の中に、別の物を入れる事」をネスティング(nesting) と言うそうです。CSS や{less} の例で言えば、CSSは、セレクターブロックの中に、別のセレクターブロックを入れる事は出来ませんが、{less}だとそれができるという事です。

 

f:id:DDramonQ:20161224222943p:plain

.abc{}の中に .abc a{}をネスティングしている、言う事です。逆に言えば.abc a{}.abc{}の中にnested されていると言う事です。

 

 

 

 

[ ::雑談スペース:: ]

 公式ページの引用にも書かれていた単語、「Vanilla CSS」。「Vanilla CSSってなんじゃ~(* ॑꒳ ॑*).。oO?? 」

と思って早速検索をしてみました。調べるうちに「あれ、もしかしてSass, Less 以外にも便利な言語があるの✨✨(期待)」

と思ったのですが…。。ですが。これがしてやられました_:(´ཀ`」 ∠):_💦ww

 

Vanilla css

http://vanilla-css.com

 

f:id:DDramonQ:20161224020609p:plain

ほうほう、これはシンプルイズベベスト的な理念ですかな!?これはコードや機能も.。oO✨ (期待が高まる)

 

ボタンククリック🔲↓

 

f:id:DDramonQ:20161224021138p:plain

 

あれ?? ( ˙◊˙◞ )◞ ??💡 サイト移転したのかな?? URLが変更されたのかな??(* ॑꒳ ॑*).。oO???

f:id:DDramonQ:20161224020638p:plain

 

おぉ~あったあった✨✨♪(安堵 + 再燃期待✨)

 

 

f:id:DDramonQ:20161224020703p:plain

んんっ!? Facebook に+Googleも!?!? SassやLess よりも人気って書いてる✨♪♪(さらに高まる)

 

 

f:id:DDramonQ:20161224020720p:plain

 

0KB、Example辺りでようやく異変に気付く → Vannila検索 →理解(  Д ) ゚ ゚

 

f:id:DDramonQ:20161224020739p:plain

 

 

そう、実はこれはジョークサイトの様ですwww 日本からまんまとハマりに行きました_:(´ཀ`」 ∠):_w

Vannila とはアイスクリームのバニラを意味する単語ですが、実はコンピューター関連では少し違った使い方がされる様です。

Wikipedia.en によると、Vannila とは初期バージョンのソフトウェアやゲームの事を指し示す際に使うらしく、「Vannila CSS」とはまさに、既存の現行の皆がよく使っているCSSの事を指しているのですね(  Д ) ゚ ゚ そりゃ 0KB も納得ですわ(  Д ) ゚ ゚(  Д ) ゚ ゚ww

 

以上、アメリカン? カナディアン? ユーロピアンジョークにまんまとハマったお話でした(ノ"))ω((ヾ)💦ww

 

 

 

*1:厳密に言うと、Less.jsであもり、JavaScript製のソフトウェア・パッケージの一つでもあります。ただし、Less.jsはCSSを簡単に記述する方法論でもあり、独自のCSS風の構文規則を持つことから、プログラミング言語の一言語として、LESS言語という意味合いで「LESS」と言う事が多い様ですね🌟

This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Unsplash.com. Thanks!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️