テキスト、ボーダー、背景、アクセント、エラーなど、カラーをCSSでどのように定義すると効率的に管理できるのか、保守が簡単になるのか、そのテクニックを紹介します。 Create your design system, part 3: Colors by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに カラーをCSSで効率的に管理するために セマンティックにするか、宣言型にするか 基本的なカラーパレットの作成 セマンティックカラーの追加 このアプローチを採用する理由 テーマに使用するカラー はじめに 元々は、近日公開予定の「Web Components」のために作成したものですが、グローバルのCSSとして利用できるので、一足先に公開します。 Web Components|CodyHouse カラーをCS
BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
Jeet's API. Interact with our docs.column ($ratios: 1, $offset: 0, $cycle: 0, $gutter: map-get($jeet, 'gutter')) Specify an initial ratio, either as fractions or decimals, then pass the parent container's context ratio to maintain consistent gutters as you nest. Specify a ratio to make your offset have a margin-left. Make it negative to give it a margin-right instead. e.g. column(1/4, $offset: 1/4
Stylus の公式サイトを軽く流し見したところ、Sass で気になっていたところが結構解決できそうな感じだったので Basis を Sass から Stylus に書き直してみました。 Sass から Stylus に書きなおすときのポイント 構文 Stylus は : や {}、, を省略してインデントベースで CSS を書くことができます。僕は Sass は Scss 構文しか知らないのですが、Sass 本来の構文だと似たような感じで書けるのですかね？ちなみに僕は混乱しそうだったので省略せずに書きました。 body font-family sans-serif; font-weight normal; 変数 Sass は変数の宣言が CSS のプロパティの記述に似ていて:で定義しますが、Stylus の場合はプログラミング言語チックに = で代入します。 // Sass $gutte
Здравствуйте! Tokyo Otaku Modeでフロント周りを担当している今吉です。 社内でロシア人という設定を付けられていますが、ロシア語は挨拶くらいしかできません。 Webサイトを作るのに避けて通れないのがCSSだと思います。エンジニアも多かれ少なかれCSSを書く事があるかと思います。 しかし、CSSを書くのはとても面倒くさいです。出来る限り楽をしたいと常々思っています。そこで、CSSプリプロセッサを導入してCSSを作成している方も多いでしょう。CSSプリプロセッサとは、乱暴に言ってしまえばCSSをクールにラクに書く事ができる言語です。(設計が素晴らしく、COOLなCSSというものも、もちろんあるとは思いますが、これは一旦置いておきます。) 恐らく最も知られているものは、LESSとSass/Scssでしょう。 しかし、Tokyo Otaku Modeでは、Stylusとい
これまで Basis は Sass/CSS フレームワークとして開発していましたが、先日書いた記事（SassからStylusに乗り換えてみたので違いや躓いたところなど）のとおり Stylus がなかなか良さ気だったので Stylus 版の Basis を作りました。 その中で、Stylus でやるなら単純に Sass を書き換えるだけじゃなく設計から変えたほうが良いのではないか？という気がして内部的には結構書き換えを行ったりしたので、その辺りも含め、Basis とは何か、どういう思想に基づいて開発しているのか、等改めてまとめてみたいと思います。 Basis Stylus 版ドキュメント https://getbasis.github.io Basis の設計思想 Basis は「どんな Web サイトの制作にも適用でき、簡単に使え、邪魔にならない CSS フレームワークが欲しい」との思いか
CSS にもだいぶ慣れてきて中括弧の厳しさが勝ってきたので、.scss (Sassy CSS) から .sass 記法に乗り換えます。 ドキュメント公式ドキュメントはこちら。 File: INDENTED_SYNTAX — Sass Documentation基本的には同じ。 中括弧 {}、セミコロン ; がいらず、インデントで表現するこちらがわかりやすい。 【ズボンを脱ごう】SassのSASS記法の魅力【カッコイイ】 – 納豆には卵を入れる派です。shorthands@mixin と @include を shorthands で、それぞれ =, + と表現できる@extend shorthand を mixin で作る@extend の shorthand はないようでしたが、Kendall Totten さんの mixin を使います。 abbreviated syntax for
どうも。 CSS Preprocessor Advent Calendar 2012 2012年12月20日（木）を担当させていただきます@ken_c_loです。 そうそうたる面々の中、みなさんハイレベルな内容で大変恐縮しているのですが、そんな中モジモジしながらしかし空気を読まずに、ずっと書きたかったウザい感じのエントリを投下しようと思います。 ズボンを履かない「SASS記法」とは？ 発端はこのツイートからでした。 …と、そんな流れで、「ズボンを履かない」SASS記法とはなんぞや。その魅力、カッコよさについて力説しようと思います。あわよくばSASS記法仲間を増やしたい！そして、お菓子などを食べながらSASS記法の魅力について語り合い、仲間の少なさについて嘆き合う.sassの会を月一くらいで開催できればと思います。 ヾ(*’ω’*)ﾉﾞ ｽﾞﾎﾞｰﾝ‼ SassにはSCSS記法とSASS記法
Less や Stylus、Sass などの CSS プリプロセッサはもう手放せないツールの一つとなって久しい感じです。僕は業務内/プライベート問わず、スタイルの殆どを Sass(Scss)を使って書いています。 ただ、一旦覚えた知識のまま惰性で使っている点もあったりするので、改めて色々と調べてみたりして自分自身の知識を更新したいなと思い、中でもまだまだ使いこなせていなかった map に関する諸々をおさらいしてみました。 map とは? もう導入されてかなり経つので沢山の人が使っていると思いますが、Sass v3.3 以降に追加されたデータ型で、連想配列みたいに扱うことが出来るというものです。 以下はボタンのサイズを書き出す簡単なサンプルコードです。冒頭で宣言している変数の$btn-sizesが map に当たります。 $btn-sizes: ( sm: 20px, md: 30px, l
小さいアプリケーションなら、styleは変更がある度に毎回フルビルドしてしまっても1sもかからないかもしれない。 しかし大きくなって、5s以上かかると非常に苦痛だ。 というわけで差分ビルドしたい。 Sassの差分ビルドで問題になること 差分ビルド自体は簡単で、gulp-cachedとかを使えば、前回と差分があるものだけをビルドできる。 なんだけど、その場合に問題になるのがsassの依存関係(@import)の解決だ。 単純に差分のあったファイルをビルドするだけだと、@import元を辿れない。 そうすると@import元のファイルが変更についてこない。 いや、でもnode-sassのwatchオプションって@import元辿ってるよな、あれってどうなってるんだ？？ と思って実装を見てみたら、sass-graphというnpmを使って辿っていた。 お、これ使えば差分ビルド時に依存関係の解決もで
エイチーム引越し侍Advent Calendar 14日目の記事です。 今回は、CSS設計手法について書こう～と思っていたのですが、 最近sass-lintのエラールールについて調べる機会があり、日本語訳の一覧がほしいなーと思ったので日本語訳についてまとめようと思います。 こちら https://github.com/sasstools/sass-lint/tree/develop/docs/rules を参考にしています。 各ルール内に入れている例は上記リンク先のルールにある例を引用しています。 ただ全部の例をもってきていないので分からない場合はリンク先で確認してください。 また、ルールは現時点ではすべて網羅できていませんが、また随時更新していこうかなと思ってます！ 最初に書いておきますが、まじで長いです。 右側のスクロールバーをちらっと見るとわかるかと思いますが、まじでながいです。 エ
sassのコンパイル時にどうにもgulp-combine-media-queriesがエラーを起こしてしまって、けっこうハマってしまった。 環境 node: v4.2.2 npm: 2.14.7 gulp: CLI version 3.9.0 gulp: Local version 3.9.0 gulp-combine-media-queries: 3.1.0 エラー内容 内容は以下のような感じ。 buffer.js:167 throw new TypeError('must start with number, buffer, array or string'); ^ TypeError: must start with number, buffer, array or string at fromObject (buffer.js:167:9) at new Buffer (buffe
テキスト要素を配置する際、line-heightがあると、テキストの先頭行を上ぴったりに揃えることはできません。先頭行だけline-heightでできた上スペースを取り除き、上に揃えるスタイルシートのテクニックを紹介します。 これをしたいと思った人は少なくないと思います。 先頭行の余計な余白を取り除き、ぴたっと揃えることができます。取り除くのは先頭行の上だけなので、先頭行の下やほかのテキスト要素はline-heightが適用されます。 Line-height Crop by CodyHouse 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 先頭行だけを上に揃えるスタイルシート テクニックの解説 免責事項 はじめに 元々は、近日公開予定の「Web Components」のために作成したものですが、グローバルのCSSとし
![[CSS]テキスト要素の先頭行だけline-heightを取り除き、上ぴったりに揃えるスタイルシートのテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/cbe5fdca5858448e042c50f10de1371724f1a1b4/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fcoliss.com%2Fwp-content%2Fuploads-201803%2F2018082000.gif)
Sassで変数を定義するときに !default がついていることがありますが、これは「あとから上書きされます」という意味ではなく「既に定義されている場合は上書きしません」という意味らしい。 例えばこんな感じの変数ばかりが定義されたファイルがあるとします。
.box { margin: 0 0 30px; padding: 15px; border: 1px solid #ccc; } // .box で使ったスタイルを継承 .item { @extend .box; } .box, .item { margin: 0 0 30px; padding: 15px; border: 1px solid #ccc; } .btnBase { text-align: center; margin: 0 0 10px; a { display: block; padding: 10px 20px; background: #999; color: #fff; &:hover { background: #ccc; color: #333; } } } .imgL { float: left; margin-right: 15px; } @import
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
