sassc-railsでsassのコンパイルを高速化 - Qiita
課題：sassのコンパイルが遅い Railsのプロジェクトで、css(scss)を修正するたびにコンパイルが行われて非常に遅くて辛い思いをしていました。基本的にはChromeのデベロッパーツール側で入力して試してから反映しているので、間違うことは基本的にはないのですが、bootstrap-sassを使ったgridの幅の計算や、sassの計算を使うような処理の場合は試行錯誤するので困ります。 今では1回のコンパイルに25秒近くかかるようになっていました。 検討:sassc-railsを使いたい okayama-jsで発表するためにJS周りでのsassを調査しているときに、libsassの存在を知りました。これをrailsでも使えたらいいのではないか？と思い、調査してみたところ、sassc-railsというgemがあることがわかりました。これを使えないか調査してみました。 さらなる課題:com
compass-railsが導入されたRailsにsassc-railsを導入する - Qiita
0. 背景 一緒に開発をしているメンバーから開発時のロードが遅いという意見があり、特にデザイナーがscssを編集するときに時間がかかるという報告がありました。私はエンジニアですので、ほとんどscssを触る機会はないのですが、開発環境が遅いと、ユーザーに素早く価値を提供できないという判断もあり、開発環境の高速化の一環として、sassc-railsの導入を試みました。 sassc-railsは、sassのc++実装のgemであり、コンパイルがsass-railsよりも速いと言われているものです。前職の技術基盤の方に紹介してもらい、その他に有効な手立ても思い浮かばないことから、sassc-railsの導入に踏み切りました。 このRailsアプリケーションのディレクトリ構成としては、app/assets配下にscssやjsが置かれるという、一般的なRailsのディレクトリ構成です。（多分） 1.
Ruby Sass is deprecated and will be unmaintained as of 26 March 2019. - Qiita
Ruby Sass is deprecated and will be unmaintained as of 26 March 2019.RubyRailsSass Ruby Sass is deprecated and will be unmaintained as of 26 March 2019. * If you use Sass as a command-line tool, we recommend using Dart Sass, the new primary implementation: https://sass-lang.com/install * If you use Sass as a plug-in for a Ruby web framework, we recommend using the sassc gem: https://github.com/sas
【Susy】Sass,Compassでグリッドレイアウトしまそ - Milk+ea
何 SusyはCompassのプラグインです。 グリッドなサイトを制作するためのMixinを提供してくれます。 モバイル・ファーストも可能よ。 インストール Susy: Getting Startedを眺めたら多分わかります。 使い方 初期設定 Susyを使うときは次の変数に何かしら値を代入してから使います。 $total-columns : 12; $column-width : 4em; $gutter-width : 1em; $grid-padding : 0.5em; $container-style : 上から順番に 何カラム使うか。上では１２カラム。 １カラムあたりの幅はどれだけか。 カラム間のmargin(幅)はどれだけか。margin-right: 1em みたいに。 グリッド左右のpaddingはどれだけか。TwitterBootstrapだったら.rowの左右にみたい
Susy2 によるレスポンシブレイアウトと Breakpoint | DriftwoodJP
@import "compass"; @import "compass/reset"; @import "susy"; @import "breakpoint"; $susy: ( columns: 12, gutters: 1/4, math: fluid, output: float, gutter-position: inside, container: 80%, ); $contents: 8 at 5; $aside: 4; .container { @include container; @include clearfix; } .contents { @include span($contents); } .aside { @include span($aside); }
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,
関数一覧 | Web制作者のためのSassの教科書 - 公式サポートサイト
■RGB形式の色を操作する関数 ・rgb($red, $green, $blue) 10進数または%指定のRGB値を16進数のRGB値に変換します。 --------------------- ▼Sass .example { color: rgb(100,254,10); color: rgb(10%,5%,72%); } ------ ▼CSS（コンパイル後） .example { color: #64fe0a; color: #190cb7; } --------------------- ・rgba($red, $green, $blue, $alpha) RGBA値を10進数のRGBA値に変換します。CSSだと透明度付きの場合16進数で指定できませんが、16進数のRGB値を指定しても10進数に変換してくれます。また、キーワードも変換してくれます。 ----------------
sass 3.3.0.rc.3 から、インターポレーションなしで、「&」を含んだセレクタが作れる！！！！ - Toro_Unit
sass 3.3.0.rc.3 から、インターポレーションなしで、「&」を含んだセレクタが作れる！！！！ 先日、LessでBEMってみたらかなりさくさくコーディングできた！という話という記事で、Sassを全力でDisったような気がしますが、 いい加減にsass3.3を導入しようとついに一念発起して、sass3.3.0.rc.3を突っ込んでみました。 Compassも1.0.0の開発版にアップデートし、いざ、SassでBEMるぞ！！！と、かの有名なBEM用Mix-in @mixin e($name) { @at-root #{&}__#{$name} { @content; } } @mixin m($name) { @at-root #{&}--#{$name} { @content; } } を突っ込んでみたんですが、このMix-inでコンパイルエラー。これはrc.2にしてみたらうまくい
Sass3.3とComassを使う - ./ringo
BEMという命名規則とSass 3.3の新しい記法 であるように @at-rootという ディレクティブを使いたかったので、 Sassのバージョンを上げてみたけれど バージョン指定で引っかかったのでメモ。 まずはSassのRC版とCompassの最新版を指定した。 GemはBundlerで管理しているのでGemfileに以下を記述。 source "https://rubygems.org" gem 'sass', '3.3.0.rc.1' gem 'compass', '0.12.2' これだとどうもCompassが動かず『Incompatibility with Sass 3.3 Alpha』を参考に Sassのバージョンを変更。 source "https://rubygems.org" gem 'sass', '3.3.0.alpha.149' gem 'compass', '0.
BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号
BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
SMACSSを試す - rono23
Railsで小さなwebアプリを作り始めたけど、その際に、SMACSS（スマックス）を試して見ることに。 SMACSSを選んだのは、単にBEMはちょっと見た感じ好きになれなかったり、メリット・デメリットとか調べるのがめんどくさかったからです。 あと、「この手のやつは、サービスを中長期的に運用してみて、初めてその真価がわかるよー」的なことをお世話になっている方々から伺ったのも1つです。 ぐだぐだ言ってないで、さっさ動くもの作って、公開しろ、ハゲチャビン！ 公開しねぇ奴に発言権ねぇから！おめーの席ねぇから！お゛め゛ぇ゛の゛席゛ね゛ぇ゛がら゛あ゛！ SMACSSは、CSSの書き方を5つにカテゴライズしたスタイルガイドみたいなもんです。 SMACSSの5つのカテゴリー base : body, h1, aとか layout : .l-grid、. l-constrainedとかレイアウト関連。クラ
Compassのsprite-mapでハマった - Qiita
Compassでsprite-mapを使った時、 記述順を間違えると動いてくれないことがあるので、メモ。 これだとダメ。 $sprite-map: sprite-map("sprite/*.png"); %sprite-base{ $sprite-path: sprite-path($sprite-map); $sprite-width: image-width("sprite/"#{$sprite-path}) / 2; $sprite-height: image-height("sprite/"#{$sprite-path}) / 2; background-image: sprite-url($sprite-map); background-size: $sprite-width $sprite-height; background-repeat: no-repeat; }
sassの抑えておきたいfunctionの使い方 « NAVER Engineers' Blog
こんにちは。 年末の予定はぶっ通しでスカイリムにつぎ込むことが決定したUIT富田です。 今回は、Less & Sass Advent calendar 2011の6日目として、 sassのfunctionについて解説します。 すっぽりハマった四則演算の落とし穴 sassは値の四則演算をサポートしており、10進数だけでなく、16進数の値であってもよしなに計算してくれます。 color: #a3a4a5 + #111111; ↓ color: #b4b5b6; 16進数と10進数でもエラーにならず計算してくれます。（普通あまりやらないとは思いますが） color1: #000000 + 1; color2: #000000 + 15; ↓ color1: #010101; color2: #0f0f0f; この16進数の計算は、結果が#fffffを上回った場合、上回った分は切り捨てて、す
Sass+compassの更新 | code up
久々にSass+compassを触る機会が出来たので、環境を更新。 Sass+compassをEclipse環境にインストールした記事はこちら。 Sassとcompassをアップデート コマンドは次のように実行。 >gem update --system (略) >gem update --system Latest version currently installed. Aborting. >gem -v 1.8.15 >gem update sass (略) >gem update compass (略) >sass -v Sass 3.1.12 (Brainy Betty) >compass -v Compass 0.11.7 (Antares) (略) 新規sassプロジェクトの開始 前回はコマンドラインから実行したが、今後のためにantのターゲットを作成。 <target na
TEST CORDING » Sassの@functionの使い方まとめ – プログラマブルな処理は@function
This domain may be for sale!
初めてSassとCompassを使った際に参考にした記事まとめ
しばらく前から気になっていたCSSを書く時に便利だという「Sass」と「Compass」を自分のサイトを作る時に使ってみました。 順番に導入の手順を追ってもいいのですが、検索すると多くのサイトが紹介していますので、私が見て参考にしたページをまとめておきたいと思います。 Sassとは まずSassとは何かと言うと、CSSを生成するためのメタ言語で、これを利用することでCSSを早く書けたり、記述が楽になったりします。 Sassの公式サイトは以下から。 Sass – Syntactically Awesome Stylesheets Compassとは Sassを拡張して、便利な機能を追加してくれるものです。ベンダープレフィックスを自動でつけてくれたり、リセットCSSを呼び出してくれたり、CSSスプライトを使えたりします。 Compassのドキュメントは以下から確認できます。 Compass H
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
A Complete Tutorial to Susy 2 (Part 2) | Zell Liew
A Complete Tutorial to Susy 2 | Zell Liew
Susy2 でプロジェクトを作成する | DriftwoodJP
WordPress に SASS を導入 | ITプロデュース熊本