「compass」をやめて、爆速「Libsass」に変えたら作業が超捗った件。
「今は昔」 この業界は本当にサイクルが早い。 あんなに、「おお。なんだこれ、超便利ではないですか？」と言っていたものもすぐに「古く」なってしまう。 「compass」もその一つではないでしょうか。 いや、全然便利で使いたいのですが、何しろ 「コンパイルがクソ遅い。」 compassはご存知の通り、「Ruby」で作られています。 が故に、ちょっとSCSSの編集したいだけなのに、コンパイルにとても時間がかかってしまいます。orz と、言う訳で「compass」はもう卒業しました。 卒業するのはいいのですが、代替えは何を利用するかと言いますと、「Libsass」ですね。 「Libsass」とはなんぞや。て方に。 C/C++で書かれたSass Compilerとなります。 当たり前で恐縮なのですが、C/C++で書かれているのでコンパイルの速度は、ビックリするぐらい「爆速」です！ Github ht
The Command Line for Web Design: Powering Up Front End Code | Envato Tuts+
As a web designer there are three languages you’re pretty much guaranteed to work with one way or another: CSS, HTML and JavaScript. In this tutorial you’re going to leverage the command line to make your development with these three languages more powerful and more efficient. You’ll learn how to use command line to: Compile preprocessor (Stylus, Sass and LESS) code for CSS Autoprefix CSS Compress
知って得するSass/Compassのインストールと使い方
Appearance - Specify the CSS3 appearance property. Background Clip - Specify the background clip for all browsers. Background Origin - Specify the background origin for all browsers. Background Size - Specify the background size for all browsers. Border Radius - Specify the border radius for all browsers. Box - This module provides mixins that pertain to the CSS3 Flexible Box. Box Shadow - Specify
【Compass】Sassでレスポンシブ対応！簡単で便利な記述法！ | ウェブ戦略・コンサルティング UNIONNET Inc.
2014.04.08 こんにちわ！ 山尾です！ 今日は前回に引き続きSassのご紹介をしたいと思います！ 前回は環境構築とざくっとした概要を説明させていただいたので今回はSassで出来る便利な記述法を紹介します！ 目次 Compass メディアクエリ ファイルの統合 Compassを使う Compassを使う一番の利点としてはベンダープレフィックスを簡単に書ける事ですね。 他にもCSSスプライトを自動で生成してくれるみたいです。 Compassインストールしインポートさせれば .test{ @include box-shadow( 0 0 10px #ccc); @include border-radius(4px, 4px); @include inline-block; } コンパイル後↓ .test { -webkit-box-shadow: 0 0 10px #cccccc; -m
CSSコーディングでいますぐ使えるSass／Compass実践テク10連発！
本連載「爆捗！ WordPressテーマ作成ショートカット」では、初回の「Dreamweaverで始めるWordPressサイト構築の基礎知識」で、「Adobe Dreamweaver CC」（以下、Dreamweaver）でWordPressのテーマをカスタマイズできるようにする設定の方法を紹介。第2回の「WordPress初心者でも爆捗！ テンプレートカスタマイズ＆ショートコード作成超入門」でWordPressの内部構造、Dreamweaverを使ったテンプレートのカスタマイズ方法、ショートコードの作り方について解説した。 第3回の「CSSコーディングで泣かないためのSassの基礎知識と10の利点」では、さらなる爆捗のために、「Sass」についての概略を解説した。第4回の「いまさら聞けないSassの使い方入門―― インストールとコマンド、Dreamweaver連携」では、Sassの実践
Compass CSSスプライト+Retina対応+データURIスキームのMixin | hijiriworld Web
Posted on: 2013/06/21 Compass CSSスプライト+Retina対応+データURIスキームのMixin [2014/06/27 更新] ※ SassとCompassが使えることが前提 CompassでCSSスプライトしてRetina対応してデータURLスキームも行うミックスインを作ったので、そのメモ。 準備 ディレクトリ構成は以下の通り（Compass標準） images/spritesディレクトリに必要な画像を格納しておく。 コンフィグファイルの編集 relative_assetsは、ヘルパー関数で生成するURLを相対パスか、それとも絶対パスで表現するかの設定。 これをtrueにすることで、スプライトを生成した時に相対パスになるので設定しておくこと。 > config.rb css_dir = "css" sass_dir = "sass" images_dir
How to set up Gulp for Compass compilation and minification, JavaScript minification, livereloading, and use with ExpressionEngine.
1) readme.md How to set up Gulp with an ExpressionEngine project I freaking love working with technologies like Grunt and Gulp, and wanted to share how to get my current EE front-end workflow set up. With a few tweaks, this can also be used with virtually any other sites (I've used it with Laravel, static sites, Craft, etc). Install Node.js If Node is not yet installed on the machine, it will need
Compass 1.0リリースノート 和訳 - Qiita
※こちらの記事は、Compass 1.0リリースノートの意訳です。詳しくは原文を参照してください。 ※また、「日本語おかしいよ」「訳へんじゃない？」の場合、ヘコまない程度にやさしくコメントいただけるととても嬉しいです。 Compass 1.0 is now available! まずは前置きから：このリリースはとても長い道のりだった。その理由と言い訳をリストにしてみんなに渡すこともできるのだが、それっていうのは本当の問題じゃない。もしあなたがcompassのように１年以上メンテナンスされていないオープンソースに再度関わることになるオーナーだったとしたら、最も慎重な判断をする場合、その結果としての行動はそれを打ち切ることだったと思う。だが、私はそれを打ち切ることができないほどには頑固だったのだ。 今後の課題・・・どうやって発展させていくかということ。 定期的なのバグフィックスのリリース。Co
Retina対応のスプライトを作成するときに便利なCompass用のmixinを作ってみた | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
先日、超〜久しぶりにコーディングをしました。 Retina対応の案件ということで、よさげなmixinを物色したところ、なかなかなかったので、作ってみました。 これからRetinaで苦労するであろう誰かの助けになれば嬉しいです。 今回作ってみたmixinはGitHubからダウロードできます。 https://github.com/xipx/Better-Sprites-for-Compass 使い方 1. スプライトファイルの末尾のランダムの文字列を削除する 末尾のランダムの文字列を削除しないとmixinがぐっと長くなっちゃうので、まずは以下のコードをconfig.rbにコピペしておきましょう。ファイル名も綺麗になるし、一石二鳥です。 on_sprite_saved do |filename| if File.exists?(filename) FileUtils.cp filename,
PhpStormだけでファイル監視してSASS/SCSSをコンパイルする
準備 PHPStormでファイルの監視はしてくれますが、コンパイル自体は別途環境が必要になりますので、SASSならRuby＆Gemを予めインストールしておきます。 下記記事を参考にしてください。 WindowsにCompassをインストールしてSASS/SCSS環境を構築する File Watchersの追加 メニューの「File」→「Settings..」でSettingsウインドウを開き、左のメニューから「File Watchers」を選択します。 最初は何も項目がないと思いますので、右側の「+」ボタンをクリックします。 SCSSの他にも色々項目が表示されますが、今回はSCSSを選択します。 「Edit Watcher」画面が表示されます。 ここでコンパイラやCSSの書き出し場所の設定などを行います。基本そのままでいいのですが、標準ではSCSSと同階層に書きだされたCSSが出力されてし
Sache: Find Sass and Compass Extensions for your next project
Discover Sass & Compass Extensions Find the perfect tool for your next Sass or Compass project. Add Your Own
Autoprefixerによる、CSS3の管理 - kojika17
CSS3を使用する時に、ベンダープレフィックスを付けていますか？ 自分でプレフィックスをつけたり、SassなどのCSSメタ言語やツールを利用するなど、さまざまな方法がありますが、せっかく付けたベンダープレフィックスも適切でない場合もあります。適切にベンダープレフィックスを付与するツールに、CSS Postprocessorの「Autoprefixer」というものがあるので紹介します。 ベンダープレフィックスをいつまで付け続けるのか ベンダープレフィックスはブラウザの試験的、または独自拡張で実装されているものであり、W3Cの仕様がある程度固まると、ブラウザはベンダープレフィックスが外すことが推奨されています。 現在、CSS3の一部の仕様は、すでに勧告や勧告候補まで上がっているものがあり、最新のブラウザではベンダープレフィックスなしで作動するCSSも増えてきています。またグラデーションやFle
Web制作者はブックマーク必須！LIGブログ記事を知りたい分野別にまとめてみました。
日本のみなさん、こんにちはぁ！LIGサイトを教科書代わりに使っています、ライターの、のび太です。 今回は、これまでLIGで公開された記事をWeb制作者が見たいもの、学びたい分野別にまとめてみました。ぜひブックマークしておいて、時間があるときに見ておいてくださいね。特にWeb制作者の方は必見だと思います。めっちゃ勉強になること間違いなしっす！ LIGブログ 知りたい分野別リンク集 Sass、Compassを学びたい人 CSSの常識が変わる！「Compass」、基礎から応用まで！ これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応) 目指せSassマスター！デザイナーがすぐ実践出来る基本テクニック12連発 Compassの設定ファイル「config.rb」の編集方法 Sassを使ったコーディングの強い味方に！便利なextend＆mixin集を作ってみた Sass
君は知っているか、あのCompassのstatsコマンドを！ - Qiita
CSSをリファクタリングしようと思うと、どっから手をつけたら良いかわからなくないですかね？僕はわかりません。 特にSassのような@importでいろいろファイル分割していると、あれこれなんのファイルだったお（＾ω＾;）ってことがよくありませんかね？僕はないです！ ということで、あなたがCompassプロジェクトを使用しているのならば、config.rbのある場所で下記のコマンドを打ってみましょう。 そうすると下記のようなCSSに関する情報が表示されます。 どこで何回ミックスインが定義されて使用されているか、ファイルサイズがどれくらいかプロパティがどれだけ宣言されているかなど、一目瞭然ですね。これで、どこからリファクタリング・手をつけていったらいいのかなど参考にできるかと思います。 ちなみに、statsコマンドのヘルプは下記 $ compass stats --help Usage: co
SassとGruntとStyleGuideと
この記事は Frontrend Advent Calendar 2013 16日目のエントリです。 今年は色々なツールをワークフローに導入したり使用したりしました。中でもSassとGruntとStyleGuideツールの導入が印象深いので簡単におさらい的に紹介します。 Sass & Compass 「CSSでも十分書けるし」と思って導入を渋ってたSass。OOCSSとかに関するスライドなどから影響を受けてたこともあって、実務で書いてたCSSをSCSSで全部書きなおすというところから始めました。 モバイル時代におけるCSSの設計と実装 CSSプリプロセッサの取扱説明書 ちゃんとCSSを書くために - CSS/Sass設計の話 WebデザイナーのためのSass/Compass入門 SMACSS SassとCSS設計 CompassはMixin便利だなーと思って使いまくってたんですが、このエント
Compassのキャッシュ「.sass-cache」の書き出しをコントロールする方法 | Webデザインのタネ
Compassを使っていると、必ずできてしまう.sass-cacheフォルダ。中身を確認すると、なんだか訳の分からない文字列で埋め尽くされていますね。サイトのHTMLごとまるっとファイル転送をすると、このフォルダだけ異様に時間がかかったりしてなんとかしたくなってきます。 今日はこのCompassのキャッシュの扱い方を紹介します。 キャッシュって何だ？ Sassのキャッシュとは、コンパイルの時間を短くするために作られるファイルです。compass createコマンドで作られるconfig.rbでコンパイルをすると、config.rbのファイルと同じ階層に.sass-cacheという隠しフォルダを作り、その中にキャッシュを格納しています。 普段コンパイルの時間が短いから不要じゃと思いがちですが、コードの量が多くなると体感としてコンパイル時間が遅くなってしまいます。 対策その1：キャッシュファ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Compassのsourcemap出力 - Qiita
Blessc with Compass
GitHub - jhardy/compass-ceaser-easing: Penner equations for css3 transitions
http://blog.monoweb.info/blog/2012/01/03/