superman00 – Just another WordPress site
Fashion is what you buyStyle is what you do with it Shop Now Showing 1–10 of 39 results 2 Pack Bed Pillows for Sleeping Down Alternative Sleeping Pillows for Side Back Sleepers with Super Soft Plush Fiber Filled Hotel Collection Adjustable Fit and Zipper Removable Pillow $22.00 Add to cart 2-Pack – Queen Size (20×30 inches) Pillow Cases – Satin Pillow Covers with Envelope Closure $22.00 Add to car
YACP: よりオブジェクト指向なCSS設計のためのプリプロセッサー - morishitter blog
この投稿はCSS Architecture Advent Calendar 2014の2日目の記事です。 よりオブジェクト指向なCSSの記述を助ける、YACPというCSSプリプロセッサーを作っています。具体的な、セレクタの命名規則やディレクトリ構成の話ではないです。 Object Oriented CSS 数あるCSSの設計手法のベースとなる、OOCSS (Object Oriented CSS、オブジェクト指向CSS)というものがある。OOCSSはその名の通り、CSSのクラス設計（ルールセットの定義）にオブジェクト指向プログラミングの考え方を少し取り入れたようなものだ。 OOCSSの原則として、「構造と見た目の分離」、「コンテナとコンテンツの分離」というものがある。OOCSSが提唱していることは要するに、HTMLの構造に依存しないセレクタを書き、レイアウトと見た目に関するルールセットは別
CSSプリプロセッサーの`extend`の悪いところ - morishitter blog
why CSS preprocessors `extend` feature is wrong : http://t.co/oRl0rlh2Az— bloodyowl.jsx (@bloodyowl) 2014, 11月 27 extendが悪いというより、HTMLに複数のclass属性値書いてスタイル当てることが悪いっていう例だと思う— Masaaki Morishita (@m0rishitter) 2014, 11月 27 いわゆるマルチクラス設計の欠点は - 共通するプロパティが上書きされる - ルールセット間に暗黙の依存関係が生まれる - （HTMLのセマンティックさを損ねる） だと思ってる— Masaaki Morishita (@m0rishitter) 2014, 11月 27 「共通するプロパティが上書きされる」が今回の例。 「ルールセット間の暗黙の依存関係」っていうのは
Using Object-Oriented CSS with Sass – TheSassWay.com
Nicole Sullivan first introduced the world to Object-Oriented CSS (OOCSS) at Web Directions North in 2008. Since then it has emerged as one of the leading modular systems for organizing your CSS. OOCSS is not that different from other CSS methodologies like SMACSS or BEM. All of them aim to separate content from structure by placing CSS styles in reusable modular blocks of code. In fact, I usually
Pushing BEM to the next level with Sass 3.4
With the release of the new parent selector in Sass 3.4 it is possible to deal with your selector as you do with lists. I thought this must be damn usable for your BEM (block element modifier) mixins. .test { @debug type-of(&); //returns list }Problems with the parent selector in Sass 3.3The parent selector has already been reworked in Sass 3.3. Since then you could combine the selector with any k
Write Better Media Queries with Sass
Let's face facts: media queries can be a pain. They're difficult to write and they tend to get duplicated a lot. Sass includes a few helpful features that make media queries easier to work with. This article will show you these tricks and how you can use them to simplify your stylesheets. The Basics Let's take a look at a simple example. p { font-size: 16px; } @media (min-width: 768px) and (max-wi
SMACSS Your Sass Up
I often ask myself these questions: Will this code be easy for the others to edit? Does it scale? Can I forget it and change it later without being lost? While Scalable and Modular Architecture for CSS (SMACSS) is just one methodology, the principals of modular CSS are applicable to sites large and small. Using a modular approach in tandem with Sass can greatly improve development efficiency and p
Sass: Sass 3.4 is Released
We’ve been trying to increase the pace of Sass releases, and it looks like we’ve succeeded. A mere five months after the release of Sass 3.3, we’re announcing the release of Sass 3.4.0, codename Selective Steve. Faster releases mean fewer major features per release, so there are only two big new things to talk about (although there are plenty of little improvements you can read about in the change
デザイナーのいないチームでのCSSの書き方 - morishitter blog
スタートアップや少人数のチームでは、デザイナー（最終的なデザインの決定権を持つ人）がいないことも少なくないと思う。 また、エンジニアだけで何かサービスを作ることも多いだろう。 僕自身、そのような環境でよく開発をする。 僕はCSSはそこそこ書けるが、デザイナーではないのでサイトのデザインについては他のエンジニアと相談しながら決定している。 IllustratorやPhotoshopもほぼ全く使えないので（紙にざっくりレイアウトを書くことはあるが）、HTMLとCSSを修正しながらデザインを検討することになる。 「CSS書きました。」 「うーん、ここのコンテンツはもっと大きく表示させたい。色ももっと目立つ感じで。」 「なおしました。」 「うーん、やっぱり微妙かも。試しにここ2段組にしてみて。」 「」 なんてことになる。 今更言う必要はないと思うがCSSの設計は非常に脆く、アドホックな修正を繰り返
Keep Sass Simple — SitePoint
In a couple of months, it will be 2 years since I started using Sass. Almost every day. At work. At home. On side projects. To the point where people ask for my help when it comes to Sass, and believe me I am very glad to provide help whenever I can. Some requests are fair. Some are dead-simple but hey, we all started somewhere. And some are just insane. Look, I don’t judge; at some point every si
CSSのマルチクラス設計の問題点 - morishitter blog
CSSのルールセットを細かく（classセレクタで）定義し、HTMLに複数のclass属性値を書いてスタイルをあてるような設計をマルチクラス設計と言ったりする。 マルチクラスにすることで冗長な記述が減り、ファイル容量が減り、ルールセットの再利用性が高くなり、保守性が向上する。 OOCSSをはじめとしたCSSの設計概念はマルチクラスを前提としており、Twitter Bootstrap等の多くのCSSフレームワークはマルチクラスでスタイルをあてるようになっている。 <!-- Twitter Bootstrapのボタンの例 --> <button class="btn btn-primary btn-lg">Save</button> 良いことしかないように見えるマルチクラス設計だが、いくつか問題点もある。 まず、HTMLに複数のclass属性値を書くと共通するプロパティが上書きされるということ
Sassでの色管理
Sassでは色を変数として定義でき、また様々な関数でそれを操作することが可能になっている。そのため色を論理的に管理することが可能になっているが、これといった手法が確立されているわけではない。このウェブサイトでは少しややこしい形で管理するようにしている。どういう目的でこういう複雑な構造になっているのかを簡単に書いておきたい。 基本色の定義 基本色、つまりテーマカラーであったり、本文の背景色や文字色といった見た目のイメージを決定する色は、色コードを直接指定して定義する必要がある。これはほぼ間違いなくみんな同じように書いているだろう。 $color-dark: rgb(60, 51, 48); $color-light: rgb(252, 249, 240); $color-accent: rgb(17, 136, 187); これらは背景色であったり文字色、そしてリンクの文字色として使っている
Everything you need to know about Sass 3.4
Everything you need to know about Sass 3.4 Micah Godbolt | Developer July 15, 2014 Sass 3.4 may not be as groundbreaking as 3.3 was, but it does comes with one fundamental shift that deserves some careful attention. This feature actually made a brief appearance in Sass 3.3 betas, but was eventually pulled for further refinement. By the looks of the thing, it was well worth the wait! In Sass 3.4 we
Automating CSS animations with Sass
The other day, Harry Roberts featured a snippet of code from his own site on Twitter, asking for some ways to improve it (if any). What Harry did was computing by hand the keyframes of a carousel animation, thus claiming that high school algebra indeed is useful. “Why do we have to learn algebra, Miss? We’re never going to use it…” —Everyone in my maths class bit.ly/UaM2wf What’s the idea? As far
Sass 3.4のselector-replace()とselector-nest()を利用したmixinの例
昨日の記事「Sass 3.4 rc1の新機能を見てみた」を書く際に視聴した動画「Sass Bites #44 - Sass 3.4 Preview」の続編、「Sass Bites #45 - Sass 3.4 and selector-replace( )」が予定通り公開されていたので視聴してみました。 この動画を見ると、selector-replace()とselector-nest()の使い方がよく理解できると思います。例えば、昨日紹介しなかったselector-nest()の場合、selector-nest(".foo", ".bar", ".baz")とすると.foo .bar .bazというセレクタが返されます。 動画で紹介されたmixinをベースに、自分なりに改良したmixinを作ってみました。 @mixin insert-context($target, $add-conte
Sass 3.4 rc1の新機能を見てみた
今朝TwitterのTLを見ていると、Sass 3.4に関する話題が目に入りました。Githubを見てみると、2014年7月12日にmasterブランチがBump VERSION to 3.4.0.rc.1されています。 doc-src/SASS_CHANGELOG.mdを見ると詳細が書かれていましたので、少し確認してみました。また、Sass Bites #44 - Sass 3.4 Preview という動画もありましたので、これも視聴してみました。 SassScriptで&が利用可能に Sass 3.3までは、&はセレクタ内でのみ利用可能でしたが、Sass 3.4ではSassScriptでも利用可能になったようです。 Sass Changelogにあるように$selectorに&を代入し、inspect($selector)とすると、.foo.bar .baz.bang, .bip.q
selector-replace() の利用
近々リリース予定の Sass 3.4.0 では、& が SassScript で使えるようになるほか、セレクター関連の関数が大きく充実する。SassMeister ではすでに使えるので いくつか試してみた けど、セレクターを置換するselector-replace() 関数がかなり便利そう。 使用例としてはまず、ネストしたセレクターで、ルートと直近のセレクターの間に別のセレクターを挿入する、というのが考えられる。 .outer { color: red; .inner { color: green; @at-root { #{ selector-replace(&, '.outer', '.outer .foo') } { color: blue; } } } } & で親セレクター .outer .inner を参照し、そのうち .outer を .outer .foo に置換することで
Inverse trigonometric functions with Sass – TheSassWay.com
You might think that math doesn’t have a lot to do with writing stylesheets, but you can actually do some amazing things with a little math in CSS. Math (particularly trigonometry) can help you model the real world. You’ll need it if you want to do something complicated with 3D transforms. And it can be a lot of fun if you just want to impress your friends. Here’s an example: See the Pen Pure CSS
a solution to control font-size relatively with media queries in Sass | Yomotsu net
a solution to control font-size relatively with media queries in Sass SCSS で media queries を使いながら、相対的に font-size を扱うよさ気な方法を思いついた。 I just conceived a good solution to control font-size relatively with media queries in Sass. settingsAt first, you can change… base font sizes, which is referenced by reading text like and othres… brakepoints for mediaqueries and here is the settings and mixins $font-si
Use a Css framework but keep an uncommited and semantic markup
It seams that everybody is using some kind of css framework these days, and in my opinion: They are right! And you should be using one too! If there’s anybody working on a problem and was kind enough to share her knowledge with you, you should take it and embrace it. But it comes with a price… as it always does. tl;drUse sass @extend directive to separate the page’s markup from the boilerplate css
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
