総行数57,000の巨大CSS群をLessに書き換えた軌跡 - mixi engineer blog
こんにちは！フロントエンド闇祓いの Kuniwak です。 この投稿はmixiグループ Advent Calendar 2015の20日目の記事です。 今年の9月に、スマートフォン Web ブラウザ版 mixi「mixi Touch」の巨大 CSS を Less （CSS プリプロセッサー）でビルドする環境へと移行しました。 書き換えた CSS の行数は、なんと 56,725行 です。😵 ということで、今回は弊社の大規模 CSS → Less 移行事例についてお話しします。 背景 スマートフォン版 mixi は、2010年5月に始まりました。 この頃のスマートフォンは、iPhone 端末であれば iPhone 3GS、Android 端末であれば Nexus One という時期です。 また、スマートフォンの世界では、Webkit ベースのブラウザーが席巻していた時代ということになります。
SCSSとLESSのどちらを導入するか迷って、SCSSに決めたポイント - 眠る前に布団にはいろうか
SCSSとLESSのどちらを導入するかけっこう悩んだ時のまとめです。 最終的にはSCSSを選択しましたが、導入の参考になれば幸いです。 ちにみに、SCSSとLESSとは 再利用できるスタイル定義や変数など、CSSを効率的にコーディングできるように拡張されたメタ言語です。 どちらも、CSSをベースにした独自の記法でもってコーディングしそれをコンパイラでCSSに展開するというものです。 LESS SCSS 動作環境や使用などの詳しい比較はこちらが参考になります http://dxd8.com/archives/217/ Sass ≠ SCSS SCSSを調べていると、Sassという単語も目にすると思います。 使い始めた当初はごっちゃになってたのですが もともとはSassというプロジェクトが存在し、そこから派生したのが SCSSらしいです。 Sassも同じコンセプトのCSS拡張言語ですが、 たと
Getting started | Less.js
It's CSS, with just a little more. Use with Node.js: npm install -g less > lessc styles.less styles.css Or the browser: <link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="https://cdn.jsdelivr.net/npm/less" ></script> Or try the online playground ! 🆕 Less (which stands for Leaner Style Sheets) is a backwards-compatible language extension for CSS. This is the official do
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
