「Compass」、基礎から応用まで！ | 株式会社LIG
こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh
Sass/Compassの社内運用に関するありがたいスライドから学んだことのまとめ
これはありがたい！と思えるSass/Compassに関するスライドが2つほどSlideshareにアップされていたので、このブログでも紹介させていただきます。去年行われたHTML5 Conference 2012でNHN Japanのマークアップエンジニアの方から発表されたもので、すでにSassを使ってCSS運用を始めている方からの貴重な情報です。 前編、後編とあるので、それぞれに対して自分なりに重要だと思ったこと、また、それらに対する考察をまとめてみました。自分が管理・運営しているウェブサイトのCSS管理も、Sass/Compassを使ってやりたいなぁと思う今日このごろです。時間的な初期投資は必要だけど、長期的に考えたらメリットも多く時間の節約にもなりそうです。 今回の投稿では、まずは前編から。 前編で気になったところのまとめ 「実践Sass 前編 — HTML5 Conference
SassとCompassでSprite画像を作る
やっべぇ、これ便利！って思ったので即共有！これまでSprite画像作る時って皆さんはどうしてましたか？僕はCSS Sprite Generatorというサイトを使って画像を生成していました！ しかし、さっき見てた記事でなんと、Compassを使ってSprite画像を生成する方法が紹介されていて、今さっき試したら結構ツボにハマったので、まずはこの興奮のまま皆さんともシェアさせて貰えれば嬉しいです！ 参考にさせて頂いた記事は以下なんですが、結構詳しくCompassで作るCSS Sprite画像の作り方が紹介されています。まずは僕も試してみた簡単な概要部分をちょっとご紹介させて頂きましょう！SassとCompassの基本的な使い方はググって頂ければ嬉しいです＞＜ How to automatically generate CSS sprites with Sass and Compass | C
CSS Preprocessor Advent Calendar 2012 - Adventar
Sass、Less、StylusなどCSS Preprocessorに関するAdvent Calendarです。 Sass LESS Stylus
Sass の @extend はどこがすごいのか
この記事では Less & Sass Advent calendar 2011 の 16 日目として、Sass の @extend 機能について書いてみます。が、諸事情により締め切りを過ぎてからあわてて書いており、かなりとっ散らかったものになるであろうことをあらかじめお断りしておきます。 さて、まずは @extend の基本的な機能についてざっとおさらい。@extend される側として一連のスタイルを定義したセレクタがあり、そのセレクタを @extend で継承しつつプロパティを追加したりして、新しいセレクタを作ります: // SCSS // 継承元のセレクタ .button { display: inline-block; border: 1px solid gray; background-color: silver; &:hover { border-color: black; }
【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜Compass基礎編 | DevelopersIO
はじめに 季節の変わりめで風邪をひいていませんか？僕は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を自動
【Sassを覚えよう！Vol.3】一番カンタンな環境構築（Scout編）
さてさて、3回目のエントリーからは、実際に手を動かして行きますよっと。 何はともあれ、Sassが使えるようにしないといけないので、この記事では環境構築に関して書いてきます。 まずは黒い画面は一切使わずにGUIで操作が出来るScoutと言うAIRアプリでSassを動作させる方法をご説明します。 恐らく、現状ではコレが一番カンタンな方法だと思うので、取っ掛かりとしてはとても良いかなーと思います。 ちなみに、Scoutのインストールに関しては、まーしーさんの記事も分かりやすいかと思うのでそちらも参照して下さい。 Compass / Sass の導入が簡単にできる Scout を試してみた｜linker journal｜linker Scoutのインストール方法 んでは最初に、下記のサイトからScoutをダウンロードします。 英語なサイトですが、英語力は全く必要無いので躊躇なくいきませう！ Sco
社内向けに Sass の勉強会しました « shilog
『First Sass』というタイトルで、初めてのSass的な内容で勉強会しました。 First sass from Toshiaki Sasaki Sass の概要、書き方、導入のことについて話しました。 Sass を社内でのスタンダードな技術のひとつにしていきたかったので、勉強会開きました。 はじめの1歩的にはこんな感じかなと。次はもうちょい実践的なこと話せたらなぁとか思います。 こうやって他の人に Sass について少し説明できるのも、前の職場で横にいたヒゲの人のおかげです。彼が教えてくれたことを今度は僕が他の人に伝えることで彼に対しての恩返しになったりするのかな。いや、ならないか。まぁいいや、感謝しております。 というわけで明日は、より理解を深めるために CSS Nite LP, Disk 26「CSS Preprocessor Shootout」に参加して勉強させていただきま
CSS Nite LP26 Related Links · Storify
A collection of thoughts, experiences, ideas that I like, and ideas that I have been experimenting with over the last year. It covers HTML semantics, components and approaches to front-end architecture, class naming patterns, and HTTP compression. Credit This article is translated with permission of Nicolas Gallagher(@necolas). Original article is written at nicolasgallagher.com. Titled: About HTM
CSS Nite LP26 CSS Preprocessor Shootout | Mima Design Memotto
1月12日、CSS Nite LP26 CSS Preprocessor Shootoutへ行ってきました。 今回も内容が濃く非常にためになりました。 以下、メモ書きです。 ◇基礎講演：CSSの設計◇ 高津戸壮さん（ピクセルグリッド） 設計について CSSを書いているとごちゃごちゃになるので、 うまいこと設計する必要がある。 ただ、コードを書くだけではちゃんとした設計はできない。 ページ設計の段階から考える必要がある。 ・モジュール名を基準に書く 干渉しないなどのメリット色々 ・モジュール一覧を作る どこだっけと探したり、同じモジュールを二度作ったりすることを防ぐ ・具体的過ぎず抽象的過ぎない命名を ・余白のルールを設ける なるべく単純に ・細かいデザイン 細かい余白の調節と量産効率性を考える。 ＊オススメ マージン用のモジュールを作る。 デザインを細かく再現する必要
SassやLESSを導入するメリット | Good thinking
SassやLESSといったCSSを拡張するメタ言語がいろんなブログ記事などで取り上げられ、すでに導入しはじめている人も多いかもしれませんが、まだ導入していない人のために、本記事ではそのメリットを一部紹介します。 SassやLESSはCSSを拡張するためのメタ言語です。メタ言語というと小難しいような気もしますが、かなり大雑把に言ってしまえば、Ruby（Sass）、JavaScript（LESS）によって、CSSをより便利にする技術というところでしょうか。.sass,.scss (Sass)、.less（LESS）という拡張子のファイル上でスタイルを書き、それらをCSSにRuby,JavaScriptでコンパイル（変換）します。 いずれもプログラミング言語の要することで、普段HTML/CSS、JavaScriptはjQueryで、という人には「なんか便利そうだけど難しそう、導入が大変そう」と思
Sass: Syntactically Awesome Style Sheets
Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. CSS Compatible Sass is completely compatible with all versions of CSS. We take this compatibility seriously, so that you can seamlessly use any available CSS libraries. Feature Rich Sass boasts more features and abilities than any other CSS extension language out there. The Sass Core Team has work
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ファイルを変換する
【Webデザイナ－・コーダー向け】すぐに使えるSCSS入門｜基礎編 | DevelopersIO
はじめに 早速ですがみなさん、黒い画面（コンソールやターミナル）はお好きですか？ ちなみに僕は最近やっと黒い画面に対していくつかの呪文使えるくらいになりました。文系理系でもどちらでもなくさらに低学歴の僕にとっては潜れば潜るほど黒い画面がつきまといます。（今では好きですよ、黒い画面） 今回は、すぐに使えるSCSS入門｜基礎編ということで、「黒い画面など見たくない！」というあなたにも、GUI操作だけですぐに使えるアプリケーションのインストールからSCSSの基本的な利用方法について、実際の開発に使えるポイントを押さえて解説していきたいと思います。 SCSSを覚えて生産的で楽しいWebサイト制作・アプリケーション開発をしていきましょう。 まだSCSSを知らない方向けに「SCSS」って？ 前回の記事「Media Queriesの記述を少し楽にしてくれるSCSS（Sass） Mixin（自作）」からの
CodeKit - THE Mac App for Web Developers
All the Cool Kids Compile Sass, Less, Stylus, CSS, CoffeeScript, Pug, Slim, Haml, TypeScript, JavaScript, ES6, Markdown, JSON, SVG, PNG, GIF and JPEG right out of the box. Dead-Simple Configuration Want compressed CSS? Just check a box. Need to transpile JavaScript? Check a box. Every tool's options are available in a beautiful, clean UI. No more hacking build scripts. Bleeding-Edge Tools Autopref
Sass - CSS HappyLife
もう完全にただのお知らせや告知ブログ...！ 初版の発売から4年経ち、ありがたいことに改訂のお話を頂いたので、6月～8月辺りに森田 壮さんと執筆を行い、2017年9月15日に改訂2版が発売しました。 かなり頑張って加筆・修正などを行ったので思ってたより大変な執筆でした。 初版と改訂2版の詳しい違いに関しては、サポートサイト に載せておいたのでそちらを見て頂けるとありがたいです！ 初版と改訂2版の違い | Web制作者のためのSassの教科書 改訂2版 - 公式サポートサイト せっかく久しぶりにブログを書くので、サポートサイトには書いてないことにでも触れて行ければと。 いよいよ明日発売の「Web制作者のためのSassの教科書」ですが、今回は、8章有る中でも特に読んでもらいたい章に関して、書きたいなーと思います。 今回の執筆はわりと気合い入ってるので、宣伝エントリーが多くてすみません＞＜ ちな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無効なURLです
CSS Nite LP26に行ってきました | Webデザインのタネ
OOCSS + Sass
compass-style.org is almost here!