C/C++のSass Compilierのlibsassを試してみた
フロントエンド周りを触ることがあり、Sassのコンパイル速度改善をするために、 libsassについて軽く調べてみた。 libsassとはC/C++で書かれたSass Compiler。これ自体は単なるライブラリで、実際にこれを走らせるには SassCやruby-libsassなどを使う。 コンパイラにGCC4.6+またはClang/LLVMが必要だとか。 libsass のインストールlibsassとSassCは共にbrewインストール可能だが、 マニュアルに沿ってインストールする場合は、 libsassとRuby Sassとの互換性現状ではRuby Sassとの違いもあり、完全に互換性があるわけではない。 実際、Ruby Sassよりも実装が遅れているため、Ruby Sass3.4の機能は多くが利用できない状況らしい。 SassSpec/libsass-todo-issuesを みると
知らないと損するSassの組み込み関数徹底解剖 | Yuhiisk
Sassを使うにあたって、覚えておくと必ず幸せになれる組み込み関数というものがある。 自分で定義できる @function とは違い、Sassに最初から備わっているものだ。 Sass自体の機能だから、もちろんCompassなどのフレームワークを使用する際も使うことができる。 普段Sassを使っているひとでも、Sassの組み込み関数については詳しく知らない人も多いのではないだろうか。 これを自由に使いこなすことが出来ればコーディングが楽になることは間違いない。 改めてドキュメントを見直すと自分の知らないものもあったため、今回全てをまとめてみた。 すぐに試してみたい人はこちらのデモを試してみるといい。
CSS Nite LP32フォローアップ（2）柴田 大樹さん（unCopi）｜CSS Nite公式サイト
2014年2月15日、ベルサール九段 イベントホールで開催したCSS Nite LP, Disk 32: Sassのフォローアップとして、柴田 大樹さん（unCopi）の『CSSがもっとラクに書ける！ これから始めるSassの書き方』セッションのスライドなどをシェアします。 スライド（PDF、248ページ、20.9MB）音声 メッセージ、補足（イベント終了直後にいただいたものを再掲） 先日は悪天候の中、足をお運びいただき、本当にありがとうございした。 Sassの全てをいきなり使い倒そうとすると、どうしてもつまづきやすくなってしまいます。まずはセッションの冒頭で紹介した、ネストや変数から試して、実際にSassって簡単だなと思えていただければ幸いです。 体験談ですが、一通りの書き方に慣れてきたら、これまで自分で書いてきたCSSのバックアップをとりながら、Sass化してみるとより早く慣れました。
CSS Nite LP32「Sass」のフォローアップを公開します｜CSS Nite公式サイト
2014年2月15日、ベルサール九段 イベントホールで開催したCSS Nite LP, Disk 32: Sassのフォローアップを公開します。 （1）谷 拓樹さん（サイバーエージェント ） （2）柴田 大樹さん（unCopi） （3）黒野 明子さん（crema design） （4）森田 壮さん（Sou-Lab） （5）坂巻 翔大郎さん（ピクセルグリッド）、山田 敬美さん（ピクセルグリッド） （6）木村 哲朗さん（まぼろし）、西畑 一馬さん（まぼろし） （7）富田 梓さん（LINE） （8）高津戸 壮さん（ピクセルグリッド ） 出演者のひとり、森田 壮さんの執筆された『Web制作者のためのSassの教科書』もオススメします。 Web制作者のためのSassの教科書 - 公式サポートサイト 追記： 各セッションの音声を追加しました。 ベストセッション20192019年、CSS Niteでは4
Sassの教科書で一番読んで欲しいところ。
いよいよ明日発売の「Web制作者のためのSassの教科書」ですが、今回は、8章有る中でも特に読んでもらいたい章に関して、書きたいなーと思います。 今回の執筆はわりと気合い入ってるので、宣伝エントリーが多くてすみません＞＜ ちなみに、今日いくつかの書店をまわったら、既に置いてあったので仕事帰りなどに書店に寄ってもらえれば既に購入できると思います。 さて、本題に。 一番読んで欲しいのは5章なんです Sassは、インストールが面倒そうとかって部分やイマイチSassを使うメリットが見えてこないって人も多く、他のツールとかに比べると導入のハードルが高いと思うので、1章と2章ではその辺りをしっかりフォローした内容になっています。 1章に関しては、サポートサイトでお試し用のPDFが読めます。 本書の試し読み | Web制作者のためのSassの教科書 - 公式サポートサイト 次に、3～4章はSassの機能
This page is moved
This page has moved to http://stylus-lang.com/
ズルいデザイン（2）：SassやCompassを使って、ズルいデザインテクニック (1/2) - ＠IT
SassやCompassを使って、ズルいデザインテクニック：ズルいデザイン（2）（1/2 ページ） SassやCompassを使って、少ない手間でちょっといい感じに見せる小ズルいTipsを紹介。グラデーション、角丸のお手軽かつ効果的な使い方とは？ シリーズ第2回、前回に続き、今回もSassやCompassを使って、少ない手間でちょっといい感じに見せる小ズルいTipsを紹介します。 今回は、グラデーション、角丸のお手軽かつ効果的な使い方について解説します。 （注）このページでは、個々のデザイン要素を分かりやすく説明するために、実寸サイズより画像を拡大して使用しています。 1: ズルいグラデーション CSS3ではグラデーションを扱えるようになったことから、画像を使わずに自在にグラデーションを描画して、CSSだけでよりリッチなビジュアル表現が可能になりましたが、一口にグラデーションといっても、う
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
ネストを覚えた人のためのSassの便利な使い方
11. $baseColor: #AD253A; 変数を代入 body { background-color: $baseColor; 変数を出力 } #globalHeader { #gNav { color: $baseColor; 変数を出力 } } #main #featureList { a { h3 { color: $baseColor; 変数を出力 } } }
Sass のカスタム関数の書き方
Sass は ネイティブ関数 のほかに、@function ディレクティブ を使ってカスタム関数を自由に定義することができます。僕もより共有や再利用のしやすいものを作るべく試行錯誤していますが、ここではそのうち最近試しているいくつかのパターンについて書いてみました。ご意見求む。 接頭辞 attr() や calc() など CSS のネイティブ関数や percentage() や type-of() といった Sass のネイティブ関数と名前が衝突するのを防ぐため、カスタム関数の関数名に接頭辞をつけることを検討しています。現行の CSS/Sass だけではなく将来追加される新しいネイティブ関数も考慮するとやはり何らかの対策をしておきたいところで、接頭辞は現実的な解であるように思います。Sass リファレンスの 関数ディレクティブの項 でも以下のように接頭辞の採用を勧めています: It is
Sass入門 ～より効率的なCSSコーディング | Gihyo Digital Publishing … 技術評論社の電子書籍
Sass入門 ～より効率的なCSSコーディング 著者 上村光星，富田梓，對馬慶子，山田敬美 著 発売日 2012年5月22日 更新日 2012年10月19日
BootswatchのテーマをRailsで使ってみる - === SANDmark 19106 === beginning stress test
なんだか最近流行りのBootstrap。 僕はもっぱらデザインが苦手で（かといってコーディングも得意ではないんだけど） そんな人にとっては大変ありがたい存在です。 しかし、「今風」の雰囲気になってSUGEEEEEEと興奮するのも最初だけ。 僕にはカスタマイズなんてとてもできない。 独自性をアピールするためには、Twitter Bootstrapはあまりにも有名すぎ、僕にはデザイン能力が無いんです。 そこで、Twitter Bootstrapのいろいろな "テーマ" を集めた Bootswatch: Free themes for Bootstrapに助けを乞うことにしました。 パッと見、いろんな意味で隙が無さそうですが、 Ruby1.9.3 + Rails3.2でハマったのでメモ。（バージョンはあんまり関係ないと思うけど一応） まずは、当然ですがRails先生にTwitterBootstr
Sassオレオレリファレンス
このリファレンスについて 元は社内提出用に書いたレポートです。 レポートは１ページに全内容が入っていてだいぶ見辛いので、リファレンスらしい感じに作りなおしました。 （ついでにかなり加筆修正しています） 内容はSass公式サイトのリファレンスを忠実に翻訳したものではなく、構成などを再編集したオレオレ仕様になっております。 もし内容に間違いなどありましたらご一報お願い致します。 おことわり 筆者が重度のChromerなので古いブラウザには全く媚びない悪びれない仕様です。新しいブラウザで御覧ください。
Railsプログラマはこれを入れればすぐにズルいデザインをはじめられます！ | mah365
先日のプログラマ向けデザイン勉強会で発表された「少ない手間と知識で”それなり”に見せる、ズルいデザインテクニック」（by 赤塚さん）の中に書かれていたSassのMixinをRailsで使えるGemにしてみました。 zurui-sass-rails: https://github.com/mahm/zurui-sass-rails sample: http://zurui-sample.herokuapp.com/ うおおずるい！ｗ RT @mah_lab: .@ken_c_lo さんのズルいデザインをGemにしてみました。 github.com/mahm/zurui-sas… サンプルはこちら zurui-sample.herokuapp.com (based on github.com/machida/Custom…) — TAEさん (@ken_c_lo) 11月 7, 2012 @m
RailsエンジニアのためのTwitter Bootstrapカスタマイズ例
Sassを使ったり、人からパクったりして、極力失敗しない方法
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.e-riverstyle.com/2012/12/sassextendcss-preprocessor-adv.html
GitHub - davidrapson/scss-toolkit: Unmaintained
csscomb.com
kuroigamen.com
kuroigamen.com