LESS入門

CSS拡張メタ言語LESS

LESSとは?

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

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

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


変数演算 / プロパティ名

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

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


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

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


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

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

 閲覧数:734 投稿日: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/5/09 21:53 更新
週間人気ページランキング / 5-2 → 5-8
順位 ページタイトル抜粋 アクセス数
1 「パッケージ化されてない拡張機能を読み込む」でインストールした拡張は、chromeを「更新」すると正常動作しなくなることがあります。 | Chrome 拡張機能 9
1 鉄道会社毎のカラーコード | カラーコード(色) 9
2 血の色 / #b30000 / #360800 / #ff0000 | カラーコード(色) 6
3 ChromeブックマークURL重複検出が出来ない / 仕様変更に伴いURL重複登録できなくなった | Chromeブックマーク(ブラウザ) 5
4 Chromeデベロッパーツールで、スマホソースコードを確認したいが、USBデバッグ機能をどうしても有効にすることが出来ない | モバイルデザイン(デザイン) 4
4 金融機関ブランドカラー / コーポレートカラー | カラーコード(色) 4
4 「東京都」のカラーコード取得は難しい | カラーコード(色) 4
5 RGBの種類 / ビットカラー | RGB(色) 3
5 「overflow」効果を打ち消すスタイルシートは、「overflow: auto;」 3
5 「Google Chrome」ブックマークをフォルダー単位で、「ドメイン毎」「追加日昇降順」に並べ替える拡張機能「Sortmark」 | Chrome 拡張機能 3
5 「文春オンライン」に掲載されている画像を「Google Chrome」ブラウザでダウンロードするためには、chrome拡張機能「Absolute Enable Right Click & Copy」を使用します。 | 画像 3
6 16進数カラーコード / 2進数 2
6 Design 0 2
6 キャラクター無料作成ジェネレーター / FLASH / オンラインサービス | イラスト参考(デザイン) 2
6 「bgcolor」「background-color」「background」の違い | CSS 2
7 「max-width:100%;」は原寸画像サイズ以上に拡大表示することは出来ない。「width:100%;」は配置要素サイズ以上に拡大することが出来ない 1
7 Web Components | HTML 1
7 「コズミックブルー」は、くすんだ青系全般の色を指す用語だと思います。 | カラーコード(色) 1
7 Twitterr / Google / Yahoo! JAPAN 1
7 用語(色) カテゴリー 1
2025/5/9 1:01 更新