※この記事は2014年2月4日に執筆された記事です。現在は仕様が異なる可能性があります。 CSSを効率的に書ける言語として昨今話題のSass。 これから導入をお考えの方に向けて2時間でマスターできる初心者向けのSass講習スライドを公開致します。 普段CSSを書く人も書かない人もSassがどういうものかを知る良い機会ですので、是非ご覧ください。 スライドに沿って実践すればSassの基本を短時間でマスターできます！ この講習では目で見るよりも実際に触れる事で理解が深まるよう、実習スタイルを取っています。 実習に使うファイルセットはこちらからダウンロードして上記のスライドと合わせてお使いください。 https://webnaut.jp/download/markup_140204/sass.zip（3.5MB） Sassの良さを活かすためには、チーム全員がSassを理解することが大切 Sass
タイトルとおりほんとに無料すか？っていうくらい高機能なGUIコンパイラーがPreprosがリリースされました。 CSS HappyLife大明神様よりとても詳しく丁寧に解説してくれるだろうとのフリをうけ筆を走らせている次第でございます。 追記:現在は無料版はなく有料版のみっぽいです (2015.04.05) Preprocessing just got easier with Prepros Prepros 現在バージョンは1.7。Windows版のみリリースされています。 追記:バージョン2.2でMac版も出ました (2013.07.11) Codekitのような高機能GUIコンパイラーがWindowsにもいよいよ登場ですね。 すでに海外の記事では「WindowsのCodekitだぜ！」みたいなことが言われてるとかいないとか。 Preprosの主な機能 Preprosの主な機能として ブ
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
はじめに このシリーズ「すぐに使えるSCSS入門シリーズ」ではScoutを使ってコンパイルしてきました。 最近Sublime Text 2のライセンスも買って、本格的に使い始めました。 そこで、今回はSublime Text 2（Windows, Mac）を使ってコンパイルする方法を調べたので、まとめて紹介したいと思います。 この記事ではデザイナーに苦手な人が多いかもしれない黒い画面「コマンドプロンプトとターミナル」を利用します。 難しいんじゃないかと思うかもしれませんが、是非挑戦してみてください。そのうち大したことしてないじゃんと思えるようになります。 主な流れ 主な流れはこんな感じで、最初に黒い画面でコマンドを入力していきます。 それが終わればSublime Text 2の設定を行い、コンパイルを試します。 Rybyのインストール インストールの確認とコンソール Sassのインストール
2012年 10月 31日 コーディング速度を3倍早くするSass（Scss）のフレームワーク”Compass”が本当に便利 カテゴリ： Sass タグ：CodingSassScssコーディング効率化 \ CSSのメタ言語Sass（Scss）。これ使うと凄く便利でコーディングスピードが上がるんですが、これをより便利に使えるようにしたフレームワークのCompassがもの凄く便利なので記事にしました。赤い彗星みたいなタイトルになってますが、使いこなせばかなり早くなります。 1.Compassとは 2.インストール 3.初期設定 4.Sass（Scss）ファイルをCSSファイルに 5.実際に作る 6.参考文献 compassとは オープンソースのCSSオーサリングフレームワークです。Sassがベースになっており、mixinで予めベンダープレフィックスが定義されていたりと、Sassをより便利に使え
はじめに 季節の変わりめで風邪をひいていませんか？僕は38度の熱で会社を休みました。ごめんなさい。 前回は「【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編」でGUIでSCSSを使えるScout.appのインストールからセットアップについて、またSCSSの4つの主な機能「変数」「宣言ブロックのネスト」「Mixins（関数）」「セレクタ継承」についてご紹介しました。 そこで、今回はGUIツールのScout.appに同梱されているCompassについて活用方法を紹介したいと思います。Compassは、SCSS使いなら必須の便利なフレームワークです。 Compass - CSS オーサリングフレームワークとは compassはSassを使ったオープンソースのCSSオーサリングフレームワークです。 compassを使うことで、Bender Prefix、CSS Spriteを自動
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
