SASS(SCSS)を使う時に役立つ(と思ってる)記事まとめ

2012年08月21日

sass

最近SASS(SCSS)を使っていかに効率的に便利に制作が進められるかが僕の中でのホッとな話題です。これが何年使える技術なのかはさておき、少なくとも通常のCSSでの制作はしたくないな、と思える程に強力だと感じているので日々勉強は続けているので、自分用にブックマークをメモしておこうかと思います。

(一応)随時更新していくつもりなので、他にも「ここは?」があれば教えて下さい。twでもFacebookでも何でも良いのでお願いします。

とりあえず押さえときましょ

Sass – Syntactically Awesome Stylesheets
公式です。ここがなければ始まらない。…よね?

Sass – チュートリアル
チュートリアルの日本言版です。この方にはかなりお世話になってる気がします。

Sassで行こう!
多分ここだけ読めば大抵いけるようになるんじゃないかな

第3回ゆるふわ勉強会 – CSS拡張メタ言語のコトハジメ | Creator Life
一緒に勉強会やってるゆうじくんの発表資料。SASSとLESSのメリット・デメリットは押さえておくべき

考え方とか思想とかまわり

OOCSS + Sass
セマンティックなCSSとは!なスライド。やっぱりSASSはExtendの使い方がキモになるのかなぁな印象

Sassの存在意義への補足 – Weblog – hail2u.net
SASSを使うと「htmlで文章を書いてCSSでデザインを定義して、SASSで両者を紐づける」というプロセスでできるよ、というお話

ライブラリ・構成

Sass を今すぐ実務で使おうよ! « NAVER Engineers’ Blog
これも汎用ライブラリの紹介。サポートブラウザの定義は要チェック

NAVERでのSassの使い方 « NAVER Engineers’ Blog
SASS使用時のフォルダ/ファイル構成についての紹介。勉強になるけど、よっぽどの大型案件にならない限りここまで突き抜けてしまうと習得コストの方が高くつきそうな印象。CSS読むのに仕様書が必要なレベルってどんなだよ!

Extendまわり

nodot
Extendを使用する場合に、ライブラリ的に色々用意しておくと使わないやつも読み込まれてしまいなんだかなーなものを頑張って何とかする感じ。基本的には必要なものだけ include すればいいじゃん的な

最近試している Sass の書き方 – terkel.jp
SASS3.2から使えるExtendのPlaceholder機能を使ってセマンティックに記述する方法

SCSS3.2.0のplaceholderを試してみた。
SASS3.2で使えるプレースホルダー機能についてのお話し。これ便利

Sassを使ってレスポンシブウェブデザインにする時に覚えておいた方がいいこと4つ | howtohp
SASSでレスポンシブウェブデザインをやる場合に抑えてきたいこと。@media はまだまだなのかなぁ、な印象

ツール、TIPS的なもの

頭のいい人のSASSテクニック集。 | SAITEI no CHINJUU!!!(最低の珍獣)
グリッドシステムの作り方とか使えそうなライブラリを紹介

Useful SASS Mixins | SachaGreif.com
エンボスとかレタープレスを実現するMixinは使えるんじゃないかと思いました

Sass(Scss) Memo: @mixin | Culture27
mixinについて。でも、Extendでも良いんじゃね?その方が同じ記述が何個にも別れなくてファイルサイズが減るよ?とは言ってる

Codekit・Compassがすごい | Webamb | ウェブアンブ
こちらも一緒に勉強会をやっているこうめちゃんのブログ。Compassはかなり便利そうだなぁ、と思う。ある程度使えるようになったら多分やってみる。スプライトの自動生成って!それCSS側の機能かよ!と思うw

最新情報?

Responsive Web Design in Sass: Using Media Queries in Sass 3.2 – Intermediate
SASS3.2で追加されたメディアクエリとかのおはなし

他にこんな事も書いてます

FBでコメント

3個のコメント

  1. SS | SASS(SCSS)を使う時に役立つ(と思ってる)記事まとめ http://t.co/1YQEU8L6

  2. SS | SASS(SCSS)を使う時に役立つ(と思ってる)記事まとめ http://t.co/pI7jnJNj @STACKSTOCK_twさんから

  3. @fokotate より:

    SASS(SCSS)を使う時に役立つ(と思ってる)記事まとめ http://t.co/GMsvWHFG

トラックバック/ピンバックはありません。