Webアプリのモックアップ作業土台を作る その3 Sass Source Map - cu39's diary
その1 と その2 Sprockets の続きです。が、今回の作業は その1 の途中からブランチしてます。 Google Chrome の Dev Tools は Sass/SCSS の Source Map に対応しているので利用できるようにしてみます。が、Source Map は仕様も実装も流動的な状態で、環境によって動作しない可能性も大ありなので、あくまで参考まで。 リポジトリ上では Sprockets も Bootstrap も Compass も導入する前の段階からブランチを生やしました。 https://github.com/cu39/workbench/tree/sass-sourcemap-on-plain 新仕様と旧仕様 CSS リクエストへのレスポンスでブラウザに Source Map の位置（パス）を知らせる必要があり、その方法は2種類あります。 レスポンスの HTT
Webアプリのモックアップ作業土台を作る その2 Sprockets - cu39's diary
前回のつづき。 前回作った作業台に Sprockets を導入して assets 提供を分離します。といっても Sprockets 使っていくかどうか自分でも確信持ててないのでリポジトリではブランチにしておきました。 https://github.com/cu39/workbench/tree/sprockets Sprockets を導入するメリットとしては、このままデプロイするケースを視野に入れたときに圧縮機能を追加しやすかったりプリコンパイルできたりするところでしょうか（どちらも今回はやってません）。 というわけで、まずは Gemfile に sprockets 関連の gem を追加して bundle。 gem 'sprockets' gem 'sprockets-helpers' gem 'sprockets-sass' ディレクトリ構成を変更 前回の最後では以下のようなディレク
Webアプリのモックアップ作業土台を作る その1 - cu39's diary
Slim, Sass/SCSS, CoffeeScript が使えて Livereload してくれるフロント周辺の作業環境がほしいと思いながらも自分にしっくりくる構成ができなかったんですが、最近 rack-livereload を見つけてピースが埋まった感じがしたのでまとめます。 https://github.com/cu39/workbench 記事を書くにあたり naoya さんのひな型に大いに影響されてますが、ここでは npm でインストールするのは bower だけにして基本的には Sinatra と Guard に任せています。 Sinatra, Slim, Sass, CoffeeScript 土台の土台としてシンプルな Sinatra アプリから。Gemfile を書いて bundle。 Gemfile source 'https://rubygems.org' gem '
Grails 3.0.4でCoffeeScript,SASSを使えるようにした | 自転車で通勤しましょ♪ブログ
岡山でgroovyやってる人があんまりいないからちょっとやってみるか、というくらいの気持ちでgroovyの勉強を始めようと思い、とりあえずGrailsを使ってみることにしました。といってもまだアプリを作ってないですが、とりあえず素のJavaScriptとCSSは嫌だなぁと思っていたので、CoffeeScriptとSASSを使えるようにしてみました。 groovyとGrailsのインストール groovyとgrailsはgvmを使ってインストールしました。 まずはgvmのインストール。 curl -s get.gvmtool.net | bash 次に、groovyとgradleとgrailsのインストール。 gvm install groovy gvm install gradle gvm install grails Grailsプロジェクトの作成 次に、grailsプロジェクトを作成し
CSS記述のためのフレームワークの比較参考URLメモ1(Sass, Less, Stylus, 2015-03時点) - msakamoto-sfのはてなブログ
2015-03-23 CSS記述のためのフレームワークの比較参考URLメモ1(Sass, Less, Stylus, 2015-03時点) Sass Less Stylus GruntとかGulpの記事漁ってたら、皆してsass/less/stylus使いまくってて、今更ながら何がどう違うのかググったメモ。 いずれもCSS記述を効率化するための独自言語、記法を定め、静的 or 動的にCSSに変換している点は共通。 あってるか分からないけど、三行でまとめ： Less : node.jsで動くコマンドラインツールだけど、ブラウザ上で実行時に動的に処理することもできる。 Sass : rubyで動くコマンドラインツールでCSSに変換する。条件分岐や繰り返しなどよりプログラミング的な処理を埋め込むことが出来る。compassというSass用のCSS生成フレームワークがある。 Stylus : 一番
Sassで行こう！
Translation of: Getting Started with Sass - A List Apart CSSの持つその簡明さは欠かせない特徴の一つで、それは最も歓迎されている点でした。CSSによるスタイルシートは、セレクターといくつかの適用したいスタイル情報を含むルールを羅列したものに過ぎません。しかし、WebサイトやWebアプリケーションが巨大に、そして複雑になり、様々なデバイスや画面サイズに対応せざるを得なくなった現在、この簡明さという特徴―fontタグやテーブル・レイアウトの淘汰に大いに役にたったもの―が大きな足かせになっています。 簡単な計算機能や変数を追加するなどといったCSSの修正案が過去に提示されましたが、どれもブラウザー・ベンダーには採用されませんでした。仮にこういった新しく素晴らしい拡張されたCSSがあるブラウザーに実装されたとしても、それが実用に耐える程度に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
