Takazudolog - OOCSSとSass
CSS Preprocessor Advent Calendar 2012の10日目、@Takazudoです。 僕はSassが好きです。なぜならSassにはextendがあるからです。その理由を、社内勉強会で発表した、以下のスライドで話したことを補足しつつ、書きます。 OOCSS + Sass OOCSSってなんぞ まず、Sassのextendが素敵な点を紹介する前に、OOCSSについて簡単に紹介します。 OOCSSというのは、Nicole Sullivanという人が言い出した考え方です。そのプレゼン資料やビデオなどは、本人が発表したものが、slideshare等にアップされています。 Object-oriented CSS Object Oriented CSS by Nicole Sullivan · Fronteers The Cascade, Grids, Headings, an
UXの効果が数字でわかる！5つのUX KPI : DeNA Creator(クリエイター) Blog
プログラミング教育や社員の健康をサポートする「CHO室」の取り組みなど、DeNAのCSRに関する情報を発信するブログ
TEST CORDING » Sassの@functionの使い方まとめ – プログラマブルな処理は@function
This domain may be for sale!
Sass: Built-In Modules
Only Dart Sass currently supports loading built-in modules with @use. Users of other implementations must call functions using their global names instead. Sass provides many built-in modules which contain useful functions (and the occasional mixin). These modules can be loaded with the @use rule like any user-defined stylesheet, and their functions can be called like any other module member. All b
より素早くCSSコーディングするための、Sass（SCSS）のmixinスニペット集
2017年2月22日 CSS 以前「効率良くCSSコーディングできるSassを使ってみよう！Mac+Codaなら設定も簡単！」という記事で紹介したSass／SCSS。皆さん使ってますか？今回はそのSassの @mixin という機能に注目してみようと思います。中には後述する「Compass」というフレームワークを使えば同様のコードが記述できるものもありますが、お勉強も兼ねてあえて使わず自分で書いてみました。カスタマイズしやすそうなものを中心に紹介するので、自分の使いやすいオリジナル mixin を作ってみてくださいね！ ↑私が10年以上利用している会計ソフト！ 目次 Sassの基礎知識 @mixin の基本的な使い方 リンクカラーを一括設定 ベンダープレフィックス 透明度 絶対位置の指定 rem を使ったフォントサイズ指定 レティナディスプレイ対応画像 Compassについて軽く。 Sas
Sass Style Guide | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! With more people than ever writing in Sass, it bears some consideration how we format it. CSS style guides are common, so perhaps we can extend those to cover choices unique to Sass. Here are some ideas that I’ve been gravitating toward. Perhaps they are useful to you or help you formulate i
Developing With Sass and Chrome DevTools | Envato Tuts+
In this article we'll take a look at how we can better integrate Chrome DevTools into our Sass development workflow. Tutorial Sneak Peek! Here's a peek of what we'll be doing in this tutorial via an animated GIF: On the left is a terminal and the Sublime text editor, and on the right is Chrome. Changes to the .scss file are being persisted to disk, which is reflected in Sublime, the Sass watch com
ズルいデザイン（2）：SassやCompassを使って、ズルいデザインテクニック (1/2) - ＠IT
SassやCompassを使って、ズルいデザインテクニック：ズルいデザイン（2）（1/2 ページ） SassやCompassを使って、少ない手間でちょっといい感じに見せる小ズルいTipsを紹介。グラデーション、角丸のお手軽かつ効果的な使い方とは？ シリーズ第2回、前回に続き、今回もSassやCompassを使って、少ない手間でちょっといい感じに見せる小ズルいTipsを紹介します。 今回は、グラデーション、角丸のお手軽かつ効果的な使い方について解説します。 （注）このページでは、個々のデザイン要素を分かりやすく説明するために、実寸サイズより画像を拡大して使用しています。 1: ズルいグラデーション CSS3ではグラデーションを扱えるようになったことから、画像を使わずに自在にグラデーションを描画して、CSSだけでよりリッチなビジュアル表現が可能になりましたが、一口にグラデーションといっても、う
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
基本 - Sassオレオレリファレンス
SassはCSSとよく似ていますが、CSSでは出来ないことが出来ます。 このページでは、使うときに避けては通れない基本中の基本について解説しています。 @import 有効な条件 ファイル名先頭にアンダースコアを付けるルール（partial） 複数指定 変数と文字列補完 @importのネスト コメント 文字コードの指定 Windows環境におけるRuby の外部エンコーディング問題 ネスト プロパティのネスト 親のセレクタを参照する @import CSSも300行を超えてくると分割したくなると思います。 もともとCSSには @import で他のCSSファイルを読み込むことが出来ますが、 Sassの@importはオリジナルよりもちょっと便利になっています。 有効な条件 1. ファイル名に拡張子.cssがついている @import "foo.css"; 2. ファイル名が http:/
Sass+compass 使い方 | code up
リファレンス CSS3 Layout Typography Box Shadow ブロック要素(block element)に対してinset(内側)あるいはdrop(ドロップ; 外側)の影をつけることができる。 デモ(このサイト) | デモ(compass内) 設定可能なデフォルト値 (Configurable Variables) $default-box-shadow-color: #333333影の色 $default-box-shadow-h-offset: 0水平方向の位置(px)。プラスで右方向 $default-box-shadow-v-offset: 0垂直方向の位置(px)。プラスで下方向 $default-box-shadow-blur: 5px影のぼやけ・にじみ具合の半径サイズ。マイナスは不可 $default-box-shadow-spread: 0影の輪郭を広げ
SCSSの3つのコメントスタイル - 眠る前に布団にはいろうか
SCSSはコンパイル時に出力スタイルのオプションをつけることで、出力を制御できます。 これはコメントの出力にも影響があるので、違いをまとめてみました。 基本的には 単一行コメントはすべて取り除かれ、複数行は圧縮指定（--style compressed）しないかぎりは出力されます。 公式にサポートされているコメントスタイル //単一行コメント /* * 複数行コメント */ これに加えて、どのオプションでも削除されないコメント行も指定できます。 ライセンス表記などに向いてるので、ライブラリをインポートする場合に最適だと思います。 /*! * エスケープされる複数行コメント */ ただしドキュメントには記載がなかったので将来にわたって使用できる方法か分かりません。 （執筆時のSassのバージョンは 3.1.10） 出力スタイルの指定 次のSCSSを基本に各オプションで出力した違いを紹介します
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で、という人には「なんか便利そうだけど難しそう、導入が大変そう」と思
Dreamweaver歴8年半の僕が3日前にSublime Text 2にしてやったこと | clear sky source
これまでかたくなに Dreamweaver を利用していたのですが、CS6 にアップデートしたあたりから動作が重くなり、直近ではもーやってられんとなりましたので重い腰をあげて Sublime Text 2 デビューをはたしました。 これでやっと僕にも春が来るのかなとワクワクしております。 参考にした記事 以下あたりを読みました。 基本 Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ | Mnemoniqs Web Designer Blog Sublime Text2の複数カーソルの使い方 #SublimeText2 – Qiita [キータ] SublimeText2を3ヶ月使ってみて利用を決めたPackageまとめ | 濃紺ピッチャー Emmet系 Sublime Text 2のEmmetでdivの閉じタグにコ
Sublime Text 2 で Sass/compass のコンパイルができるパッケージ 『Compass』 « shilog
この記事は Sublime Text 2 Advent Calendar 2012 とは関係なく書いております。 いや、Sublime Text 2 Advent Calendar 2012 で投稿されていた 一石三鳥!?SublimeText2とsass/SCSS(compass)+SFTPで作業効率化する方法。 という記事を読んで、自分で試したことのメモなので少し関係あるかな。 記事書いてくれた @tomo_thumb さん、ありがとうございます m(_ _ )m ということで、Sublime Text 2 だけで Sass/Compass のコンパイルができるということで、黒い画面でコマンドゴニョゴニョしたり、いちいち Scout 立ち上げたりしなくてもよさそうなので、Sass/Compass の導入の敷居が少し下がりそうな感じですね。以下、Windows 環境での解説。 pack
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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TEST CORDING » Sassの@functionの使い方まとめ – プログラマブルな処理は@function
Sass/SCSS入門 (全15回) - プログラミングならドットインストール
Buttons Builder
Web Design Tips To Help You Succeed - Web Design