【Sassを覚えよう！Vol.4】Sassの基本的な記述方法
前回のエントリーで、無事にSassが動作する環境が整ったかと思います。 今回は、いよいよ通常のCSSでは出来なかったSassの記述（Sass記法）に関してです！ まずは基本って感じですが、これだけでも十分Sassを利用することでコーディングの効率が上がる！って思ってもらえれば幸いです＞＜ 記法の前に Sass記法の前に、SassはCSSの「完全な上位互換」と言えるので、CSSのルールはすべてそのまま利用することが出来ます。 その為、cssファイルをそのまま拡張子だけ .scssに変更して変換（コンパイル）し直すみたいな事も可能です。（圧縮できる程度のメリットしか有りませんが） 軽く余談ですが、このCSSとの完全な互換性が従来のSassには無かったのですが、現行のバージョンではそれが出来るので、余計な事を覚える必要がなく、Sassの機能を今までのCSSの知識にプラスアルファとして使えるんです
Sublime Text 2でコンパイル編 ｜ クラスメソッド開発ブログ
はじめに このシリーズ「すぐに使えるSCSS入門シリーズ」ではScoutを使ってコンパイルしてきました。 最近Sublime Text 2のライセンスも買って、本格的に使い始めました。 そこで、今回はSublime Text 2（Windows, Mac）を使ってコンパイルする方法を調べたので、まとめて紹介したいと思います。 この記事ではデザイナーに苦手な人が多いかもしれない黒い画面「コマンドプロンプトとターミナル」を利用します。 難しいんじゃないかと思うかもしれませんが、是非挑戦してみてください。そのうち大したことしてないじゃんと思えるようになります。 主な流れ 主な流れはこんな感じで、最初に黒い画面でコマンドを入力していきます。 それが終わればSublime Text 2の設定を行い、コンパイルを試します。 Rybyのインストール インストールの確認とコンソール Sassのインストール
【Mac】初心者向けRuby on Rails環境構築ガイド【El Capitan対応】 - Qiita
概要 初心者向けのRuby on Rails環境構築ガイドです。 「システム全体への影響を少なく」「チーム開発しやすく」をモットーに環境構築を目指します。 ※プログラマとして現場で環境構築するために必要な考え方です。 手段としてrbenvとruby-buildを用いて、Rubyの開発環境を構築し、 bundlerを用いてRuby on Railsの開発環境を構築するまでを解説します。 (それぞれの用語・アプリについてはこの後にきちんと解説いたします) 間違いのご指摘、ご意見・ご要望等ございましたらお気軽にコメントをください。 (2015/07/23発行、2015/10/21修正[El Capitan対応]) インストールするもの 今回インストールするものの一覧と解説です。 インストール方法は後ほど解説しております。 Homebrew macのパッケージ管理システムの一つ。 mac用の各種プ
CompassをインストールするMac OS X El Capitan編 〜Sass（７） | IT工房｜AI入門とWeb開発
CompassはSassを利用したCSSフレームワークです。導入はちょっと面倒ですが、うまく導入できるとCSSがすごく楽に書けるようになります。 Compassでできることは、ベンダープレフィックスなどの複雑なCSSを簡単に記述できたり、画像のwidthやheightを取得してくれたり、スプライト画像を作成してくれたりもします。 Compassのインストール〜Mac OS X El Capitan編 Compassのインストールはやっかいです。PCの状況で色々と設定が必要になります。 OSのバージョンや色々な環境でエラーが出た際はそのエラー内容を検索するなどで自分で解決するより他になさそうです。 今回はMac El Capitanでのインストール方法です。参考になれば幸いです。 SassはRubyで書かれていますので、Rubyの仕組みを使います。RubyにはGemという便利なライブラリ追加
keyframes（CSS3）とSassでイケてるアニメーションをシンプルなコードで実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは！ LIGフィリピン支社代表のせいとです。 最近のブログではまとめ記事中心に書いていたのですが、このまえ編集担当の朽木に「最近エンジニアっぽい記事書いてないよね。」というグサっとくる一言をもらったので、今回はそれっぽい記事を書いてみようと思います。 はじめに モダンブラウザでは、CSS3のanimationプロパティ、@keyframesの2つを使ってイケてるアニメーションがJS抜きで実装できます。 そいつあすごいぜって話なんですが、1つ心配なことが。 それは、アニメーションのバリエーションが複数ある場合、コード量が長くなりがちという問題。 ただでさえ各ブラウザのベンダープレフィックス付ける必要があるので、その上アニメーションパターンをいくつも書こうとしたらもう…（´Д`） 実践その1 というわけで、Sassを使って簡潔に書くことにしましょう。 試行錯誤を繰り返し、いろんなサイト
Scoutでエラーが出てコンパイルできない場合はフォルダ名を確認する | modshrink
ScoutでSassのコンパイルをする際に下記のエラーが出る場合、プロジェクトにマルチバイト文字が含まれている可能性があります。 TypeError on line 3414 of org/jruby/RubyString.java: no implicit conversion from nil to integer Run with --trace to see the full backtrace プロジェクトを作成する際に親フォルダにマルチバイト文字が含まれていた場合、マルチバイト文字を含まない構造でプロジェクトを再登録します。 Licenses このウェブサイトの文章の著作権は、引用文を除きmodshrink.comにあります。文章のライセンスはクリエイティブ・コモンズ(CC)の表示-非営利(BY-NC)です。Flickrの画像は該当の写真ページの権利表記に従ってください。その他
【Sassを覚えよう！Vol.3】一番カンタンな環境構築（Scout編）
さてさて、3回目のエントリーからは、実際に手を動かして行きますよっと。 何はともあれ、Sassが使えるようにしないといけないので、この記事では環境構築に関して書いてきます。 まずは黒い画面は一切使わずにGUIで操作が出来るScoutと言うAIRアプリでSassを動作させる方法をご説明します。 恐らく、現状ではコレが一番カンタンな方法だと思うので、取っ掛かりとしてはとても良いかなーと思います。 ちなみに、Scoutのインストールに関しては、まーしーさんの記事も分かりやすいかと思うのでそちらも参照して下さい。 Compass / Sass の導入が簡単にできる Scout を試してみた｜linker journal｜linker Scoutのインストール方法 んでは最初に、下記のサイトからScoutをダウンロードします。 英語なサイトですが、英語力は全く必要無いので躊躇なくいきませう！ Sco
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Homebrew — OS X用パッケージマネージャー
オリジナルフォントが作れるiPad用フォント作成アプリ「iFontMaker」｜linker journal｜linker
Scout-App - Site has moved