CSS設計・Sassディレクトリ管理の標準化（CROCSS） - Qiita
はじめに HTML+CSSコーディングにおいて、Sass管理ディレクトリを標準化する方法を紹介します。 CSS設計は、サイト種別やプロジェクト規模、分業の有無や人数によっても最適解が異なります。 この仕組みは、様々な設計を同じロジックで受け入れることによって、CSSコードの管理効率を画一的に最大化する狙いのものです。 コーポレート・ポータル・ブログ・EC・LP・管理画面…など、様々な種別のサイトのCSSを、同じ仕組みで設計して管理できるようになります。 前提事項など SassなどのCSSプリプロセッサの使用を前提とします。 本記事の一部は、後で見られるよう別記事として切り出しています。（📝のマークのもの） この記事は標準化ノウハウ公開の一環として書いています。 仕組みの概要や前提事項などについては「UltimateCoding 概要・前提事項」のエントリをご確認ください。 セクション一覧
フリーのSass,LessコンパイラKoala【Win,Mac】
KoalaはWin,Mac,Linuxなどマルチプラットフォーム動くGUIのコンパイラです。 対応言語はSass(Compass),Less, CoffeeScriptです。 インストールはこちらからご使用のOSを。 現時点のバージョンはv1.0.0v1.3.0です。リリースしたてですね。 動作には予めRubyのインストールが必要です。 ※v1.3.0になったので少し修正しました（2013.6.2） koala使いかた ややフラットUIてきなインターフェイス。 プロジェクト登録 「＋」ボタンでフォルダを選択するか、 作業フォルダをドラッグすればプロジェクトが登録されます。 基本これだけでSass,Less,Coffeeのコンパイルをしてくれます。 書き出し設定 scssの緑のファイルアイコンをクリックすると画面右にオプションメニューが現れます。 「dynamic compilation」を
SublimeTextでのsass・compass自動コンパイル - Qiita
先日、OS X 10.11 El CapitanのMac Book Proをもらった。 Win→Mac への移行でちらほら覚え書き。 ズボラなので、SublimeTextでの自動コンパイルMacに導入。 ⌘＋Sで上書き保存すると勝手にsass→cssでコンパイルしてくれるんだ！ ＜１＞ SublimeText3をダウンロード https://www.sublimetext.com ＜２＞ Package Control機能をつける (↑いろいろダウンロードするための機能をつける) http://futago-life.com/sublime-text3-wiki/first-step/install/package-control ※わかりやすい参考サイト ＜３＞ Shift＋⌘＋Pでテキストボックスが出てくるのでInstall Packageを入力して以下のパッケージをDL ・Sass
Sassコンパイラ「Prepross」とCSSフレームワーク「Gumby」で高速プロトタイピング | Agnist.code
昨今注目度も高まっているSassを、最も簡単に使えるコンパイラ「Prepros」と、個人的に最近お気に入りのCSSフレームワーク「Gumby」を広めたくて書きます。 SassやCSSフレームワークとか、ちょっと二の足踏んじゃうな…みたいなノンプログラマーなフロントデザイナーの方ほどオススメです。 PreprosのインストールPreprosをダウンロードしてインストールしたら、準備はそれで完了です。 ここはさすがに説明不要で終わると思います。 GumbyのダウンロードGumbyトップページから落としてください。 カスタマイズダウンロードもできるので、多少変更しておきたい場合はここからダウンロードするのも良いです。ちなみにこれらのカスタマイズ項目は、Sassを使えば後から簡単に一括変更できます。 ダウンロードしたファイルを適当な場所に解凍してください。 解凍してできたフォルダを以後プロジェクト
カスタマイズ性抜群！Sassに対応したCSSフレームワークがアツイ！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのはるえです。 レスポンシブWebサイトを作成する際に重宝されているCSSフレームワークですが、「自由度が低い」「使わないUIパーツは邪魔になる」「カスタマイズするのに手間がかかる」「結果CSSファイルが肥大化してしまう」など、利用するうえでのデメリットも多々ありました。 実際フレームワークって、レスポンシブの大枠ができちゃってるし、コンポーネントが充実してる分あまり作り込む必要がないんで楽っちゃ楽なんですが、テンプレートに束縛されちゃデザイナーとしては面白くないしあまり頼りたくないってのも正直なところ。似たりよったりになるし。。 過去にCSSフレームワークの代表的存在「Bootstrap」を利用しましたが、柔軟性の低さに苦しめられたのを覚えています。 ですが最近はCompassのようにSassファイルが収められたシンプルでカスタマイズ性の高いCSSフレームワークが増
Sassを使ってみよう - Sassオレオレリファレンス
Sassを使ってみよう 記法と拡張子のルール ディレクトリを作る コンパイル Watchモード 何か書いてみる 記法と拡張子のルール Sassには記法が２種類あって、その名称と同じ拡張子をファイルにつけるのが慣例になっています。 公式サイトのドキュメントなどで大文字で書いてあるSASS、SCSSは記法の略称です。 以下は記法を表にまとめたものです。 #main { color: blue; font-size: 0.3em; } #main a { font: { weight: bold; family: serif; } #main a:hover { background-color: #eee; } #main { color: blue; font-size: 0.3em; a { font: { weight: bold; family: serif; } &:hover {
WindowsにCompassをインストールしてSASS/SCSS環境を構築する
SASSはRubyのgem（プログラム）なります。 Macには最初からRubyが入っているのですが、Windowsだと入っていないのでインストールしましょう。 インストーラーを使用すると簡単です。下記URLからダンロードしてください。 ここでは現時点で最新版の「Ruby 2.0.0-p0」をダウンロードしてみます。 RubyInstaller インストールするときに、環境変数のPATHをチェックしておきます。 スタートアップメニューの「アクセサリ」から「コマンド プロンプト」を起動します。 ruby -v と入力して ruby 2.0.0p0 と表示されたらインストール完了です。 Compassのインストール 「コマンド プロンプト」から下記のコマンドを順に実行します。 gem update --system gem install compass 下記コマンドでインストールされたか確認し
WindowsでSass環境を構築 - Qiita
Sassでコンパイルできる環境と、生成された CSS をWebブラウザで localhost として参照できるようになるところまで。 サーバサイドのことをよく知らない人用。 scss ファイルはすでにチームメンバーが git にコミットしていて、新たなメンバーが参入し、開発環境を構築する、という状況を想定してます。 インストールするものは3つ。 Ruby Sass Nginx（ApacheでもOK） Ruby をインストール Ruby-1.9 から RubyGems（後述）が標準付属となったため、1.9 以上をインストールする。今回は安定版の Ruby 1.9.3-p392 をダウンロード http://rubyinstaller.org/downloads/ インストーラのオプションが3つあるので、「環境変数のPATHに通す設定」にチェックを入れる。 コマンドプロンプト起動 Window
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IntelliJ IDEA – the Leading Java and Kotlin IDE
gumbyframework.com
Your Friendly Web Development Companion