LESS入門

CSS拡張メタ言語 ＞ LESS

LESSとは？

　状態:学習中 　閲覧数:1,978 　投稿日: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へ変換

　閲覧数:650　投稿日: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が用意している関数

　閲覧数:617　投稿日: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;

}


変数演算 ／ プロパティ名

　閲覧数:613　投稿日: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で設定

　閲覧数:676　投稿日: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;

}


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

　閲覧数:632　投稿日: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;

}


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

　閲覧数:656　投稿日: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

　閲覧数:656　投稿日: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
2024/11/23 1:36 更新
週間人気ページランキング ／ 11-16 → 11-22
順位 ページタイトル抜粋 アクセス数
1 鉄道会社毎のカラーコード | カラーコード(色) 12
2 FontAwesomeでアイコンが□（四角）になって表示されない　Forbidden　 | Font Awesome(フォント) 10
3 Design 0 8
3 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 8
4 血の色 ／ #b30000 ／ #360800 ／ #ff0000 | カラーコード(色) 6
5 「東京都」のカラーコード取得は難しい | カラーコード(色) 5
5 Fireworks で背景画像透明化 | Fireworks CS3(Fireworks) 5
6 金融機関ブランドカラー ／ コーポレートカラー | カラーコード(色) 4
7 「:after擬似要素」は、Chromeの「要素を検証」で確認できない | 擬似(CSS) 3
7 「Font Awesome 4」と「Font Awesome 5」の違い(Font Awesome バージョン4からのアップグレード) | Font Awesome(フォント) 3
7 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 3
7 個人的によく見返すエントリーへのLinkなど | その他 3
7 RGB ⇔ Lab | 色変換(色) 3
7 「Google Chrome」の文字が突然ギザギザで表示されるようになったら、「chrome://flags/#top-chrome-md」へアクセス後、右上の「Reset all」ボタンをクリックします。 | Google Chrome(ブラウザ) 3
7 色モデルイメージ図 | 色変換(色) 3
8 Windows10で「Google Chrome」が常に最前面に表示される。「アクティブウィンドウ」が最前面で表示されない → 解決方法存在しない | Google Chrome(ブラウザ) 2
8 ICCプロファイル | カラーマネージメント(色) 2
8 パッケージ化されてない拡張機能 | Chrome 拡張機能 2
8 空間的 / 可逆な JPEG ファイルの読み込みは実行されません | Photoshop CS3(Photoshop) 2
8 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 2
2024/11/23 1:01 更新