昔のCSSをLessとかSassにしたいの
ども、白です。ホワイトデーは来月です（はい）。 さて、いろんなデバイスを対象にしたり、ちょっと規模の大きいサイトを作っていくとなるとCSSを書くのも大変です。そんな時は「素のCSSなんて書いてられっか、バカヤロー！（ガラガラガッシャーン）」ってなるので、最近話題の「Less」や「Sass（+Compass）」「Stylus」といったCSSプリプロセッサを使ってテーマのスタイルを作る人もいるでしょう。 新規で作る場合は自分の好きなプリプロセッサを使えばいいし、「Forge」なんていうSass / CoffeeScriptなテーマ開発フレームワークみたいなの（要Ruby / RubyGems）もあるんですが、昔構築したサイトのメンテナンスとかリニューアルの時など、既存のテーマを元にいじらないといけない場合はきっとイライラすることでしょう（笑）。 しかし、世の中には便利なツールを作ってくださる開
「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
最新のfrontend技術を使いまくれる静的サイトジェネレータMiddleman
CoffeeScript を軽く試してみようと思ってあれこれ調べているうちにたどり着いた Middleman というツールを紹介してみる。 Middleman: Hand-crafted frontend development たぶん試したのは 2.0.3 だか 2.0.4 だかその辺。 特徴Sinatra based ( つまり ruby 製 )Sass 自動コンパイルCoffeeScript 自動コンパイル ( Sprockets を使った依存性解決も )Sinatra で使える view の機能 HTML テンプレートは erb, haml, slim, markdown が利用可能YAML で「データ」を持ってこれを view に反映できるlivereload 対応そして、静的サイトとして出力できる。 利用技術CoffeeScriptSassEventMachineThinGua
Middlemanを使うことにしました - e2esound.com業務日誌
仕事の中でHTMLを書く比重が否が応にも増えつつあります。田舎にいるのでそういったお仕事のお話もありますし、WordPress等のCMSへHTMLを組み込む前段階として使う場合もあります。外注さんにお願いする手段もありますがCMSの組み込み辺りを考慮した場合、なんだかんだと自分でやった方が最終的に早いです。 このHTMLの業務量の増大に備えて何かいい方法がないかと探していました。例えばCodeIgniterのView周りをいじって簡単にサイトを組んで出力させるとか、silexやSinatraでテンプレートエンジン使うとか。 そんな時、FacebookでMiddlemanというものがあるのを見て、試して、使って〜設定して今に至ります。どうでもいいところでハマったりしたのでまとめておきます。 yterajima/my_middleman Middlemanとは Middlemanはgemとして
yterajima/my_middleman · GitHub
README.md my_middleman powered by Middleman my_middleman は 静的サイト・ジェネレータ Middleman のテンプレートエンジンを slim に設定したもの です。提携するマークアップエンジニアさんやコーダーさんと同じ環境で作業できるよう に github で管理しています。 メリット html 全体の基本構造を Layout として管理できる html の個別の共通部分( ex.nav ) を partial として管理できる slim を使用することで, タイプ数を減らすことができる slim 以外のテンプレートにも対応( ex.haml ) css を scss や sass で記述できる デフォルト設定との違い テンプレートエンジンに slim を設定 layout.slim と index.html.slim を作成 CS
Introduction to Sass and How to Setup with Mac + Coda
2014年7月31日 CSS, 便利ツール 「Sass」って聞いたことありますか？すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。とは言え基本的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。一見難しく思えるかもしれませんが、慣れると「これなしではいられない！」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac＋Codaでの設定方法も紹介します。 ↑私が10年以上利用している会計ソフト！ Sassとは 日本語では「サス」と読まれるようです。拡張子は「.scss」。今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換（コンパイル）してCSSファイルを作成します。例えば「style.scss」のSassファイルを変換する
How to Factory Reset iPhone 15 Pro Max - Skyward Design
Ever find yourself needing to wipe your iPhone 15 Pro Max clean? Maybe you’re planning to sell it, following an iPhone guide at i5apps.com, or perhaps it’s just time for a fresh start. Whatever your reason, performing a factory reset is a straightforward process. By the end of this quick overview, you’ll know exactly how to restore your iPhone 15 Pro Max to its original factory settings. After you
Compass/Sassを監視して自動でCSS生成·Scout MOONGIFT
ScoutはCompassで生成されたCSS群を監視して自動でCSSを生成してくれます。 CSSのフレームワークにCompassやSassを使っているWebデザイナー&プログラマーにお勧めなのがScoutです。フォルダを監視してファイルを修正すれば自動でファイルを生成してくれます。 インストールです。Windows、Mac OSXに対応しています。 起動しました。まず左下のプラスアイコンをクリックします。 フォルダを追加します。スタイルシートの入力元、出力先を指定します。 監視を開始するとファイルの編集をチェックして自動的にCSSを生成してくれます。 ScoutはCompassを使っている場合のみ利用できるのが特徴です。これを機にCSSフレームワークに飛び込んでみるのはいかがでしょう。 ScoutはAdobe AIR製、Windows/Mac OSX用のソフトウェア（ソースコードは公開され
フロントエンドの開発を加速するCodeKit :: 5509
また紹介エントリーか。。。Sass布教活動の一貫です。どうも。 SassとかLESSって使ってますか？書くのがとても億劫なCSS（個人の感想です）を快適に書くことが出来るようになる上に、始めた頃の楽しさが戻ります（個人の感想です）。詳しいことは以下のエントリかたがたを見てもらうとして。Sassの記事が多いのは僕がSass使ってるからです。Sass推しです。 CSSとフレームワークとメタ言語 Sass、そしてSassy CSS (SCSS) Sass を今すぐ実務で使おうよ！ Sassを覚えよう LESS初心者向けのナニカ というか LESS & Sass Advent Calendar 2011（） をみてください。 浸透しにくい理由は色々ある気がしますが・・・ コンパイルがめんどい そのとおりです。慣れですけどね。とっつきにくい感をこいつが出してるのはその通りでしょう。 黒い画面がちょっ
Sassで行こう！
Translation of: Getting Started with Sass - A List Apart CSSの持つその簡明さは欠かせない特徴の一つで、それは最も歓迎されている点でした。CSSによるスタイルシートは、セレクターといくつかの適用したいスタイル情報を含むルールを羅列したものに過ぎません。しかし、WebサイトやWebアプリケーションが巨大に、そして複雑になり、様々なデバイスや画面サイズに対応せざるを得なくなった現在、この簡明さという特徴―fontタグやテーブル・レイアウトの淘汰に大いに役にたったもの―が大きな足かせになっています。 簡単な計算機能や変数を追加するなどといったCSSの修正案が過去に提示されましたが、どれもブラウザー・ベンダーには採用されませんでした。仮にこういった新しく素晴らしい拡張されたCSSがあるブラウザーに実装されたとしても、それが実用に耐える程度に
SassとCompassを使って楽しくCSSコーディング！ - develo.org
HTML、CSS、Javascript、デザイン、絵を描いたり。
Sass を使うなら、Compass も使うと便利
あちこちで Sass のエントリーが増えてるので、私の環境も書いてみます。 Sass 使う時、より便利になる Compass というフレームワークを一緒に使っています。 Compass Home | Compass Documentation Compass って？ 便利だなと思う機能満載なフレームワークで、これも一緒に使うことで Sass がさらに簡単になったり使い勝手がパワーアップしたりします。具体的に例をあげたほうが分かりやすいと思うので、いくつか書いてみます。 Compass はいろいろな Mixin が含まれている @import “compass”; で呼び出して使えます。自分で書かなくていいから楽ちん。 @import "compass"; .ex1 { @include clearfix; } .ex2 { @include border-radius(5px); } .e
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
stack3.com is for sale | HugeDomains