Neat - A Lightweight and flexible Sass grid
A lightweight and flexible Sass gridAsk questions on Stack Overflow and file bugs on GitHub.Find feature and API changes in the change log.Follow us on Twitter for announcements. InstallationIf you are using Ruby on Rails, Middleman, or Jekyll, install Neat using RubyGems. Just add the following to your Gemfile. gem "neat"Alternatively, you can install Neat with Bower, Ruby, or NPM. You can also u
RailsエンジニアのためのTwitter Bootstrapカスタマイズ例
Sassを使ったり、人からパクったりして、極力失敗しない方法
Sassier (BE)Modifers | Viget
We’re a full-service digital agency that’s been helping clients make lasting change since 1999. Contact Us In early 2013, the “Block Element Modifier” (BEM) css syntax emerged as a popular way to create better organization and uniformity across projects. For the most part, I love it. It’s clear, organized, and it makes sense. But one thing that kept bugging me (and my fellow FEDs) was how redundan
Sass 3.3で追加された「関数」や「変更点」のまとめ解説
前二回の記事では、Sass 3.3で追加された「&」の新機能と@at-rootと新しいデータタイプ「マップ」について解説しました。 最後となる今回は、新しく追加された関数やいくつかの変更点を解説します。少し長くなりましたので目次を作りました。気になるところからお読みください。 新しく追加された関数 文字列用の関数 リスト用の関数 call() unique-id() 変数、ミックスイン、関数の存在を調べる関数 inspect() 変更点 リスト関連 @each if() @extend !globalフラグ ※Source Mapについては、丁寧に解説しているブログ記事が既にいくつかありますので、ここでは省略させていただきます。 文字列用の関数 新たに追加された文字列用の関数は6つあります。 str-length($string) str-insert($string, $insert,
Sass 3.3で追加された新しいデータタイプ「マップ」まとめ解説
前回の記事では、Sass 3.3で追加される「&」の新機能と@at-rootについて解説しました。今回は新しいデータタイプの「マップ」について解説します。 マップは色々な使い道があると思いますし、使い方によってはかなり便利なものですので、ライブラリを作っている方などは特に覚えておくと良いと思います。 マップとは マップは任意の名前と値のペアが集まったもので、名前をキーにして値を設定したり、取り出して使います。 マップの書き方ですが、名前と値をコロン（:）で区切り、複数記述する場合はカンマ（,）で区切り、それらを丸括弧（()）で囲みます。CSSのスタイルの書き方とちょっと似ていますね。 // マップ $map: ( key1: value1, // key1にvalue1を設定 key2: value2, key3: value3, ); // CSSのスタイル selector { pro
Sass 3.3で追加された「&」の新機能と@at-rootまとめ解説
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
Sass3.3のHashのように使えるデータ型: Map(マップ) を見てみた
Sass3.3 changelog #SassScript Maps にあるようにすでに追加されている。 Mapsという新しいデータ型は、Hashや連想配列のようにデータを扱えます。これまではlist形式でなんとか対応することなどもしていたので、便利になりました。 Mapのデータは [ruby] $map: ( key1: value1, key2: value2, key3: value3, child: ( key4: value4, key5: value5 ) ); [/ruby] のように : (コロン) でセパレートしたkey-valueのペアを ( ) で囲む必要がある。 利用したいデータの形式によってはネストさせることもできる。 mapデータを操作する関数には、 map-get($map, $key) map-merge($map1, $map2) map-keys($ma
BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号
BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
Looking Into the Future of Sass
Sass is a CSS preprocessor. This is now common knowledge. First commit in 2007 by Hampton Catlin. Now the most used CSS preprocessor. Sass has come a long way since its beginning. In case you are not very familiar with this stuff, I highly recommend you this article on topic by the David Walsh and this one by the Chris Coyier. In any case, I'll assume you are pretty comfortable with Sass basics. S
Sass(Scss) : メディアクエリ用のミックスイン | Culture27
先日、『Sass入門 〜より効率的なCSSコーディング』（※電子書籍のみです）にSass 3.2の内容を追加したので、記念にメディアクエリ用のミックスインを作りました。 @mediaルールを都度記述するのは面倒ですし、同じ要素やモジュールのスタイルを各@mediaルールに分けて書くことも面倒です。今回作ったミックスインを使えば、これらの問題を解決することができます。 出力したいCSSの例 要素やモジュール単位で書く方法 メディア特性ごとにスタイルを書く方法 2つの方法を一緒に使う 2つの任意のメディア特性に同じスタイルを適用したい場合 メディア特性ごとにCSSファイル自体を分ける場合 ミックスインと設定用の変数 出力したいCSSの例 例えば次のようなCSSを出力したい場合があるとします。 CSS /* 全てに適用 */ h1 { width: 100%; } p { line-height
ネストを覚えた人のためのSassの便利な使い方
11. $baseColor: #AD253A; 変数を代入 body { background-color: $baseColor; 変数を出力 } #globalHeader { #gNav { color: $baseColor; 変数を出力 } } #main #featureList { a { h3 { color: $baseColor; 変数を出力 } } }
Susy: Responsive grids for Compass
Susy was a responsive layout engine for Sass, before flexbox and CSS grid were available. Susy is now deprecated, and will not receive updates. If you need help moving off Susy, or learning the latest in web layout, we offer training and consulting to help bring you up-to-date. Contact us for details » Not everyone can play with the latest specs, and there will always be edge-cases that require ma
【Sass】ターミナルからwatchオプションでディレクトリ監視した際に警告エラーが出来たときの対処法メモ | バシャログ。
今週末は、娘の運動会＆町内会の運動会2Days。町内会の運動会では自ら志願してリレーに参加することにしました ishida です。パパ、頑張って走って一等賞をとるからね！ さてさて、今回は ちょうど Sass の watch オプション で ハマってしまったので対処法のメモです。 面倒くさがりやな僕はこれまで、sass の watch オプション はいろいろと指定が多くて面倒なので compass watch のバッチファイルを作成してディレクトリを監視していました。 最近は特に compass 依存症になりつつあるので、 sass の watch オプションを知っておかないとダメだなぁーと思い、まずは基本から学習ということで以下のコマンドをターミナルから実行。 sass --watch scss:css あれ、コンパイルてるけど警告エラー出とる。 WARNING: Listen has
Compassのスプライト画像生成を速くする - Qiita
皆さん、Sass/Compass使ってますか？ 僕はCSS Spriteが面倒だったので使い始めました。 で、Compassのドキュメントを見てたらこうゆう記述を発見しました。 Compass generates PNG files using a pure-ruby library called chunky_png. This library can be made faster by installing a simple C extension called oily_png. Add it to your Gemfile if you have one in your project: http://compass-style.org/help/tutorials/spriting/ ざっくり言うと、デフォルトでPNGファイル作成するときはRuby製の chunky_png 使う
カッとなってconnect-external-sassというのを書いた - hokaccha memo
気晴らしに書いた。npmには上げてない。 GitHub - hokaccha/node-connect-external-sass: node-connect middleware for sass. using external ruby sass command. sassを動的にコンパイルするconnectのミドルウェア。 node版のsassは微妙なんでこの際思い切ってrubyのsassコマンドでコンパイルしちゃえ的なやつ。ここまでしてsass使わなくてもlessとかStylusとか色々あるわけだけど自分の周りでsassが流行ってるのでプロジェクトで実際に使うなら、（自分の周りの）CSS書く人はノウハウもあるしsassでやりたいはず。たぶん。 キャッシュ有効にしてれば外部コマンド実行するのは最初の一回だけなんで速度的にもそんなに気にするほどではないと思う。キャッシュ無効のときもmt
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SassMeister | The Sass Playground!
https://qiita.com/debiru/items/4771e270902de7c5cc6e
https://qiita.com/debiru/items/fbdfa515aa95ea086f37
GitHub - mastastealth/sass-flex-mixin: Flexbox mixins
1216彩票-官网平台