CSSの常識が変わる！「Compass」、基礎から応用まで！ | 株式会社LIG

2013/02/07 1473 users 初耳 CSS 応用 株式会社LIG 常識

こんにちは、デザインナーの王です。CompassのおかげでCSSを書くのが楽しくなってきている今日この頃です～～ この記事を読んでいるあなたは多分以下二つのタイプに分けることが出来るでしょう。 なんとなく「Compass」という言葉を小耳に挟んだことがあって、いずれは導入しようとは思っているがなかなか行動に移せないでいる。 「Compass」？初耳だがCSSの代替品って言うからちょっと興味が湧いた... 続きを読む

より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集 | Webクリエイターボックス

2013/07/01 486 users Sass SCSS Mixin CSSコーディング すそ

以前「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそ... 続きを読む

コーディング速度を3倍早くするSass（Scss）のフレームワーク”Compass”が本当に便利 - YATのBlog

2012/10/31 437 users ベンダープレフィックス YAT コーディング CSS SCSS

Sass、Scssのフレームワーク「Compass」に関しての記事です。ベンダープレフィックスの記述が不要など、コーディングのスピードアップに最適なその秘密を紹介しています。CSSのメタ言語Sass（Scss）。これ使うと凄く便利でコーディングスピードが上がるんですが、これをより便利に使えるようにしたフレームワークのCompassがもの凄く便利なので記事にしました。赤い彗星みたいなタイトルになって... 続きを読む

AngularJS's tutorial - あなたとともにAngularJS

2013/06/12 385 users Sass CoffeeScript AngularJS 少し

AngularJS's tutorial あなたとともにAngularJS AngularJSの入門用のチュートリアルを作ってみました なかなかまだ日本語の記事がなかったので、少しだけですが使ってみたことをメモしておきます TwitterBootstrap、google-code-prettify、CoffeeScript、Sass、Compass、Grunt.js by hisasann Git... 続きを読む

やる夫がデザイナーの作ったPSDにお怒りのようです | WebTecNote

2015/06/17 340 users WebTecNote psd DoJo memo jQuery

カテゴリー CSS (53) Compass (2) Sass (1) Custom (8) Dojo (1) GoogleMap (23) HTML&XHTML (12) HTML5 (1) Information (19) Javascript (42) jQuery (9) Material (9) Memo (71) やる夫がデザイナーの作ったPSDにお怒りのようです (5) MooToo... 続きを読む

今日から使える！ Sass/compass ゆるめ勉強会

2013/11/19 320 users Sass Presentation Transcript

今日から使える！ Sass/compass ゆるめ勉強会 Presentation Transcript 今日から使える！ Sass/Compass ゆるめ勉強会 2013.11.17 自己紹介 ‣ ノジマユウジ ‣ 株式会社フォーエンキー 代表 絶賛 お仕事 募集中 ● ● ● ● ● ● Android/iOSアプリ Webアプリ/WordPress Winデスクトップアプリ Web制作全般 ... 続きを読む

ズルいデザイン（2）：SassやCompassを使って、ズルいデザインテクニック (1/2) - ＠IT

2013/02/27 272 users Sass グラデーション 個々 ズルいデザインテクニック 前回

SassやCompassを使って、少ない手間でちょっといい感じに見せる小ズルいTipsを紹介。グラデーション、角丸のお手軽かつ効果的な使い方とは？ シリーズ第2回、前回に続き、今回もSassやCompassを使って、少ない手間でちょっといい感じに見せる小ズルいTipsを紹介します。 今回は、グラデーション、角丸のお手軽かつ効果的な使い方について解説します。 （注）このページでは、個々のデザイン要素... 続きを読む

Gruntで始めるWeb制作の自動化 - to-R

2013/08/27 268 users Sass JSHint Grunt CSSプリプロセッサー

Grunt.jsとはWeb制作の様々なタスクを自動化してくれるツールです。 node.jsで開発されており、Sass/CompassやLessなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。 インストール まずはnode.jsをインストールします。公式サイトでインストーラーが配布されていますので簡単にインスト... 続きを読む

[CSS]さまざまなデザインのボタンを簡単に実装できるSass/Compassのボタンライブラリ -Buttons | コリス

2013/06/23 267 users Buttons Sass コリス class button要素

フラットをはじめ、定番の角丸、サークル、アイコン添えなど、さまざまなデザインのボタンを簡単に実装できるSass/Compassで作られたボタンライブラリを紹介します。 Buttons Buttons- GitHub Buttonsのデモ Buttonsの使い方 Buttonsのデモ デモでは、リンクのテキストやbutton要素、input要素にclassを付与するだけで、さまざまなデザインのボタン... 続きを読む

「リーダー不在のエンジニアチームは守りに入る」ーー及川卓也氏が語るエンジニアマネジメントの要諦 | COMPASS

2018/07/31 247 users 要諦 及川卓也氏 エンジニアマネジメント リーダー不在

経済産業省は2016年、「IT需要が拡大する一方で、国内の人材供給力が低下し、IT人材不足は今後より一層深刻化する可能性があります」とホームページ上で発表している。発表から2年以上が経過した現在も、採用担当者から「エンジニアの採用が喫緊の課題です」と聞くことが増えた。 また、エンジニアには“エンジニア独自の... 続きを読む

初めてSassとCompassを使った際に参考にした記事まとめ｜WEB Drawer

2013/02/13 211 users WEB Drawer Sass 参考 記事まとめ CSS

しばらく前から気になっていたCSSを書く時に便利だという「Sass」と「Compass」を自分のサイトを作る時に使ってみました。 順番に導入の手順を追ってもいいのですが、検索すると多くのサイトが紹介していますので、私が見て参考にしたページをまとめておきたいと思います。 Sassとは まずSassとは何かと言うと、CSSを生成するためのメタ言語で、これを利用することでCSSを早く書けたり、記述が楽に... 続きを読む

WebデザイナーのためのSass/Compass入門 先生：石本 光司

2013/09/27 210 users Sass 石本 光司 Webデザイナー 先生

WebデザイナーのためのSass/Compass入門 先生：石本 光司 Presentation Transcript Introduction to Sass/Compass for Web Designer Webデザイナーのための Sass/Compass 入門 Ameba Headquarters Game Division Web Developer Koji Ishimoto 2013... 続きを読む

Sprite画像はもう作らなくて良い？！SassとCompassで速攻Sprite画像を作る方法に感動！ | バンクーバーのうぇぶ屋

2013/02/04 185 users Sass バンクーバー ツボ サツキ Sprite画像

やっべぇ、これ便利！って思ったので即共有！これまでSprite画像作る時って皆さんはどうしてましたか？僕はCSS Sprite Generatorというサイトを使って画像を生成していました！ しかし、さっき見てた記事でなんと、Compassを使ってSprite画像を生成する方法が紹介されていて、今さっき試したら結構ツボにハマったので、まずはこの興奮のまま皆さんともシェアさせて貰えれば嬉しいです！ ... 続きを読む

TEST CORDING » 基礎からのSass – Sassによる効率的CSSコーディングまとめ

2013/07/11 151 users Sass CSS TEST CORDING プログラミング

今まで作成してきたエントリーをまとめてみました。ライブラリ化についても言及しています。Sass の機能的に書いてないものもあるので、今後追加するかも。よく一緒に紹介されるCompassについては言及していませんのでご注意を。 Sassって何？ Sass とは、よりプログラミングに近い書き方ができる言語です。今まで書いていた CSS の書き方を見てみましょう。 div.container h1 { ... 続きを読む

爆捗！ WordPressテーマ作成ショートカット（1）：Dreamweaverで始めるWordPressサイト構築の基礎知識 (1/3) - ＠IT

2014/02/09 147 users Sass Emmet Zen-Coding CMS メイン

本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、「Adobe Dreamweaver CC」（以下、Dreamweaver）をメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗（はかど）らせる方法を解説していく。さまざまなモダンな技術としては、「Sass」「Compass」「Emmet」（旧、Zen-Coding）を想定している。 今回は、Dreamwe... 続きを読む

やる夫がデザイナーの作ったPSDにお怒りのようです | WebTecNote

2015/06/17 125 users WebTecNote psd DoJo memo jQuery

カテゴリー CSS (53) Compass (2) Sass (1) Custom (8) Dojo (1) GoogleMap (23) HTML&XHTML (12) HTML5 (1) Information (19) Javascript (42) jQuery (9) Material (9) Memo (71) やる夫がデザイナーの作ったPSDにお怒りのようです (5) MooToo... 続きを読む

Gulp + browserify + watchify + gulp-sass で自動高速コンパイル環境 | モンキーレンチ

2015/05/13 117 users Sass browserify Grunt モンキーレンチ

Gulp とは Gulp は Web 制作に関するいろいろな作業を自動化するためのツールです。Sass のコンパイルや Gulp の使用には node.js や Sass などのインストールが必要なので、ちょっと古い記事ですが下記を参考に適当にインストールしてみてください。 Grunt + Sass + Compassでつくるナウいフロントエンド開発環境 browserify とは そんなに詳しく... 続きを読む

CSS - 君は知っているか、あのCompassのstatsコマンドを！ - Qiita

2013/09/18 106 users Sass Qiita config.rb import CSS

CSSをリファクタリングしようと思うと、どっから手をつけたら良いかわからなくないですかね？僕はわかりません。 特にSassのような@importでいろいろファイル分割していると、あれこれなんのファイルだったお（＾ω＾;）ってことがよくありませんかね？僕はないです！ ということで、あなたがCompassプロジェクトを使用しているのならば、config.rbのある場所で下記のコマンドを打ってみましょう... 続きを読む

SassのデバッグにSource Mapsを使うべきたくさんの理由 | Dress Cording

2013/05/13 101 users Sass Tincr デバッグ エディタ CSS

SassやCompassをChrome Developer ToolsでデバッグしたいのにCSSしか参照できなくて困ったり、編集したコードをコピペするのが面倒、エディタに即時反映できたらいいのにって思ったことはありませんか？ この悩みを、Source MapsとChrome拡張「Tincr」を使って解決する方法をご紹介をします。 一連の流れを動画に撮ってみました。 1. Source MapsでS... 続きを読む

CSS拡張メタ言語「Sass」の概要と導入手順 （1/3）：CodeZine

2013/12/12 92 users CodeZine Sass デザイナ オイシックス CSS

本連載では、CSSの拡張言語であるSassの導入と、Sassを利用したメジャーなCSSフレームワークの1つであるCompassの導入をサンプルを交えて紹介し、最終的には実際にオイシックスで利用しているCSSをSassで書き直した際の実例をご紹介します はじめに　CompassはSassを拡張したツール集で、CSSのフレームワークといわれています。大手企業でも導入されていて、オイシックスでもデザイナ... 続きを読む

Sass + Compass の基本導入と設定ファイル config.rb について | WP-D

2013/01/03 86 users Sass config.rb WP-D 数字 設定ファイル

Sass + Compass の基本導入と設定ファイル config.rb について Posted 2013年01月03日（木） by WPD-Pink & filed under この方法お勧めです！. 明けましておめでとうございます！今年もどうぞよろしくお願いいたします。 2013 年は、26 年ぶりに 4 つ全ての数字が異なっているみたいですね。みなさんどのようなお正月をお過ごしでしょうか。... 続きを読む

Compass の送別会 - ペパボテックブログ

2018/03/15 83 users Sass minne shikakun 東亜飯店 きょう

2018 年 3 月 15 日、渋谷のはずれにある中華料理店『東亜飯店』では、 Sass の拡張フレームワークの Compass の送別会がしめやかにとりおこなわれていた。 「えー、それではですね、きょうは長年われわれのチームでいっしょに働いてきた Compass くんがついに卒業ということで、 minne のデザイナーの @shikakun から挨拶があるそうなので、よろしくお願いします」 はい... 続きを読む

StartUp Sass + Compass [基本と活用]

2013/02/23 79 users Sass Presentation Transcript

Statistics Favorites 1 Downloads 0 Comments 0 Embed Views 0 Views on SlideShare 0 Total Views 0 StartUp Sass + Compass [基本と活用] Presentation Transcript 第１回 Creators Meetup : StartUp Sass+Compass ∼基本と活用... 続きを読む

パフォーマンスから考えるSass/Compassの導入・運用

2013/05/07 70 users disk 石本 パフォーマンス CSS Nite LP 事例

パフォーマンスから考えるSass/Compassの導入・運用 Presentation Transcript 事例：パフォーマンスから考えるSass/Compass 導入・運用アメーバ事業本部 コミュニティ部門 第3コミュニティ事業部Webディベロッパー 石本 光司2013.01.12 @CSS Nite LP, Disk 26「CSS Preprocessor Shootout」 @t32k デ... 続きを読む

爆捗！ WordPressテーマ作成ショートカット（5）：知って得するSass/Compassのインストールと使い方 (1/2) - ＠IT

2014/02/25 68 users Sass Dreamweaver CMS Sassベース 技術

爆捗！ WordPressテーマ作成ショートカット（5）：知って得するSass/Compassのインストールと使い方 (1/2) 本連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、Dreamweaverをメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗（はかど）らせる方法を解説していく。今回は、SassベースのCSSフレームワーク「Compass」につい... 続きを読む