Submit Search
Upload
LESS楽しいれす(^q^)
•
11 likes
•
3,145 views
taiju higashi
Follow
kanazawa.js vol1.7 at kanazawakagekiza 15min
Read less
Read more
Technology
Report
Share
Report
Share
1 of 30
Download now
Download to read offline
Recommended
JJUG CCC 2017 Spring LT about JPA
JJUG CCC 2017 Spring LT about JPA
Naoya Kojima
20150704cmsdou
20150704cmsdou
Kazue Igarashi
WP-APIを使ってみよう&No PHPテーマという考え方
WP-APIを使ってみよう&No PHPテーマという考え方
Hidetaka Okamoto
Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」
Hideki Akiba
WordCampOsaka2012セッション資料
WordCampOsaka2012セッション資料
horike37
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
Takayuki Miyauchi
WordPress JSON REST API 〜さらばPHP、さらばWordPressテーマ
WordPress JSON REST API 〜さらばPHP、さらばWordPressテーマ
Kazue Igarashi
サーバーレスでアンケートフォームを作ってみた
サーバーレスでアンケートフォームを作ってみた
ryutakatori
Recommended
JJUG CCC 2017 Spring LT about JPA
JJUG CCC 2017 Spring LT about JPA
Naoya Kojima
20150704cmsdou
20150704cmsdou
Kazue Igarashi
WP-APIを使ってみよう&No PHPテーマという考え方
WP-APIを使ってみよう&No PHPテーマという考え方
Hidetaka Okamoto
Firefox OSアプリ 「ModeView」
Firefox OSアプリ 「ModeView」
Hideki Akiba
WordCampOsaka2012セッション資料
WordCampOsaka2012セッション資料
horike37
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
信頼性が高くハイパフォーマンスなテーマ開発テクニックでライバルに差をつけろ!
Takayuki Miyauchi
WordPress JSON REST API 〜さらばPHP、さらばWordPressテーマ
WordPress JSON REST API 〜さらばPHP、さらばWordPressテーマ
Kazue Igarashi
サーバーレスでアンケートフォームを作ってみた
サーバーレスでアンケートフォームを作ってみた
ryutakatori
a-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまで
girigiribauer
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
いまいまMySQL@OSC2016長岡
いまいまMySQL@OSC2016長岡
sakaik
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
タカシ キタジマ
いまいまMySQL@OSC2016島根
いまいまMySQL@OSC2016島根
sakaik
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
Polymerで先取り☆Web Components
Polymerで先取り☆Web Components
Mayu Kimura
JSフレームワークのシンタックスを比べてみる
JSフレームワークのシンタックスを比べてみる
yumi_chappy
恋に落ちるRuby
恋に落ちるRuby
Yuuka Tomomatsu
Rendr入門: サーバサイドで(も)動かす、Backbone.js
Rendr入門: サーバサイドで(も)動かす、Backbone.js
Masahiko Tachizono
{LESS}をちょっと拡張してみた
{LESS}をちょっと拡張してみた
洸人 高橋
CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルに
CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルに
Masunaga Ray
Css拡張言語のコトハジメ
Css拡張言語のコトハジメ
regret raym
Less - first step
Less - first step
Kohki Nakashima
compassで簡単! CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用する
Kazuya Hiruma
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
Toshimichi Suekane
Sass less
Sass less
Net Kanayan
First sass
First sass
Toshiaki Sasaki
壊れやすいCSS
壊れやすいCSS
Masahiro Kobayashi
実践Sass 前編
実践Sass 前編
Azusa Tomita
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
Shunsuke Watanabe
CSS Preprocessor Hands-on
CSS Preprocessor Hands-on
littlebustersreply
More Related Content
What's hot
a-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまで
girigiribauer
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
知己 久保
いまいまMySQL@OSC2016長岡
いまいまMySQL@OSC2016長岡
sakaik
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
タカシ キタジマ
いまいまMySQL@OSC2016島根
いまいまMySQL@OSC2016島根
sakaik
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Kazuki Akiyama
Polymerで先取り☆Web Components
Polymerで先取り☆Web Components
Mayu Kimura
JSフレームワークのシンタックスを比べてみる
JSフレームワークのシンタックスを比べてみる
yumi_chappy
恋に落ちるRuby
恋に落ちるRuby
Yuuka Tomomatsu
Rendr入門: サーバサイドで(も)動かす、Backbone.js
Rendr入門: サーバサイドで(も)動かす、Backbone.js
Masahiko Tachizono
What's hot
(10)
a-blog cms初心者が テンプレート作るまで
a-blog cms初心者が テンプレート作るまで
HTML/CSSを効率的にする メタ言語とツールのアレコレ
HTML/CSSを効率的にする メタ言語とツールのアレコレ
いまいまMySQL@OSC2016長岡
いまいまMySQL@OSC2016長岡
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
WP-CLIとWordPress公式ディレクトリを活用した爆速サイト構築術 ーインストールからデザイン、ページ作成までを10分でー
いまいまMySQL@OSC2016島根
いまいまMySQL@OSC2016島根
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
CSSフレームワークを使った 簡単なレスポンシブデザインの作成
Polymerで先取り☆Web Components
Polymerで先取り☆Web Components
JSフレームワークのシンタックスを比べてみる
JSフレームワークのシンタックスを比べてみる
恋に落ちるRuby
恋に落ちるRuby
Rendr入門: サーバサイドで(も)動かす、Backbone.js
Rendr入門: サーバサイドで(も)動かす、Backbone.js
Similar to LESS楽しいれす(^q^)
{LESS}をちょっと拡張してみた
{LESS}をちょっと拡張してみた
洸人 高橋
CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルに
CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルに
Masunaga Ray
Css拡張言語のコトハジメ
Css拡張言語のコトハジメ
regret raym
Less - first step
Less - first step
Kohki Nakashima
compassで簡単! CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用する
Kazuya Hiruma
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
Toshimichi Suekane
Sass less
Sass less
Net Kanayan
First sass
First sass
Toshiaki Sasaki
壊れやすいCSS
壊れやすいCSS
Masahiro Kobayashi
実践Sass 前編
実践Sass 前編
Azusa Tomita
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
Shunsuke Watanabe
CSS Preprocessor Hands-on
CSS Preprocessor Hands-on
littlebustersreply
Css preprocessorの始めかた
Css preprocessorの始めかた
Hiroki Shibata
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Yoshinori Kobayashi
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
Hiroaki Wakamatsu
gulp-sprockets、あるいはRailsのAssetsのビルドについて
gulp-sprockets、あるいはRailsのAssetsのビルドについて
yo_waka
React で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考える
Yutaro Miyazaki
今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会
Yuji Nojima
Sass(SCSS)について
Sass(SCSS)について
Kazufumi Miyamoto
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
lyca chigyo
Similar to LESS楽しいれす(^q^)
(20)
{LESS}をちょっと拡張してみた
{LESS}をちょっと拡張してみた
CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルに
CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルに
Css拡張言語のコトハジメ
Css拡張言語のコトハジメ
Less - first step
Less - first step
compassで簡単! CSS3を手軽に利用する
compassで簡単! CSS3を手軽に利用する
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
gulp + sass で目指せ倍速コーディング(東区フロントエンド勉強会 2015年 第1回) 本編
Sass less
Sass less
First sass
First sass
壊れやすいCSS
壊れやすいCSS
実践Sass 前編
実践Sass 前編
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
大阪Node学園八時限目 「コーディングのためのless - 基礎編 -」
CSS Preprocessor Hands-on
CSS Preprocessor Hands-on
Css preprocessorの始めかた
Css preprocessorの始めかた
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
Sassについてゼロから解説 -基本の理解だけでも効率アップ-|第14回ゼロから始めるWordPress勉強会
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
JavaScript + CSS3を活用して スマートフォンサイト/アプリに 動きを付けてみよう
gulp-sprockets、あるいはRailsのAssetsのビルドについて
gulp-sprockets、あるいはRailsのAssetsのビルドについて
React で CSS カプセル化の可能性を考える
React で CSS カプセル化の可能性を考える
今日から使える! Sass/compass ゆるめ勉強会
今日から使える! Sass/compass ゆるめ勉強会
Sass(SCSS)について
Sass(SCSS)について
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
CSS拡張メタ言語 Sass が何者かを紹介する | SakanaTech
More from taiju higashi
一兵卒の New Normal Agile
一兵卒の New Normal Agile
taiju higashi
俺のローカル開発環境 - MTDDC Meetup NAGOYA 2014
俺のローカル開発環境 - MTDDC Meetup NAGOYA 2014
taiju higashi
MTDDC 2013 LT | Hello, my little giant
MTDDC 2013 LT | Hello, my little giant
taiju higashi
やすい・はやい・うまいMTのホスティング環境を求めて - jaws-ug-3to-2013-sprint
やすい・はやい・うまいMTのホスティング環境を求めて - jaws-ug-3to-2013-sprint
taiju higashi
Sassられ指南
Sassられ指南
taiju higashi
JavaScriptとLisp
JavaScriptとLisp
taiju higashi
Learning jQuery
Learning jQuery
taiju higashi
Learning regular expression
Learning regular expression
taiju higashi
More from taiju higashi
(8)
一兵卒の New Normal Agile
一兵卒の New Normal Agile
俺のローカル開発環境 - MTDDC Meetup NAGOYA 2014
俺のローカル開発環境 - MTDDC Meetup NAGOYA 2014
MTDDC 2013 LT | Hello, my little giant
MTDDC 2013 LT | Hello, my little giant
やすい・はやい・うまいMTのホスティング環境を求めて - jaws-ug-3to-2013-sprint
やすい・はやい・うまいMTのホスティング環境を求めて - jaws-ug-3to-2013-sprint
Sassられ指南
Sassられ指南
JavaScriptとLisp
JavaScriptとLisp
Learning jQuery
Learning jQuery
Learning regular expression
Learning regular expression
Recently uploaded
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Toru Tamaki
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Yuma Ohgami
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
Ryo Sasaki
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
taisei2219
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
Hiroki Ichikura
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
Toru Tamaki
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
iPride Co., Ltd.
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
Toru Tamaki
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
sugiuralab
Recently uploaded
(9)
論文紹介:Semantic segmentation using Vision Transformers: A survey
論文紹介:Semantic segmentation using Vision Transformers: A survey
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
Open Source UN-Conference 2024 Kawagoe - 独自OS「DaisyOS GB」の紹介
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
[DevOpsDays Tokyo 2024] 〜デジタルとアナログのはざまに〜 スマートビルディング爆速開発を支える 自動化テスト戦略
TSAL operation mechanism and circuit diagram.pdf
TSAL operation mechanism and circuit diagram.pdf
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
【早稲田AI研究会 講義資料】3DスキャンとTextTo3Dのツールを知ろう!(Vol.1)
論文紹介:Automated Classification of Model Errors on ImageNet
論文紹介:Automated Classification of Model Errors on ImageNet
SOPを理解する 2024/04/19 の勉強会で発表されたものです
SOPを理解する 2024/04/19 の勉強会で発表されたものです
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
論文紹介:Content-Aware Token Sharing for Efficient Semantic Segmentation With Vis...
スマートフォンを用いた新生児あやし動作の教示システム
スマートフォンを用いた新生児あやし動作の教示システム
LESS楽しいれす(^q^)
1.
LESS 楽しいれす (^p^)
taiju @ kanazawa.js v1.7 kanazawa.js v1.7
2.
自己紹介 @name:
"東 大樹 <Higashi Taiju>"; @current: "BaseLine, Inc."; @blog: "あと味"; @twitter: "@taiju"; @facebook: "taiju.higashi"; kanazawa.js v1.7
3.
アジェンダ
• LESS はやめぐり • LESS is JavaScript kanazawa.js v1.7
4.
アジェンダ
• LESS はやめぐり • LESS is JavaScript kanazawa.js v1.7
5.
LESSってなんれすか? 変数、ミックスイン、演算、関数 のような動的な振る舞いを、 CSSに拡張したCSS拡張メタ言語。
kanazawa.js v1.7
6.
LESSってなんれすか? Bootstrap
kanazawa.js v1.7
7.
拡張ってなんれすか? • 変数 • ミックスイン •
ネストルール • 関数と演算 kanazawa.js v1.7
8.
具体的に知りたいれす!
具体例を交えて LESSの「はやめぐり」をしましょう kanazawa.js v1.7
9.
拡張ってなんれすか? • 変数 • ミックスイン •
ネストルール • 関数と演算 kanazawa.js v1.7
10.
変数 CSSの記法 /* CSS */ #header
{ color: #4D926F; } h2 { color: #4D926F; } kanazawa.js v1.7
11.
変数 LESSの記法 // LESS @color: #4D926F; #header
{ color: @color; } h2 { color: @color; } kanazawa.js v1.7
12.
拡張ってなんれすか? • 変数 • ミックスイン •
ネストルール • 関数と演算 kanazawa.js v1.7
13.
ミックスイン CSSの記法 /* CSS */ #header
{ border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; } #footer { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; } kanazawa.js v1.7
14.
ミックスイン LESSの記法 // LESS .rounded-corners (@radius:
5px) { border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius; } #header { .rounded-corners; } #footer { .rounded-corners(10px); } kanazawa.js v1.7
15.
拡張ってなんれすか? • 変数 • ミックスイン •
ネストルール • 関数と演算 kanazawa.js v1.7
16.
ネストルール CSSの記法 /* CSS */ #header
h1 { font-size: 26px; font-weight: bold; } #header p { font-size: 12px; } #header p a { text-decoration: none; } #header p a:hover { border-width: 1px; } kanazawa.js v1.7
17.
ネストルール LESSの記法 // LESS #header {
h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; &:hover { border-width: 1px } } } } kanazawa.js v1.7
18.
拡張ってなんれすか? • 変数 • ミックスイン •
ネストルール • 関数と演算 kanazawa.js v1.7
19.
関数と演算 CSSの記法 /* CSS */ #header
{ color: #333; border-left: 1px; border-right: 2px; } #footer { color: #114411; border-color: #7d2717; } kanazawa.js v1.7
20.
関数と演算 LESSの記法 // LESS @the-border: 1px; @base-color:
#111; @red: #842210; #header { color: @base-color * 3; // #333 border-left: @the-border; border-right: @the-border * 2; } #footer { color: @base-color + #003300; // #114411 border-color: desaturate(@red, 10%); // #7d2717 } kanazawa.js v1.7
21.
LESSを使用する script要素とlink要素で使用する <link rel="stylesheet/less" type="text/css" href="styles.less"> <script
src="less.js" type="text/javascript"></script> ただし、読み込みや実行に時間がかかるため、 実務には向かない使用方法れす kanazawa.js v1.7
22.
LESSを使用する lesscコマンドでcssにコンパイルする $ lessc styles.less
> styles.css ただし、インストールやコマンドの実行に 黒い画面が必要れす あと、毎回このコマンド打つのめんどいれす kanazawa.js v1.7
23.
LESSを使用する GUIアプリを利用する
less.app SimpLESS CodeKit WinLess kanazawa.js v1.7
24.
LESSはやめぐりまとめ 今回の紹介したのは概要だけ 詳しくはLESSのドキュメントで!
本家: http://lesscss.org/ 日本語訳: http://less-ja.studiomohawk.com/ kanazawa.js v1.7
25.
アジェンダ
• LESS はやめぐり • LESS is JavaScript kanazawa.js v1.7
26.
LESSはJavaScriptれす githubにソースが置いてあります
kanazawa.js v1.7
27.
LESSはJavaScriptれす 機能追加してpull requestしてる人も
kanazawa.js v1.7
28.
LESSはJavaScriptれす JavaScriptだからなんとか読めそう!
見えるぞ・・・私にも敵が見える! kanazawa.js v1.7
29.
LESSはJavaScriptれす
JavaScriptの関数が使えます @var: `“hello”.toUpperCase() + ‘!’`; @height: `document.body.clientHeight`; kanazawa.js v1.7
30.
全体まとめ LESS 楽しいれす (^p^)
kanazawa.js v1.7
Download now