Sass currently treats / as a division operation in some contexts and a separator in others. This makes it difficult for Sass users to tell what any given / will mean, and makes it hard to work with new CSS features that use / as a separator. Today, Sass uses complex heuristics to figure out whether a / should be treated as division or a separator. Even then, as a separator it just produces an unqu
はじめに HTML+CSSコーディング専用の粒度分類を紹介します。 この仕組みは、デザインやワイヤーフレームなどの視覚情報を分解することに焦点をあて、分解した対象を部品化する流れも併せてガイド化した汎用手法です。 世の中には、コーポレートサイト / ポータルサイト / サービスサイト / システム管理画面 / ブログサイト… といった様々な種別のサイト、Webページがありますが、これらの「完成予想図（視覚情報）」を同じ方法で分解して、コーディング用の部品にできます。 粒度と言えばAtomic Designが有名ですが、この「HTML Parts」も粒度そのものの考え方についてはAtomic Designの踏襲です。その上で「思考の入り方・捉え方」や「名称と定義」をコーディング側に寄せることで、CSS設計やコーディング業務を標準化しやすくしています。 ※この記事は標準化ノウハウ公開の一環とし
.markdown-body { a { color: blue; &:hover { color: red; } } } to properties text: { align: center; // like text-align: center transform: uppercase; // like text-transform: uppercase } @mixin heading-font { font-family: sans-serif; font-weight: bold; } h1 { @include heading-font; } with parameters @mixin font-size($n) { font-size: $n * 1.2em; } body { @include font-size(2); } with default values @m
GitHubにあるREADME.mdを参考に、bootstrap-sassをインストールしてみました。 application.scssの設定 するとapplication.scssにimportするファイルは、bootstrapとbootstrap-sprocketsの2ファイルのみとなっています。 // 'bootstrap-sprockets' must be imported before "bootstrap" and "bootstrap/variables" @import "bootstrap-sprockets"; @import "bootstrap";" そのため、このままですと、ページごとに用意したscssファイルを読み込むためには、 毎回application.scssにimportする必要がでてきてしまいます。 デフォルトのapplication.css 通常、
Sass のディレクトリ構成やファイル管理の仕方は、プログラムを管理しやすくする上でとても重要だと思いますが、まだまだ日本語での記事はあまり見かけません。 そこで、海外サイトで素晴らしい記事（Q&Aでのコメント）を見つけましたので、御本人の許可をいただいて和訳させていただきました。 Sass ファイル読み込みの際のかなり基本的な部分についての解説ですが、とても丁寧にアドバイスされており、CSS/Sass 初心者にもわかりやすい内容だと思います。 Rails での Sass のコンパイルはどうなっているの？ Stack Overflow で、（質問の概要をざっくりまとめると） 『Rails の stylesheets の読み込み順についてよくわかりません。 思った通りにコンパイルできないのですが、どうしたらエラーを解決できますか。』 という質問が投げられていました。 以下、その質問に対しての
こんにちは。みんなのウェディングの平岡です。 みんなのウェディングでは自社開発したCSSフレームワーク「Esthe（エステ）」を利用して開発をしています。 今回はそのEstheの簡単な説明と導入までの流れを紹介したいと思います。 導入前までに抱えていた問題 案件が発生する都度すべてのデザインを作成していたため、デザイナーの作業が増えていく デザインガイドラインがないため、コンテンツ作成毎にトンマナがずれていく CSSのルールがないため、どこから読まれているのかわからず解読＆確認に時間がかかる サービスの急激な伸びによる影響でCSS周りの整備まで手が回らず、 コンテンツの拡充に比例して日々メンテナンスコストが上がっている状態でした。 なんとかしたい サイトとして共通化されたデザインパーツがほしい デザインガイドラインがほしい 管理されたCSS環境がほしい bootstrap？ bootstr
CoreOSがKubernetes-as-a-Service／etcd-as-a-Serviceなど発表。どのクラウドでもオープンなコンテナプラットフォームを実現 CoreOSは、5月31日に開催した同社のイベント「CoreOS Fest」にてKubernetesのマネージメントサービス「Kubernetes as a service Powered by Tectonic Operators」など、コンテナプラットフォームを実現するマネージドサービスを発表しました。 Kubernetesは、コンテナをクラスタ化した際の運用管理ツール。Kubernetes as a Serviceは、Kubernetesの運用をマネージドサービスとしてCoreOSが行うもの。利用者は障害対応やアップデートなど運用の手間をかけることなく、Kubernetesを利用できるようになります。 Kuberenete
この記事を書き始めたのは、現在使われているCSSの命名規則やスタイルの融合についての見解を Atomic OOBEMITSCSS という題名で風刺的な記事にまとめ、SitePointに投稿した数週間後です。それが8月頃のことだったのですが、この投稿はその後の私の生活に影響を及ぼしました。冗談のつもりで「 Atomic OOBEMITSCSS 」という題名をつけたがために、世間の人々はその題名を取り上げ、話題にしたのです。（正直言って、その内容について直接人々に質問することは、私にとって非常に愉快なことでした）。そして今年のSassConfで @extend の利用について議論したことがきっかけで、この見解を再検討する必要性に気づきました。 Classy CSSについて 上記で紹介した記事（「Atomic OOBEMITSCSS」）では、コンポーネントをマークアップする方法について（Pint
こうして見てみると、一段階上のサイズが追加されたというよりも、xs と sm の間が細かくなったという感じですね。 flexboxのサポート $enable-flex: true;を設定することでflexbox Layoutが使用されるようになります。これにより、tableやfloatを使っていた様々なハックが改善されるとのこと。ただし、IE9はflexbox Layoutをサポートしておらず、IE10でも古い仕様にしか対応していないため、デフォルトではこのオプションはfalseになっています。 well, thumbnail, panel を廃止、card に統一 コンポーネントの well, thumbnail, panelがなくなり、cardに統一されました。 CSSリセットを Reboot というモジュールに統一 CSSリセットには、Bootstrap3ではNormalize.cs
最近使ってる人多いんじゃないかなーというこちら。 こちらで、紹介されてて自分もvim-indent-guidesから乗り替えたんですが、最近になって気付いたんですよ。 あれ?これSyntax Highlight効いてなくね? 一番分かりやすかったのがJadeだったんですが。調べてみるとこんなissueがありました。 要はindentLineを有効にしていると、シンタックスハイライトが効かないファイルタイプがあるようで。自分の分かる範囲では以下でした。 jade stylus yaml scss 俺フロントエンドエンジニアなので、これ結構致命的じゃね? 前述のissueによるとindentLineの方での修正はムリっぽいことが書いてあって、syntaxの方の修正をしないといけないらしいです。 ということで、vim-indent-guidesに戻りました…。シンプルなindentLineの見た
Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説 上村 光星 10月12日にSass 3.3.0.rc.1が出ました。まだリリース候補ですが、どのような機能が追加されるのかはChangelogにあります。今回は「&」と@at-rootについて解説します。 HTML+CSSの命名規則にBEM方法論、もしくはHTML+CSS向けに派生したMindBEMdingを取り入れる方が増えてきているようです（筆者は使っていませんが…）。「&」の新機能と@at-rootは、このBEMのためといっても過言ではありません。 Sass 3.2の「&」 「&」は親セレクタを参照する特別なキーワードとして、Sass 3.3よりも前からありましたが、擬似クラスや擬似要素、セレクタの連結など、用途が限られていました。 // Sass 3.3よりも前の「&」の用途の例 .foo { &:hover
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
