質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Less

LessはCSSをシンプルかつ効率よく書くための、 CSSメタ言語の1つです。 lessで変数宣言を行う場合、@から宣言します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1174閲覧

lesscしてもカラーの部分が変換されません。

ruuusaamarki

総合スコア468

Less

LessはCSSをシンプルかつ効率よく書くための、 CSSメタ言語の1つです。 lessで変数宣言を行う場合、@から宣言します。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2016/03/22 06:41

less

1@mycolor: red; 2@h1-size: 24px; 3@h2-size: @h1-size - 4px; 4 5h1 { 6 font-size: @h1-size; 7 color: @mycolor; 8} 9 10h2 { 11 font-size: @h2-size; 12 color: @mycolor; 13}

このようなlessファイルをlesscでコンパイルすると

css

1h1 { 2 font-size: 24px; 3 color: red; 4} 5h2 { 6 font-size: 20px; 7 color: red; 8}

こうなってしまいます。

css

1h1 { 2 font-size: 24px; 3 color: #ff0000; 4} 5h2 { 6 font-size: 20px; 7 color: #ff0000; 8}

このように変換するにはどのような設定をすればいいのでしょうか。
インストールがうまくいっていないのでしょうか。

環境はwinの中に仮想環境を設置
バーチャルボックス+ベイグラント、centos6.7、にlessをインストールしています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

色名は展開されないですよ。

@red: #ff0000;

を宣言して、

h1 { font-size: @h1-size; color: @red; }

でいいんじゃないですかね?

@mycolor: #ff0000;

と同じ意味ですけど。

投稿2016/03/22 06:48

ogaaaan

総合スコア765

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ruuusaamarki

2016/03/23 12:35 編集

ogaaaanさん回答ありがとうございます。 下記サイトにて学習させていただいているのですがどのようにすればいいかお心当たりありましたら再度書き込みいただけましたらうれしいです。 http://dotinstall.com/lessons/basic_less_v2/27602 自分なりにlessの再インストールをしてみようとまず下記を実行してみました。 sudo npm uninstall -g less するとエラーが出ました。 -------------------------------------------------------------------- This version of npm lacks support for important features, such as scoped packages, offered by the primary npm registry. Consider upgrading to at least npm@2, if not the latest stable version. To upgrade to npm@2, run: npm -g install npm@latest-2 To upgrade to the latest stable version, run: npm -g install npm@latest (Depending on how Node.js was installed on your system, you may need to prefix the preceding commands with `sudo`, or if on Windows, run them from an Administrator prompt.) If you're running the version of npm bundled with Node.js 0.10 LTS, be aware that the next version of 0.10 LTS will be bundled with a version of npm@2, which has some small backwards-incompatible changes made to `npm run-script` and semver behavior. ------------------------------------------------------------------- npmのバージョンが低いのかと下記も実行してみました。 npm -g install npm@latest-2 npm -g install npm@latest が結果は同じになってしまいます。 上記エラーからnode.jsをアップデートしなければならないのかと予想し 現在node.jsをアップデートしようとしております。 まずバージョン確認をすると node -v v0.10.41 https://nodejs.org/en/ ↑こちらを確認するとCurrent version: v4.4.1とでてきます。 またインストールも http://dotinstall.com/lessons/basic_localdev_win こちらの手順通りやっただけなのでどのような状態でインストールされているかわからず現在再インストールの作業を探している状態です。 このあたりは関係ないのでしょうか。 前提知識がない状態で恐縮ですが、なにから手を付けていいかわからなくなっている状態です。
ogaaaan

2016/03/23 12:38

ちょっとまった!! この内容であれば、新しく質問作った方がよいよ!!!!
ruuusaamarki

2016/03/23 15:02

ogaaaanさん、ありがとうございますm(_)m 自分でも少し整理してみます。 取り急ぎlessの上記以外の部分では参考サイトのほう 最後まで理解することができました。 そもそもがサイトの表示を高速化がしたいところから始まって js、cssのリクエストを減らそう(合体させよう) ↓ いろんな方法があるけどgruntよさそう ↓ gruntはnode.jsとless使うらしい ↓ less勉強してて今回の質問に至りました。 なにぶんターミナルなども最近さわり始めていて nodejsのnpmだのnだのが出てきてもうわからなくなりました。 ターミナルのコマンドから復習してみます。 お付き合いいただきましてありがとうございましたm(_)m
ogaaaan

2016/03/25 11:14

高速化したいのであれば、漠然とやるのではなく、 Google ChromeのデベロッパーツールのTimelineとかProfileをみて、 どこが遅いのかをまず調べたほうが良いかもしれないすねー。
ruuusaamarki

2016/03/30 03:50

ogaaaan さんありがとうございます! Google ChromeのデベロッパーツールのTimeline、Profileですね。 確認してみます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問