CSS Sprite を自動生成する - Gulp で作る Web フロントエンド開発環境 #8 | PSYENCE:MEDIA
CSS Sprite を自動生成する - Gulp で作る Web フロントエンド開発環境 #8 wakamsha 2015.11.16 126 8195445 Sass ( SCSS ) や Stylus といった CSS プリプロセッサを使う上で更に効率を高めるために Compass や Bourbon といった Sass ( SCSS ) のフレームワークを導入している方もたくさんいるかと思います。僕自身も SCSS を習得するとほぼ同時に Compass を愛用するようになりました。CSS のミニファイ化やベンダープレフィックス対応してくれる Mixin などとても多機能なのが魅力ですが、一方で動作が重くコンパイルに結構な時間が掛かる、Web ブラウザの CSS サポートが進むにつれて生成される CSS が冗長なものになりつつあるというのが気になるようになってきました。公式ブログを
รูเล็ต ทดลองเล่นรูเล็ต เว็บพนันออนไลน์ อันดับ 1 เครดิตฟรีกดรับเอง
7 คาสิโนออนไลน์ ชั้นนำที่ดีเยี่ยมที่สุด Ichimaruni-design คาสิโนออนไลน์ ขอชี้แนะ 6 เว็บเดิมพันออนไลน์ชั้นหนึ่ง ที่มีครบทุกสิ่งที่มีความต้องการ ไม่ว่าจะเป็น คาสิโนออนไลน์ บาคาร่าออนไลน์ ไพ่โป๊กเกอร์ออนไลน์ พร้อมรับโปรโปรชันเครดิตฟรีที่แจกให้แบบจุใจ เว็บไซต์ตรงไม่ผ่าเอเย่นต์ เล่นง่าย ได้เครดิตฟรี ๆ ไปเลย UFABET เครดิตฟรี ไม่รับไม่ได้แล้ว กับโปรเด็ด โบนัสปัง UFABET เครดิตฟรี สิ่งดีๆที่เรามีให้เฉพาะสม
[Sass+Compass] config.rbを、制作環境でないところに置く | SONICMOOV LAB
SONICMOOV LABブログ2回目の登場。じゃじゃーん。 相変わらずソーシャルアプリのコーディングしてますココエです。 最近は、CSSメタ言語が流行っていますが、流行りに乗るか！？そうでないかはおいといて、私も一部の案件でSass(Scss)＋Compassを導入してみましたー。便利ーひゅーひゅー！ その時、Compassのプロジェクトファイル(config.rb)を、制作環境と別の場所において作業をしたくて、色々調べながら導入したわけですが、その「config.rbを、制作環境でないところに置く」時のポイントを書きたいと思います。 そもそも、なんで制作環境にプロジェクトファイル置いちゃだめなのよ？って話をすると、弊社のソーシャルゲームの制作環境においては、PHPのフレームワークを使っていたり、開発サーバーを直接さわっているので、上記のような設定ファイルがぽろっと出来ていると、 「これ
![[Sass+Compass] config.rbを、制作環境でないところに置く | SONICMOOV LAB](https://cdn-ak-scissors.b.st-hatena.com/image/square/8e3120ece54c12034fb0b9b7c786b1dedf05b528/height=288;version=1;width=512/https%3A%2F%2Flab.sonicmoov.com%2Ffiles%2F2013%2F05%2Fcompass-config-rb.png)
CompassのCSS3モジュールを使う | Web制作者のためのSassの教科書 - 公式サポートサイト
.boxA { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; }
Compass のミックスイン | Web Design Leaves
CSS3 モジュール CSS3 モジュールは、ベンダープレフィックスや、ブラウザの下位バージョンに対応するプロパティを書き出してくれる。 関連項目 ベンダープレフィックスのオン・オフ レガシーブラウザの対応のオン・オフ border-radius() 角丸 Compass/border-radius 書式： border-radius($radius) $radius（角丸の半径）：値を指定しない場合は、デフォルトの 5px になる（ $default-border-radius: 5px ） 値が１つ：一括指定 値が２つ： 左上と右下 右上と左下 値が３つ： 左上 右上と左下 右下 値が４つ： 左上 右上 右下 左下 //一括指定 .simple { @include border-radius(10px); } // 左上と右下 右上と左下 .compound { @include b
Compass: config.rb を詳しくみる | DriftwoodJP
設定ファイルとオプション。 コンパイル時に実行するタスクを設定する。 Configuration Reference | Compass DocumentationWebTecNote – [Compass] 超訳 Configuration Reference【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜設定ファイルを知っておこう – 番外編 ｜ Developers.IO例えば、下記のように /theme ディレクトリ内で開発したい。 . ├── .sass-cache ├── config.rb ├── sass │ ├── ie.scss │ ├── print.scss │ ├── screen.scss │ └── style.scss └── theme ├── images ├── index.html └── stylesheets ├──
Sass/Compass のインストールと基本的な環境設定 | Web Design Leaves
上記コマンドで Ruby のバージョンが表示されれば、Ruby はインストール済み。 インストールされていない場合は、Ruby の公式サイトのダウンロードページ（https://www.ruby-lang.org/ja/downloads/）の下のほうにある「Windows版Rubyバイナリ」からリンクを選択してそのページへ。 例：RubyInstaller (英語) 安定版に多数の便利なライブラリを加えたもの。 RubyInstaller のページに行くと「Download」ボタンがあるのでクリック 「Downloads」ページでダウンロードするバージョンを選択（64bit の場合は x64 と書かれているものを選択）してダウンロード ダウンロードしたら、実行ファイル（.exe）をダブルクリックしてインストール 「インストール先とオプションの指定」の画面では「Ruby の実行ファイルへの
イージング関数チートシート
イージング関数は、時間の経過に伴うパラメーターの変化率を指定します。 現実の物体は、即座に動いたり停止したりすることはなく、一定の速度で動くこともほとんどありません。引き出しを開けるとき、私たちは最初に引き出しをすばやく引き出し、それが外に出てくるにつれてゆっくりと動かします。床に向けてなにかを（例えばペンのような）放すと、最初に重力によって下に向かって加速し、床に当たった後上に跳ね返ります。 あなたの必要なイージングを選択して、あなたのプロジェクトの中で使用してみてください。
Compass 1.0リリースノート 和訳 - Qiita
※こちらの記事は、Compass 1.0リリースノートの意訳です。詳しくは原文を参照してください。 ※また、「日本語おかしいよ」「訳へんじゃない？」の場合、ヘコまない程度にやさしくコメントいただけるととても嬉しいです。 Compass 1.0 is now available! まずは前置きから：このリリースはとても長い道のりだった。その理由と言い訳をリストにしてみんなに渡すこともできるのだが、それっていうのは本当の問題じゃない。もしあなたがcompassのように１年以上メンテナンスされていないオープンソースに再度関わることになるオーナーだったとしたら、最も慎重な判断をする場合、その結果としての行動はそれを打ち切ることだったと思う。だが、私はそれを打ち切ることができないほどには頑固だったのだ。 今後の課題・・・どうやって発展させていくかということ。 定期的なのバグフィックスのリリース。Co
Compassの設定ファイル「config.rb」の編集方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーのサリーです。 最近買った漫画は「ウメハラ – To live is to game -」です。 さて、王くんのおかげで Sass + Compass を使えるようになりました。わーい！ 王くんのブラボーな記事はこちら↓ CSSの常識が変わる！「Compass」、基礎から応用まで！ Sassファイルの吐き出したCSSファイルの出力スタイルの設定は「config.rb」を書き換えることで簡単に変更出来ました。 今回はconfig.rbの基本的な編集方法についてまとめてみました。 config.rb のデフォルトの記述 config.rbの中身は何もいじらないとこんな感じになっていると思います。 （Codekitなどで吐き出すとCodekitのデフォルトの設定が入るので、またちょっと違います） # Require any additional compass plugin
[JS] Compass(Scss)のビルドが遅いので、マルチスレッドで高速でCompassビルドするgruntタスクを作ってみました - YoheiM .NET
[JS] Compass(Scss)のビルドが遅いので、マルチスレッドで高速でCompassビルドするgruntタスクを作ってみました こんにちは、@yoheiMuneです。 Compass(Sass)を仕事で使うのですが、@extendとかがいっぱいあるとビルドに時間がかかるようになってきました。 今回は、その対策としてgruntのタスクとして、compassビルドをマルチスレッドで高速化するタスクを作ったので、紹介させて頂きたいと思います。 Compassのビルドは時間がかかる？ Compassってすごく便利なツールで、CSSをモジュールか出来たり案件ごとに使い回したりして、CSSのコーディングの効率化が出来ます。 でも、画像のBase64化やSprite化、@extendで共通Compassモジュールを使うコードなどが増えると、コンパイルに時間がかかってきます。 自身が関わっている案
![[JS] Compass(Scss)のビルドが遅いので、マルチスレッドで高速でCompassビルドするgruntタスクを作ってみました - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/be8a85a78049a62f12c7fca35a7418bb8dcd8564/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F217.jpg)
Sass + Compass の基本導入と設定ファイル config.rb について
明けましておめでとうございます！今年もどうぞよろしくお願いいたします。 2013 年は、26 年ぶりに 4 つ全ての数字が異なっているみたいですね。みなさんどのようなお正月をお過ごしでしょうか。私は寝正月を大満喫しました。 さて、Windows でも Mac でも Sass + Compass 環境ならば config.rb で設定が書けるので、今日はそれについて。「Sass とは何か？」「Compass とは何か？」は省きます。インストールから設定、楽して監視開始、あたりを。 Sass + Compass を使うには？ まず基本のとこから一応さらっと！ 最近は簡単な方法もたくさん出ていますが、地道にやるならば Ruby（と RubyGems）を入れて、Sass と Compass を入れて、となります。 Ruby + RubyGem インストール Windows だったら RubyFor
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
Gruntを使ってSass(SCSS) / Compassをコンパイルしてみる | MONSTER DIVE
今回は、Gruntを使ってSassをコンパイルしてみます。Gruntのインストールについては、こちらの記事で紹介してくれてるのこちらをご覧ください。Sassの記法には、SCSS記法とSASS記法の2種類がありますが、今回はSCSS記法のみ対応になります。 ※Sass・Compassはインストールされているものとします。 Gruntで処理したいこと Gruntには、SassとCompassをコンパイルする以外にも様々な便利機能があります。 今回、下記の機能も使ってみたいと思います。 Sassファイルをコンパイルする livereloadでSassファイルが更新されたらブラウザをリロードさせる バラバラに記述されたメディアクエリをまとめる CSSのプロパティの順番を揃える フォルダ構成 フォルダ構成については下記の通りです。 project ├css (CSSの出力先) ├sass │└sty
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Sass を今すぐ実務で使おうよ！ « LINE Engineers' Blog
Compassのsourcemap出力 - Qiita
Sass/Compass よくあるトラブルと 解決方法・回避方法
Web制作者のためのSassの教科書 - 公式サポートサイト
GitHub - ksmandersen/compass-normalize: A compass plugin for using normalize.css
compass-style.org is almost here!