CSSフレームワーク「Compass」の基礎
Compassのメリット CSSスプライトが簡単に作成できる Compassでは、フォルダに配置するだけで、CSSスプライトで記載された一枚画像が簡単に作れます。CSSスプライトを利用すれば、1ページ辺りの画像の読み込みを何度も実行せずにすむため、ページの高速化につながります。 独自のmixinが利用できる グラデーションやベンダープレフィックスを自動で付与してくれる機能があります。 独自の関数が利用できる 画像のサイズを取得したり、三角関数の計算をしたりできる関数があります。 mixinや関数はCompassの公式リファレンスで紹介されています。ここでは記載できないほどのmixinや関数がありますので、一度見てみると面白いかと思います。 上記に加え、第1回目に記載したこちらのSassのメリットももちろん享受できます。 読みやすい 変数や繰り返し処理が使える 成果物の品質を統一できる 高速
4色ほど指定するだけでTwitter Bootstrapの配色を良い感じにしてくれるSass | mah365
そんなSassが町田先生のCustomizedTwitterBootstrapに含まれていたので、これをTwitter Bootstrap3に対応させてみたのでした。 ソース こちらが良い感じにしてくれるベースの変数です。 $base-color、$main-color、$accent-color、$base-text-colorを決めることで良い感じにしてくれます。僕は下のファイルみたいなテイストが好きです。ほんわかしている。仕事では使えない感じがある。 実際に読み込むときには、Twitter Bootstrapより先に変数を読み込んでおきます。 //--------------------------------------------------------- // Color Scheme for Bootstrap @import colors/try @import color
Sass - チュートリアル
この文書は古いSassウェブサイトに載っていたチュートリアルの訳で、2013年12月現在もう新しいウェブサイトには存在しません。新しいウェブサイトでのチュートリアルにあたるSassの基本の日本語訳を参照してください。 Translation of: Sass - Tutorial Ruby と Sass のインストール まず、Sass がちゃんと動作するようにします。OS X を使用しているのなら、既に Ruby がインストールされているでしょう。Windows ユーザーならば Ruby のWindows インストーラーで、Linux ユーザーならパッケージ・マネージャーでそれぞれ Ruby をインストールすることが出来ます。 Ruby のインストールが完了したら、以下のようにして Sass のインストールを行います: gem install sass 最初の Sass スタイルシート 非
CSSポストプロセッサー時代の到来について
Frontrend Advent Calendar 2013の4日目の記事として、「CSSポストプロセッサー時代の到来」というタイトルで寄稿した。このウェブログで書こうかと思ったけど、意識はされていないもののそこそこ浸透している概念の話で、トレンドに関わりがあるもののそれに左右はされない話でもあるので、独立した文書にした。長いかと思ったけどそんなに長くもなかった。 CSSポストプロセッサー時代の到来ではさらっと流した、CSSプリプロセッサーのコードと標準的なCSSのコードとのギャップが大きくなりすぎてることについてちょっとだけ。 これは危険な徴候だなーと思ってる。例えばMedia Queriesを効率的に記述するためにミックスインにするみたいなのはよく見るけど、実装の仕方はSassのバージョンと人によりそれぞれで、意図とどういうコードが吐かれるかを把握するのはかなり大変。 .test {
CSSポストプロセッサー時代の到来
SassやLESSといったCSSプリプロセッサーは市民権を得たと言って良いと思う。しかしそれらCSSプリプロセッサーは開発という段階にのみ利をもたらすもので、今のところはそれ以上ではない。CSSを実際にユーザーに届けるまでには、開発だけではなくレビューとリリースという段階もある。レビューとリリースも確実性を持って効率的に行うためには、CSSポストプロセッサーと総称されるようなツール群が必要になるだろう。 この文書はFrontrend Advent Calendar 2013の4日目への記事として寄稿した。明日は@hilokiさんがスタコラサッサと書くようだ。 目次 CSSポストプロセッサーとは CSSプリプロセッサーの出力するCSS CSS Lint 開発用とレビュー用、リリース用のCSS CSSポストプロセッサーのユースケース ベンダー拡張プリフィックスの付加 Media Queries
連載: IBM Watson Workspace #鬼わか アプリケーション開発: 第 7 回: IBM Watson Workspace で AI を利用したアプリ連携の実現 #鬼わか 解説（前編）
コーディングのスピードアップに最適な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を覚えよう！Vol.2】何がすごいの？プログラムが出来なくても使える？効率がホントに上がるの？
【Sassを覚えよう！Vol.2】何がすごいの？プログラムが出来なくても使える？効率がホントに上がるの？ 何かタイトルが適当だけど、無事に2回目のエントリーです！ このエントリーは、もうちょっとSassに興味を持ってもらうためのエントリーなので、早く試したい人は次のエントリーに行っちゃって下さい！ Sassがスゴイとは言っても、プログラムが出来ないと効果があんまり出ないんじゃ？とか学習コストが高い気がするとか、黒い画面が怖いとか、面倒な気がするとか、なんか色々有るかと思うので、このエントリーではSassを利用するにあたっての疑問点や不安などを出来るだけ解決出来ればと思ってます。 まず最初に言っておきたいのは、JSやPHPとかプログラムが一切出来なくても、普通に(X)HTML + CSS でのコーディングが出来てる人ならほぼ確実にコーディングスピードが上がるって事です。 ただ、このブログのタ
NAVERでのSassの使い方 « NAVER Engineers' Blog
NAVER UITのSass Mixins職人（他称）の上村です。 今日はLess & Sass Advent calendar 2011の21日目です。 3日目に書かれている通り、NAVERでは半年ほど前から実務でSassを使っています。 今回は弊社で使用しているSassのディレクトリ/ファイル構成やMixinsについて解説します。 基本ディレクトリ/ファイル構成 今のところcss/sassディレクトリは下記のような構成を基本としています。 project |~css/ | |-category-A_TRUNK.css | `-category-B_TRUNK.css |~sass/ |~core/ | |-_setting.scss | |-_style-mixin-base.scss | |-_style-mixin-layout.scss | |-_style-mixin-mod
Sassで行こう！
Translation of: Getting Started with Sass - A List Apart CSSの持つその簡明さは欠かせない特徴の一つで、それは最も歓迎されている点でした。CSSによるスタイルシートは、セレクターといくつかの適用したいスタイル情報を含むルールを羅列したものに過ぎません。しかし、WebサイトやWebアプリケーションが巨大に、そして複雑になり、様々なデバイスや画面サイズに対応せざるを得なくなった現在、この簡明さという特徴―fontタグやテーブル・レイアウトの淘汰に大いに役にたったもの―が大きな足かせになっています。 簡単な計算機能や変数を追加するなどといったCSSの修正案が過去に提示されましたが、どれもブラウザー・ベンダーには採用されませんでした。仮にこういった新しく素晴らしい拡張されたCSSがあるブラウザーに実装されたとしても、それが実用に耐える程度に
Sass、そしてSassy CSS (SCSS)
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4
Sass 3.x系を知る - すがブロ
はじめに この記事はRuby Advent Calendar jp: 2010 : ATNDの10日目です。前日はTrinityTさんでした。 最近注目の浴びている Sass を改めて学んでみましょう Sass - Syntactically Awesome Stylesheets 前フリ Ruby 界隈では Haml とセットで１〜２年前くらいから話題にはなっている（と思っている）のですが、私の周りでは Haml の話は聞くことがあっても Sass をバリバリ使ってるぜ、という話しはあまり聞きません。 しかし、Haml と違い Sass の場合は単体での使用も現実的な選択だと思っているので*1、Ruby/Rails 案件という枠組みを超えた使い方ができるのでは無いかと考えています。 そんなわけで一年前に以下のライブラリを作ったのですが、現在の Sass 3 系では --watch オプシ
SassでCSSの弱点を克服しよう （1/2）－ ＠IT
maedana SonicGarden SUG（SKIP User Group）／日本Hamlの会 2009/5/22 Railsを使ったWebアプリケーション開発で、プログラマやデザイナを悩ませるものの1つがスタイルシートの記述だろう。Sassを使って、“クールで構造化された”スタイルシートを記述してみよう（編集部） Sassとは、Syntactically Awesome StyleSheetsの頭文字を取ったものです。あえて日本語に訳すと、「かっこいい構文のスタイルシート」といった感じでしょうか。 もう少しシンプルに表現すると「クールなCSS（Cascading Style Sheets）」でもいいかもしれません。Sassはスタイルシートを簡潔に表現するためのメタ言語であり、同時にSassからCSSを生成するための便利なライブラリやコマンドラインツールを提供します。 Sassを使うと
Sass記法を用いたCSSフレームワーク·Compass MOONGIFT
CSSはプログラマ向けの言語ではないため、最初は理解しやすいが、複雑な記述が入り交じっていくとメンテナンスが困難になる。Webブラウザはよく出来ていて、何となく書いたものでも動作してしまうからさらにややこしい。 コマンドラインオプション そうした問題に対処するメタ言語として注目を集めているのがSassだ。そしてSassを実用的にプロジェクトに組み込めるのがCompassだ。 今回紹介するフリーウェアはCompass、SassをサポートしたCSSフレームワークライブラリだ。ソースコードは開示されているがライセンスは明記されていなかったのでご注意いただきたい。 Compassは単体でCSSフレームワークをなすわけではない。実際にはBlueprintやYUI、960といった有名なCSSフレームワークを利用している。そしてRailsやMerb、StaticMaticといったアプリケーションサーバと
http://nubyonrails.com/articles/dynamic-css
For full functionality of this site it is necessary to enable JavaScript. Here are the instructions how to enable JavaScript in your web browser.
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
はてなブログ | 無料ブログを作成しよう
Hampton Lintorn-Catlin