カスタマイズ性抜群！Sassに対応したCSSフレームワークがアツイ！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのはるえです。 レスポンシブWebサイトを作成する際に重宝されているCSSフレームワークですが、「自由度が低い」「使わないUIパーツは邪魔になる」「カスタマイズするのに手間がかかる」「結果CSSファイルが肥大化してしまう」など、利用するうえでのデメリットも多々ありました。 実際フレームワークって、レスポンシブの大枠ができちゃってるし、コンポーネントが充実してる分あまり作り込む必要がないんで楽っちゃ楽なんですが、テンプレートに束縛されちゃデザイナーとしては面白くないしあまり頼りたくないってのも正直なところ。似たりよったりになるし。。 過去にCSSフレームワークの代表的存在「Bootstrap」を利用しましたが、柔軟性の低さに苦しめられたのを覚えています。 ですが最近はCompassのようにSassファイルが収められたシンプルでカスタマイズ性の高いCSSフレームワークが増
Sassオレオレリファレンス
このリファレンスについて 元は社内提出用に書いたレポートです。 レポートは１ページに全内容が入っていてだいぶ見辛いので、リファレンスらしい感じに作りなおしました。 （ついでにかなり加筆修正しています） 内容はSass公式サイトのリファレンスを忠実に翻訳したものではなく、構成などを再編集したオレオレ仕様になっております。 もし内容に間違いなどありましたらご一報お願い致します。 おことわり 筆者が重度のChromerなので古いブラウザには全く媚びない悪びれない仕様です。新しいブラウザで御覧ください。
コーディング速度を3倍早くするSass（Scss）のフレームワーク”Compass”が本当に便利 ｜https://wp.yat-net.com/name
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をより便利に使え
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
github に saag をリリースしました - すがブロ
saag とは HTML/XHTMLを生成するためのマークアップ言語である、 Haml（参考：日本Hamlの会） をインストールするとついてくる CSS 用マークアップツール、 Sass の編集を補助するツールです。 Sass の説明はSassでCSSの弱点を克服しよう − ＠IT が詳しいです。 Sass は sass コマンドを用いる事で *.sass ファイルを読み込み、 css ファイルを出力する事ができます。 sinatra 等のフレームワークを用いる事で上記 sass ファイルを動的に読み込んだりもできるのですが、 そうではない場合は、まず Sass で開発し、静的ファイルとして CSS を出力するような運用の方ありそうな気がするんですね。 そんなわけなので、 sass ファイルを監視し、変更があった場合にすぐに css ファイルを生成するツールがあると便利なのでは、と思って本
Sass のトップページを日本語でわかるようにしてみた - すがブロ
sass の公式ページ Sass - Syntactically Awesome Stylesheets 後半は特にトップページに記載されていないのですが、勢いで書きました。疲れました。 Sass Sass を使う事で再び CSS の虜になれるぜ。Sass は CSS にネスト、変数、 Mixin 等を加えたものさ。 Beauty（かっこいい） Sass を使う事で {} や セミコロンからおさらばできるぜ。 たとえば、こんな CSS の場合 h1 { height: 118px; margin-top: 1em; } .tagline { font-size: 26px; text-align: right; } こんな風に書けるのさ（cooooool!!） （追記）ちなみに、2スペースのインデントが重要なので Python だと思って書くと良いでしょう。 h1 height: 118p
Sassから自動でCSSを生成する·saag MOONGIFT
CSSをそのまま書くのは面倒というのは誰しもが感じる所だろう。そこで最近では構造化されたCSSを作成し、変換プログラムを介して別なフォーマットにするという類のソフトウェアが幾つか登場している。PythonではCleverCSS、RubyではSassやLessが知られている。 下がSass、上がCSS だがいずれのフォーマットも変換プログラムを使わなければブラウザに読み取らせることはできない。ファイルを編集するたびに変換プログラムを実行するなんて手間だ、そこで使うのがsaagだ。 今回紹介するオープンソース・ソフトウェアはsaag、Sassファイルを監視して変換するソフトウェアだ。 saagは入力としてSassのあるディレクトリを指定し、出力としてCSSファイルを出力するディレクトリを指定する。後はSassファイルを編集すると自動的に感知してCSSファイルを生成する仕組みだ。Sassファイル
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を使うと
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
compass-style.org is almost here!
はてなブログ