LESS入門 | 「LESS(CSS拡張メタ言語)」カテゴリー

LESSとは？

　状態:学習中 　閲覧数:2,075 　投稿日:2014-10-27 　更新日:2014-11-06

CSSを効率的に書くためのツール
・Node.jsのnpmパッケージマネージャーで提供されている

ディレクトリ作成
・-p 複数ディレクトリを一気に作成したい際につけるオプション

$ sudo mkdir -p /var/www/lib/less/less_lessons

$ cd /var/www/lib/less//less_lessons/

$ node -v

v0.10.29

$ npm -v

1.4.14

$ sudo npm install -g less

sudo: npm: コマンドが見つかりません

$ sudo node -v

sudo: node: コマンドが見つかりません

$ sudo npm -v

sudo: npm: コマンドが見つかりません

・sudo時に環境変数PATHを引き継ぐためには？

LESSをグローバル環境にインストール

$ sudo npm install -g less

[sudo] password for ★★: 

/home/★★/.nodebrew/current/bin/lessc -> /home/★★/.nodebrew/current/lib/node_modules/less/bin/lessc

less@1.7.5 /home/★★/.nodebrew/current/lib/node_modules/less

├── graceful-fs@3.0.4

├── mime@1.2.11

├── mkdirp@0.5.0 (minimist@0.0.8)

├── clean-css@2.2.16 (commander@2.2.0)

├── source-map@0.1.40 (amdefine@0.1.0)

└── request@2.40.0 (json-stringify-safe@5.0.0, forever-agent@0.5.2, aws-sign2@0.5.0, oauth-sign@0.3.0, stringstream@0.0.4, tunnel-agent@0.4.0, qs@1.0.2, node-uuid@1.4.1, mime-types@1.0.2, form-data@0.1.4, tough-cookie@0.12.1, http-signature@0.10.0, hawk@1.1.1)

lessc
・lessのコンパイラだから、lessc

$ lessc -v

lessc 1.7.5 (Less Compiler) [JavaScript]

・公式サイト

lessファイルをcssへ変換

　閲覧数:681　投稿日:2014-10-30　更新日:2014-10-31

処理の流れ

.less -> lessc -> .css
styles.less -> lessc -> styles.css

▼/var/www/lib/less/less_lessons/styles.less

@mycolor: red;



h1{

	font-size: 24px;

	color: @mycolor;

}

h2{

	font-size: 20px;

	color: @mycolor;

}

styles.less を styles.css へ変換
・失敗

$ lessc styles.less styles.css

lessc: ENOENT, open '/var/www/lib/less/less_lessons/styles.less'

$ sudo chown -R ★★:★★ /var/www/lib/less/less_lessons

[sudo] password for ★★:

styles.less を styles.css へ変換(再挑戦)
・成功

$ lessc styles.less styles.css

▼/var/www/lib/less/less_lessons/styles.css

h1 {

  font-size: 24px;

  color: #ff0000;

}

h2 {

  font-size: 20px;

  color: #ff0000;

}

styles.less を styles.css へ変換(圧縮オプション付与)

$ lessc -x styles.less styles.css

▼/var/www/lib/less/less_lessons/styles.css

h1{font-size:24px;color:#f00}h2{font-size:20px;color:#f00}

変数の演算／LESSが用意している関数

　閲覧数:649　投稿日:2014-10-31　更新日:2014-11-01

変数の演算

対象
・プロパティの値

▼/styles.less

/*

コメント

コメント

コメント

コメント

*/

// コメント



@mycolor: red;

@h1-size: 24px;

@h2-size: @h1-size - 4px;



h1{

	font-size: @h1-size;

	color: @mycolor;

}

h2{

	font-size: @h2-size;

	color: @mycolor;

}

$ lessc styles.less styles.css

▼/styles.css

/*

コメント

コメント

コメント

コメント

*/

h1 {

  font-size: 24px;

  color: #ff0000;

}

h2 {

  font-size: 20px;

  color: #ff0000;

}

・1行コメントが削除される理由は不明
・「@h1-size - 4px;」のマイナス前後に半角スペース必須

LESSの関数

▼/styles.less

/*

コメント

コメント

コメント

コメント

*/

// コメント



@h1-color: red;

@h2-color: darken(@h1-color,10%);

@h1-size: 24px;

@h2-size: @h1-size - 4px;



h1{

	font-size: @h1-size;

	color: @h1-color;

}

h2{

	font-size: @h2-size;

	color: @h2-color;

}

$ lessc styles.less styles.css

▼/styles.css

/*

コメント

コメント

コメント

コメント

*/

h1 {

  font-size: 24px;

  color: #ff0000;

}

h2 {

  font-size: 20px;

  color: #cc0000;

}

変数演算／プロパティ名

　閲覧数:645　投稿日:2014-11-01　更新日:2014-11-01

プロパティ名

変数でプロパティ名を指定
▼/styles.less

@h1-color: red;

@h2-color: darken(@h1-color,10%);

@h1-size: 24px;

@h2-size: @h1-size - 4px;



@header: h;

@color: color;



@{header}1{

	font-size: @h1-size;

	@{color}: @h1-color;

}

@{header}2{

	font-size: @h2-size;

	@{color}: @h2-color;

}

$ lessc styles.less styles.css

▼/styles.css

h1 {

  font-size: 24px;

  color: #ff0000;

}

h2 {

  font-size: 20px;

  color: #cc0000;

}

プロパティ値変更

変数で指定していたプロパティ値を変更
▼/styles.less

@h1-color: red;

@h2-color: darken(@h1-color,10%);

@h1-size: 24px;

@h2-size: @h1-size - 4px;



@header: .myheader;

@color: color;



@{header}1{

	font-size: @h1-size;

	@{color}: @h1-color;

}

@{header}2{

	font-size: @h2-size;

	@{color}: @h2-color;

}

$ lessc styles.less styles.css

▼/styles.css

.myheader1 {

  font-size: 24px;

  color: #ff0000;

}

.myheader2 {

  font-size: 20px;

  color: #cc0000;

}

文字列

変数で文字列を指定
▼/styles.less

@h1-color: red;

@h2-color: darken(@h1-color,10%);

@h1-size: 24px;

@h2-size: @h1-size - 4px;



@header: .myheader;

@color: color;

@dir: "/img"; //文字列なので""で囲む



@{header}1{

	font-size: @h1-size;

	@{color}: @h1-color;

}

@{header}2{

	font-size: @h2-size;

	@{color}: @h2-color;

	background: url("@{dir}/bg.png");

}

$ lessc styles.less styles.css

▼/styles.css

.myheader1 {

  font-size: 24px;

  color: #ff0000;

}

.myheader2 {

  font-size: 20px;

  color: #cc0000;

  background: url("/img/bg.png");

}

階層的な構造のスタイルをLESSで設定

　閲覧数:711　投稿日:2014-11-02　更新日:2014-11-02

基本

▼/styles.less

/*

header{

	font-size: 18px;

}



header a{

	color: red;

}

*/



header{

	font-size: 18px;

 	a{

		color: red;

	}

}

$ lessc styles.less styles.css

▼/styles.css

/*

header{

	font-size: 18px;

}



header a{

	color: red;

}

*/

header {

  font-size: 18px;

}

header a {

  color: red;

}

親要素は&

▼/styles.less

/*

header{

	font-size: 18px;

}



header a{

	color: red;

}

*/



header{

	font-size: 18px;

 	a{

		color: red;

		&:hover{

			color:green;

		}

	}

}

$ lessc styles.less styles.css

▼/styles.css

/*

header{

	font-size: 18px;

}



header a{

	color: red;

}

*/

header {

  font-size: 18px;

}

header a {

  color: red;

}

header a:hover {

  color: green;

}

プロパティ名の一部を&

▼/styles.less

/*

header{

	font-size: 18px;

}



header a{

	color: red;

}

*/



header{

	font-size: 18px;

 	a{

		color: red;

		&:hover{

			color:green;

		}

	}

}



.button{

	&-ok{

		color: green;

	}

	&-ng{

		color: red;

	}

}

$ lessc styles.less styles.css

▼/styles.css

/*

header{

	font-size: 18px;

}



header a{

	color: red;

}

*/

header {

  font-size: 18px;

}

header a {

  color: red;

}

header a:hover {

  color: green;

}

.button-ok {

  color: green;

}

.button-ng {

  color: red;

}

設定を部品化して組み込んでいくためのミックスイン

　閲覧数:664　投稿日:2014-11-03　更新日:2014-11-03

クラス

共通部分をクラスとして部品化
▼/styles.less

// minxin



.my-mixin{

	border: 5px solid red;

	padding: 7px;

	margin: 7px;

}

h1{

	font-size: 24px;

	.my-mixin;

}

h2{

	font-size: 18px;

	.my-mixin();

}

$ lessc styles.less styles.css

▼/styles.css

.my-mixin {

  border: 5px solid red;

  padding: 7px;

  margin: 7px;

}

h1 {

  font-size: 24px;

  border: 5px solid red;

  padding: 7px;

  margin: 7px;

}

h2 {

  font-size: 18px;

  border: 5px solid red;

  padding: 7px;

  margin: 7px;

}

id

共通部分をidとして部品化
▼/styles.less

// minxin



#my-mixin{

	border: 5px solid red;

	padding: 7px;

	margin: 7px;

}

h1{

	font-size: 24px;

	#my-mixin;

}

h2{

	font-size: 18px;

	#my-mixin();

}

$ lessc styles.less styles.css

▼/styles.css

#my-mixin {

  border: 5px solid red;

  padding: 7px;

  margin: 7px;

}

h1 {

  font-size: 24px;

  border: 5px solid red;

  padding: 7px;

  margin: 7px;

}

h2 {

  font-size: 18px;

  border: 5px solid red;

  padding: 7px;

  margin: 7px;

}

設定非表示

コメントアウトとは異なり、設定自体は反映されるが、自身は非表示
▼/styles.less

// minxin



.my-mixin(){

	border: 5px solid red;

	padding: 7px;

	margin: 7px;

}

h1{

	font-size: 24px;

	.my-mixin;

}

h2{

	font-size: 18px;

	.my-mixin();

}

$ lessc styles.less styles.css

▼/styles.css

h1 {

  font-size: 24px;

  border: 5px solid red;

  padding: 7px;

  margin: 7px;

}

h2 {

  font-size: 18px;

  border: 5px solid red;

  padding: 7px;

  margin: 7px;

}

パラメータ付きミックスイン

　閲覧数:685　投稿日:2014-11-06　更新日:2014-11-06

パラメータ

ミックスインの設定を呼び出すときに変更できるパラメータ
▼/styles.less

// minxin



.my-mixin(@width){

	border: @width solid red;

	padding: 7px;

	margin: 7px;

}

h1{

	font-size: 24px;

	.my-mixin(5px);

}

h2{

	font-size: 18px;

	.my-mixin(10px);

}

$ lessc styles.less styles.css

▼/styles.css

h1 {

  font-size: 24px;

  border: 5px solid #ff0000;

  padding: 7px;

  margin: 7px;

}

h2 {

  font-size: 18px;

  border: 10px solid #ff0000;

  padding: 7px;

  margin: 7px;

}

初期値

パラメータの初期値
▼/styles.less

// minxin



.my-mixin(@width:5px){

	border: @width solid red;

	padding: 7px;

	margin: 7px;

}

h1{

	font-size: 24px;

	.my-mixin;

}

h2{

	font-size: 18px;

	.my-mixin(10px);

}

$ lessc styles.less styles.css

▼/styles.css

h1 {

  font-size: 24px;

  border: 5px solid #ff0000;

  padding: 7px;

  margin: 7px;

}

h2 {

  font-size: 18px;

  border: 10px solid #ff0000;

  padding: 7px;

  margin: 7px;

}

複数パラメータ

パラメータを複数指定
▼/styles.less

// minxin



.my-mixin(@width:5px; @padding:7px){

	border: @width solid red;

	padding: @padding;

	margin: 7px;

}

h1{

	font-size: 24px;

	.my-mixin;

}

h2{

	font-size: 18px;

	.my-mixin(10px; 20px);

}

$ lessc styles.less styles.css

▼/styles.css

h1 {

  font-size: 24px;

  border: 5px solid #ff0000;

  padding: 7px;

  margin: 7px;

}

h2 {

  font-size: 18px;

  border: 10px solid #ff0000;

  padding: 20px;

  margin: 7px;

}

名前付きパラメータ

名前付きパラメータでは、引数の順番は関係ない
▼/styles.less

// minxin



.my-mixin(@width:5px; @padding:7px){

	border: @width solid red;

	padding: @padding;

	margin: 7px;

}

h1{

	font-size: 24px;

	.my-mixin;

}

h2{

	font-size: 18px;

	.my-mixin(@padding:10px; 

	@width:20px);

}

$ lessc styles.less styles.css

▼/styles.css

h1 {

  font-size: 24px;

  border: 5px solid #ff0000;

  padding: 7px;

  margin: 7px;

}

h2 {

  font-size: 18px;

  border: 20px solid #ff0000;

  padding: 10px;

  margin: 7px;

}

ある設定から違うバリエーションの設定を作るときに使えるextend

　閲覧数:688　投稿日:2014-11-06　更新日:2014-11-06

extend

既に存在するクラスの派生した違うバリエーションを作成
・使用すると、関係性が分かるよう記述することが可能となる
▼/styles.less

// extend

// <div class="button button-ok">OK</div>

// <div class="button-ok">OK</div>



.button {

	font-size: 14px;	

	border: 1px solid black;

}

.button-ok {

	&:extend(.button);	

	corol: green;

}

.button-ng {

	&:extend(.button);	

	corol: red;

}

$ lessc styles.less styles.css

▼/styles.css

.button,

.button-ok,

.button-ng {

  font-size: 14px;

  border: 1px solid black;

}

.button-ok {

  corol: green;

}

.button-ng {

  corol: red;

}

ミックスイン

ミックスインとの比較
・機能的には同じ
・extendの方が、両者の関係性が分かりやすい
・ミックスインの方がコード量が増加
▼/styles.less

// extend

// <div class="button button-ok">OK</div>

// <div class="button-ok">OK</div>



/*

.button {

	font-size: 14px;	

	border: 1px solid black;

}

.button-ok {

	&:extend(.button);	

	corol: green;

}

.button-ng {

	&:extend(.button);	

	corol: red;

}

*/



.button {

	font-size: 14px;	

	border: 1px solid black;

}

.button-ok {

	.button;	

	corol: green;

}

.button-ng {

	.button;	

	corol: red;

}

$ lessc styles.less styles.css

▼/styles.css

/*

.button {

	font-size: 14px;	

	border: 1px solid black;

}

.button-ok {

	&:extend(.button);	

	corol: green;

}

.button-ng {

	&:extend(.button);	

	corol: red;

}

*/

.button {

  font-size: 14px;

  border: 1px solid black;

}

.button-ok {

  font-size: 14px;

  border: 1px solid black;

  corol: green;

}

.button-ng {

  font-size: 14px;

  border: 1px solid black;

  corol: red;

}

順位	ページタイトル抜粋	％
1	LESS入門	83
2	RGB → HSL	27
3	HSL → RGB	27
4	HSLとHSVの違い	25
5	IE8	22
6	SVG	22
7	RGB → HSL 目次	22
8	OOCSS	18
9	MHTML	18
10	HSL → RGB 計算方式の違い	17
11	IE改行対策	17
12	PicSvg	17
13	CSS仕様書	17
14	CSS色指定	17
15	RGB → HSL 勘違いしていたかも	16
16	HTML5タグ	15
17	CSSセレクタ	15
18	RGB → HSL を色モデルで考える	15
19	RGB → HSL ／ RGB → HSV	15
20	IEエミュレータ	14
	2025/2/05 16:51 更新

順位	ページタイトル抜粋	アクセス数
1	Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない \| モバイルデザイン(デザイン)	22
2	16進数カラーコード／ 2進数	11
3	「マウスオーバー」「ロールオーバー」「ホバー」の違い \| CSS	9
4	鉄道会社毎のカラーコード \| カラーコード(色)	7
5	キャラクター無料着せ替えジェネレーター Dress up game ／オンラインサービス \| イラスト参考(デザイン)	6
6	金融機関ブランドカラー／コーポレートカラー \| カラーコード(色)	5
7	キャラクター無料作成ジェネレーター／ FLASH ／オンラインサービス \| イラスト参考(デザイン)	4
7	似顔絵ジェネレーター : 似顔絵メーカー／ NIGAOE MAKER	4
7	FontAwesomeでアイコンが□（四角）になって表示されない　Forbidden　 \| Font Awesome(フォント)	4
8	「東京都」のカラーコード取得は難しい \| カラーコード(色)	3
8	「Chrome拡張機能」開発中に遭遇したエラー \| Chrome 拡張機能	3
8	血の色／ #b30000 ／ #360800 ／ #ff0000 \| カラーコード(色)	3
8	「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 \| Google Chrome(ブラウザ)	3
8	拡張機能が Chrome によって無効にされました／この拡張機能は破損している可能性があります。 \| Chrome 拡張機能	3
9	キャラクター無料着せ替えジェネレーター Rinmaru Games ／オンラインサービス \| イラスト素材(デザイン)	2
9	Design 0	2
9	RGBの種類／ビットカラー \| RGB(色)	2
9	「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 \| Chrome 拡張機能	2
9	色空間／表色系／顕色系／混色系	2
9	「Midjourney」を使用してみた感想。2022 年 8 月 2 時点では、画像生成能力自体は素晴らしいと思いますが、UIが致命的に分かりづらかったです。 \| AI画像生成	2
	2025/2/5 1:02 更新

LESSとは？

lessファイルをcssへ変換

処理の流れ

変数の演算／LESSが用意している関数

変数の演算

LESSの関数

変数演算 ／ プロパティ名

プロパティ名

プロパティ値変更

文字列

階層的な構造のスタイルをLESSで設定

基本

親要素は&

プロパティ名の一部を&

設定を部品化して組み込んでいくためのミックスイン

クラス

id

設定非表示

パラメータ付きミックスイン

パラメータ

初期値

複数パラメータ

名前付きパラメータ

ある設定から違うバリエーションの設定を作るときに使えるextend

extend

ミックスイン

ゲスト … 1行コメント投稿

変数演算／プロパティ名