CodeKitで簡単にCSS Preprocessorを利用する！
CodeKitで簡単にCSS Preprocessorを利用する！ 本エントリーはCSS Preprocessor Advent Calendar 2012の12日目のエントリーです。 CSS Preprocessor Advent Calendar 2012とは年末の12/1〜12/25まで、みんながブログなどでCSS Preprocessorについて熱く語るというイベント、僕は2012年一番重宝したMacアプリ「CodeKit」について解説します。 そもそもCSS Preprocessorってなに? CSS PreprocessorはSassやLess、StylusといったいわゆるCSSメタ言語のこと。CSSメタ言語とはCSSと異なる文法でCSSを記述できる言語です。 たとえば、通常のCSSでは #bar{ width:100%; } #bar .foo{ color:red; } #
MacにSass、Compass、CodeKitを導入する - Photosynthesic blog
Sassは知っていたけれど、 いちいちコンパイルするほど大規模サイトやらないし、と思って使っていませんでしたが。 そんなついつい黒い画面を避けちゃうあなたに朗報、 なCodeKitの存在を知って早速（っていうか今頃）導入してみました。 導入の流れをおさらいします。 0. そもそも何それ？ SassはCSSの入力を構造的にし、変数などを使ってより書きやすくしてくれるツールです。 Rubyで出来ていますが、Rubyを知らなくても使えます。 CompassはSassを拡張し、より便利にしてくれるツールです。 というわけでWebのフロントをやる人にはとてもステキなツールなのですが、 いかんせんコマンドラインベースなので Sassのファイルを書く→保存する→コンパイルする→ブラウザで見る という流れが CSSを修正→Codaで即確認 という流れよりもどうしても助長に感じてしまう 小規模サイト開発者（
Sass - CSS HappyLife
もう完全にただのお知らせや告知ブログ...！ 初版の発売から4年経ち、ありがたいことに改訂のお話を頂いたので、6月～8月辺りに森田 壮さんと執筆を行い、2017年9月15日に改訂2版が発売しました。 かなり頑張って加筆・修正などを行ったので思ってたより大変な執筆でした。 初版と改訂2版の詳しい違いに関しては、サポートサイト に載せておいたのでそちらを見て頂けるとありがたいです！ 初版と改訂2版の違い | Web制作者のためのSassの教科書 改訂2版 - 公式サポートサイト せっかく久しぶりにブログを書くので、サポートサイトには書いてないことにでも触れて行ければと。 いよいよ明日発売の「Web制作者のためのSassの教科書」ですが、今回は、8章有る中でも特に読んでもらいたい章に関して、書きたいなーと思います。 今回の執筆はわりと気合い入ってるので、宣伝エントリーが多くてすみません＞＜ ちな
コーディングのスピードアップに最適なSassを使ってみた。環境構築から基礎的な記述までを紹介します。 ｜https://wp.yat-net.com/name
2012年 01月 12日 コーディングのスピードアップに最適なSassを使ってみた。環境構築から基礎的な記述までを紹介します。 カテゴリ： Sass タグ：CodingSassコーディング効率化 CSSのメタ言語として登場したSass。去年から認知はしていたのですが中々手を出しておらず、年が開けて「やってみよう！」と思い起こして使って見ました。 Index 1.Sassとは 2.インストール 3.SassファイルをCSSファイルに 4.実際に作る 5.参考文献 1.Sassとは Sassがなんなのか知らない人も居ると思うので簡単に説明すると、CSSファイルを作成するために扱うプログラムのようなもので、直接CSSファイルを作成するのではなく、CSSよりもシンプル且つ構造化した記述でSCSSというファイルを作成し、そのファイルからCSSファイルに変換（コンパイル）します。 コンパイルされたフ
SassとCompassを使って楽しくCSSコーディング！ - develo.org
HTML、CSS、Javascript、デザイン、絵を描いたり。
CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞
CSSを拡張するためのメタ言語として、代表的なものに「SCSS(Sass)」と「LESS」があります。今回、導入を検討するにあたり、両者を比較しました。 結果的には、「SCSS(Sass)」を導入することにしましたが、特に「SCSS(Sass)」を選択する決め手となった点に重点を置きつつ、両者の違いをまとめまてみました。 はじめに Webサイト、Webアプリケーションが大規模になるにつれて、CSSの設計・管理にもリソースを割かれるようになります。CSSのモジュール化、コンポーネント化による再利用性を考えたとき、現状のCSSを取り巻く状況は十分とは言えません。 一つの選択肢としてあがるのが「Blueprint」や「960 Glid System」等のCSSフレームワークの利用ですが、その再利用性と構造・表現の分離度はトレードオフです。 そこで、CSSの利点を活かしつつ、再利用性を高めるために
sassを簡単コンパイル GUIツール SCOUT
あ、ども。僕です。 ホント時代の流れの速さをひしひしと感じる今日この頃です。 前回の記事でsass導入について書かせて頂いたのですが、 CSSライブラリ化？ Sass(scss)のインストール 使用方法 mac こんな事しなくても、すぐに簡単sassをコンパイル出来るぜ！的なGUIツール「SCOUT」のご紹介です。 ターミナル等を扱わなくていいので、sass導入の敷居が下がったのでないのですか！？ いいですねー。 では、 インストール SCOUT http://mhs.github.com/scout-app/ こちらの公式ページから ADOBE AIRで作成されたアプリをインストールします。 赤く線で囲んだ部分をクリック！（当方の環境はmacな為、mac環境前提で話を進めさせて頂きます。winも変わらないと思います。） ダウンロード後 dmgファイルをダブルクリック。 Install S
【Sassを覚えよう！】もくじ的なのと参考リンク
需要が有るのか無いのかも分からず、半分以上は勢いで書いてたSassを覚えようシリーズですが、少しでも利用する人が増えるきっかけになれば幸いです。 カテゴリ一覧から全部見れますけど、一応【Sassを覚えよう！】の全記事一覧です。 【Sassを覚えよう！Vol.1】はじめに 【Sassを覚えよう！Vol.2】何がすごいの？プログラムが出来なくても使える？効率がホントに上がるの？ 【Sassを覚えよう！Vol.3】一番カンタンな環境構築（Scout編） 【Sassを覚えよう！Vol.4】Sassの基本的な記述方法 【Sassを覚えよう！Vol.5】環境構築（黒い画面編） 【Sassを覚えよう！Vol.6】黒い画面での実際の運用に関して 【Sassを覚えよう！Vol.6.5】バッチファイルを使ってカンタンに黒い画面でSassを利用する 【Sassを覚えよう！Vol.7】ファイルを分割して管理を楽に
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
解放新聞による在特会関連の虚報について - 在日特権を許さない市民の会 - ニュース
オリジナルフォントが作れるiPad用フォント作成アプリ「iFontMaker」｜linker journal｜linker