https://b.hatena.ne.jp/kits/csspreprocessor/ csspreprocessorに関するkitsのはてなブックマーク (11) https://terkel.jp/archives/2012/07/my-sass-way/ Placeholderセレクタ(%) と extend kits 2012-07-15T10:27:05Z css csspreprocessor 66 <blockquote cite="https://terkel.jp/archives/2012/07/my-sass-way/" title="最近試している Sass の書き方"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fterkel.jp%2Farchives%2F2012%2F07%2Fmy-sass-way%2F" alt="" /> <a href="https://terkel.jp/archives/2012/07/my-sass-way/">最近試している Sass の書き方</a></cite><p><a href="https://terkel.jp/archives/2012/07/my-sass-way/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/8b717decc0f8733b98ae731c76a33fd70855be45/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fterkel.jp%2Fapple-touch-icon.png" alt="最近試している Sass の書き方" title="最近試している Sass の書き方" class="entry-image" /></a></p><p>最近、Sass 3.2 (プレリリース版) を使って新しい書き方を模索しているんですが、その方向性に自信が持てないので、ちょっとさらしてみて反応を見ようという試みです。 まず基本的な方向として、以下のような考え方を参考にしています: なぜ @kotarok さんは mixin より extend を推すのか - mixi Engineers&#39; Blog Sass...</p><p><a href="https://b.hatena.ne.jp/entry/s/terkel.jp/archives/2012/07/my-sass-way/"><img src="https://b.hatena.ne.jp/entry/image/https://terkel.jp/archives/2012/07/my-sass-way/" alt="はてなブックマーク - 最近試している Sass の書き方" title="はてなブックマーク - 最近試している Sass の書き方" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/terkel.jp/archives/2012/07/my-sass-way/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://hail2u.net/blog/webdesign/sass-identity-follow-up 「HTML文書側では適切な要素の使用やクラス名の割り振りだけで良くなる」 kits 2012-03-22T04:15:18Z csspreprocessor html 39 <blockquote cite="https://hail2u.net/blog/webdesign/sass-identity-follow-up" title="Sassの存在意義への補足"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fhail2u.net%2Fblog%2Fwebdesign%2Fsass-identity-follow-up" alt="" /> <a href="https://hail2u.net/blog/webdesign/sass-identity-follow-up">Sassの存在意義への補足</a></cite><p><a href="https://hail2u.net/blog/webdesign/sass-identity-follow-up"><img src="" alt="Sassの存在意義への補足" title="Sassの存在意義への補足" class="entry-image" /></a></p><p>Sassの存在意義の話があんまりうまく伝わってない感じなので、3の別々に書けてSassで関連付けられるということについて少しだけ書く。抽象的な概念の話なので具体的な説明というのもなかなか難しいけど、CSSフレームワークを使う時にどうなるかみたいなことを取り上げる。 Twitter Bootstrapを始めCSSフレームワークはい...</p><p><a href="https://b.hatena.ne.jp/entry/s/hail2u.net/blog/webdesign/sass-identity-follow-up"><img src="https://b.hatena.ne.jp/entry/image/https://hail2u.net/blog/webdesign/sass-identity-follow-up" alt="はてなブックマーク - Sassの存在意義への補足" title="はてなブックマーク - Sassの存在意義への補足" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/hail2u.net/blog/webdesign/sass-identity-follow-up"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://mixiengineer.hatenablog.com/entry/2012/10791/ CSSプリプロセッサという言葉があるのか。/ スタイルルール群が先にありきで『それをどこに当てるか？』を考えるのが本来の姿」例を見ると納得できた。 kits 2012-02-22T00:16:32Z csspreprocessor thinking 108 <blockquote cite="https://mixiengineer.hatenablog.com/entry/2012/10791/" title="なぜ @kotarok さんは mixin より extend を推すのか - mixi engineer blog"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fmixiengineer.hatenablog.com%2Fentry%2F2012%2F10791%2F" alt="" /> <a href="https://mixiengineer.hatenablog.com/entry/2012/10791/">なぜ @kotarok さんは mixin より extend を推すのか - mixi engineer blog</a></cite><p><a href="https://mixiengineer.hatenablog.com/entry/2012/10791/"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/3b38b0e79ddda9633fec1ac4f2e11b1b96dac4fd/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fogimage.blog.st-hatena.com%2F12921228815729510653%2F12921228815730296634%2F1408080898" alt="なぜ @kotarok さんは mixin より extend を推すのか - mixi engineer blog" title="なぜ @kotarok さんは mixin より extend を推すのか - mixi engineer blog" class="entry-image" /></a></p><p>こんにちは。最近、実は JavaScript よりも Perl が好きなたんぽぽグループの大形です。 Perl の、仕様書など無いところがたまりません。勉強しても勉強しても...。いえ、今回は Perl の話ではありませんでした。 一昨日の土曜日ですが、会社にお金を出して貰って、 SwapSkills さんの『CSSを便利に使うための　LESS入門...</p><p><a href="https://b.hatena.ne.jp/entry/s/mixiengineer.hatenablog.com/entry/2012/10791/"><img src="https://b.hatena.ne.jp/entry/image/https://mixiengineer.hatenablog.com/entry/2012/10791/" alt="はてなブックマーク - なぜ @kotarok さんは mixin より extend を推すのか - mixi engineer blog" title="はてなブックマーク - なぜ @kotarok さんは mixin より extend を推すのか - mixi engineer blog" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/mixiengineer.hatenablog.com/entry/2012/10791/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://www.hamashun.me/archives/1294573.html kits 2011-08-24T06:13:10Z css ruby csspreprocessor 78 <blockquote cite="http://www.hamashun.me/archives/1294573.html" title="hamashun me : Windows PC に Ruby と Sass を導入する方法"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fwww.hamashun.me%2Farchives%2F1294573.html" alt="" /> <a href="http://www.hamashun.me/archives/1294573.html">hamashun me : Windows PC に Ruby と Sass を導入する方法</a></cite><p><a href="http://www.hamashun.me/archives/1294573.html"><img src="" alt="hamashun me : Windows PC に Ruby と Sass を導入する方法" title="hamashun me : Windows PC に Ruby と Sass を導入する方法" class="entry-image" /></a></p><p>Sugamo.cssでちょっと前に話題になったのが、CSSのメタ言語（って言い方でいいのかな）であるSassです。 Sassを使うと、CSSをクールに記述する事ができます。 Sass自体についての解説はググると詳しいものがいくつかあります。 この記事では、Windows PC（XPとVistaで試しました）にSassを導入する手順を紹介します。 Ru...</p><p><a href="https://b.hatena.ne.jp/entry/www.hamashun.me/archives/1294573.html"><img src="https://b.hatena.ne.jp/entry/image/http://www.hamashun.me/archives/1294573.html" alt="はてなブックマーク - hamashun me : Windows PC に Ruby と Sass を導入する方法" title="はてなブックマーク - hamashun me : Windows PC に Ruby と Sass を導入する方法" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/www.hamashun.me/archives/1294573.html"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://taiju.hatenablog.com/entry/20110606/1307348604 kits 2011-06-06T14:39:56Z css presentation csspreprocessor 20 <blockquote cite="https://taiju.hatenablog.com/entry/20110606/1307348604" title="UPGRADE JAPAN!!で「Sassられ指南」というセッションを担当しました - あと味"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Ftaiju.hatenablog.com%2Fentry%2F20110606%2F1307348604" alt="" /> <a href="https://taiju.hatenablog.com/entry/20110606/1307348604">UPGRADE JAPAN!!で「Sassられ指南」というセッションを担当しました - あと味</a></cite><p><a href="https://taiju.hatenablog.com/entry/20110606/1307348604"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/89193c6ab87436686212e1de135e136f6595ebb8/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fogimage.blog.st-hatena.com%2F12704346814673929871%2F12704591929883843194%2F1338468990" alt="UPGRADE JAPAN!!で「Sassられ指南」というセッションを担当しました - あと味" title="UPGRADE JAPAN!!で「Sassられ指南」というセッションを担当しました - あと味" class="entry-image" /></a></p><p>先週の土曜日にUPGRADE JAPAN!!というチャリティイベントにスピーカーの一人として参加しました。 マスコミの取材とかもいたようで、このような大きなイベントになるとはビックリ。義援金も20万円超集まったそうです。よかった。 ということで、話した内容を、SlideShareにアップしました。今後もアフターフォローを兼ね...</p><p><a href="https://b.hatena.ne.jp/entry/s/taiju.hatenablog.com/entry/20110606/1307348604"><img src="https://b.hatena.ne.jp/entry/image/https://taiju.hatenablog.com/entry/20110606/1307348604" alt="はてなブックマーク - UPGRADE JAPAN!!で「Sassられ指南」というセッションを担当しました - あと味" title="はてなブックマーク - UPGRADE JAPAN!!で「Sassられ指南」というセッションを担当しました - あと味" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/taiju.hatenablog.com/entry/20110606/1307348604"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://dxd8.com/archives/217/ サーバーサイドでの変換・ファイルの更新監視があるのがSCSSのよいところと思う。(クライアントサイド変換はあまり使いたくない) kits 2011-03-29T02:57:57Z css csspreprocessor 475 <blockquote cite="https://dxd8.com/archives/217/" title="CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fdxd8.com%2Farchives%2F217%2F" alt="" /> <a href="https://dxd8.com/archives/217/">CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞</a></cite><p><a href="https://dxd8.com/archives/217/"><img src="" alt="CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞" title="CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞" class="entry-image" /></a></p><p>CSSを拡張するためのメタ言語として、代表的なものに「SCSS(Sass)」と「LESS」があります。今回、導入を検討するにあたり、両者を比較しました。 結果的には、「SCSS(Sass)」を導入することにしましたが、特に「SCSS(Sass)」を選択する決め手となった点に重点を置きつつ、両者の違いをまとめまてみました。 はじめに Web...</p><p><a href="https://b.hatena.ne.jp/entry/s/dxd8.com/archives/217/"><img src="https://b.hatena.ne.jp/entry/image/https://dxd8.com/archives/217/" alt="はてなブックマーク - CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞" title="はてなブックマーク - CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較 - (DxD)∞" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/dxd8.com/archives/217/"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://hail2u.net/documents/sass-tutorial kits 2011-02-15T09:37:11Z css ruby csspreprocessor 217 <blockquote cite="https://hail2u.net/documents/sass-tutorial" title="Sass - チュートリアル"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fhail2u.net%2Fdocuments%2Fsass-tutorial" alt="" /> <a href="https://hail2u.net/documents/sass-tutorial">Sass - チュートリアル</a></cite><p><a href="https://hail2u.net/documents/sass-tutorial"><img src="" alt="Sass - チュートリアル" title="Sass - チュートリアル" class="entry-image" /></a></p><p>この文書は古いSassウェブサイトに載っていたチュートリアルの訳で、2013年12月現在もう新しいウェブサイトには存在しません。新しいウェブサイトでのチュートリアルにあたるSassの基本の日本語訳を参照してください。 Translation of: Sass - Tutorial Ruby と Sass のインストール まず、Sass がちゃんと動作するよう...</p><p><a href="https://b.hatena.ne.jp/entry/s/hail2u.net/documents/sass-tutorial"><img src="https://b.hatena.ne.jp/entry/image/https://hail2u.net/documents/sass-tutorial" alt="はてなブックマーク - Sass - チュートリアル" title="はてなブックマーク - Sass - チュートリアル" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/hail2u.net/documents/sass-tutorial"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://metacpan.org/release/Plack-Middleware-File-Sass kits 2011-02-15T07:17:15Z perl csspreprocessor 4 <blockquote cite="https://metacpan.org/release/Plack-Middleware-File-Sass" title="Client Challenge"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fmetacpan.org%2Frelease%2FPlack-Middleware-File-Sass" alt="" /> <a href="https://metacpan.org/release/Plack-Middleware-File-Sass">Client Challenge</a></cite><p><a href="https://metacpan.org/release/Plack-Middleware-File-Sass"><img src="" alt="Client Challenge" title="Client Challenge" class="entry-image" /></a></p><p>A required part of this site couldn’t load. This may be due to a browser extension, network issues, or browser settings. Please check your connection, disable any ad blockers, or try using a different browser.</p><p><a href="https://b.hatena.ne.jp/entry/s/metacpan.org/release/Plack-Middleware-File-Sass"><img src="https://b.hatena.ne.jp/entry/image/https://metacpan.org/release/Plack-Middleware-File-Sass" alt="はてなブックマーク - Client Challenge" title="はてなブックマーク - Client Challenge" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/metacpan.org/release/Plack-Middleware-File-Sass"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> http://subtech.g.hatena.ne.jp/h2u/20110210/1297330803 SCSSの例。 kits 2011-02-12T03:08:08Z css csspreprocessor 29 <blockquote cite="http://subtech.g.hatena.ne.jp/h2u/20110210/1297330803" title="はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=http%3A%2F%2Fsubtech.g.hatena.ne.jp%2Fh2u%2F20110210%2F1297330803" alt="" /> <a href="http://subtech.g.hatena.ne.jp/h2u/20110210/1297330803">はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知</a></cite><p><a href="http://subtech.g.hatena.ne.jp/h2u/20110210/1297330803"><img src="https://cdn-ak-scissors.b.st-hatena.com/image/square/6e60b1efb974203c94d41c7729a087dc4741802f/backend=imagemagick;height=90;version=1;width=120/https%3A%2F%2Fogimage.blog.st-hatena.com%2F26006613547248301%2F26006613547294880%2F1709195433" alt="はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知" title="はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知" class="entry-image" /></a></p><p>はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認くださ...</p><p><a href="https://b.hatena.ne.jp/entry/subtech.g.hatena.ne.jp/h2u/20110210/1297330803"><img src="https://b.hatena.ne.jp/entry/image/http://subtech.g.hatena.ne.jp/h2u/20110210/1297330803" alt="はてなブックマーク - はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知" title="はてなブックマーク - はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/subtech.g.hatena.ne.jp/h2u/20110210/1297330803"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://hail2u.net/documents/sass-and-sassy-css HTMLを変更せずにCSSフレームワークの利点を利用。 kits 2011-02-12T00:08:14Z css html csspreprocessor 473 <blockquote cite="https://hail2u.net/documents/sass-and-sassy-css" title="Sass、そしてSassy CSS (SCSS)"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fhail2u.net%2Fdocuments%2Fsass-and-sassy-css" alt="" /> <a href="https://hail2u.net/documents/sass-and-sassy-css">Sass、そしてSassy CSS (SCSS)</a></cite><p><a href="https://hail2u.net/documents/sass-and-sassy-css"><img src="" alt="Sass、そしてSassy CSS (SCSS)" title="Sass、そしてSassy CSS (SCSS)" class="entry-image" /></a></p><p>CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入...</p><p><a href="https://b.hatena.ne.jp/entry/s/hail2u.net/documents/sass-and-sassy-css"><img src="https://b.hatena.ne.jp/entry/image/https://hail2u.net/documents/sass-and-sassy-css" alt="はてなブックマーク - Sass、そしてSassy CSS (SCSS)" title="はてなブックマーク - Sass、そしてSassy CSS (SCSS)" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/hail2u.net/documents/sass-and-sassy-css"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote> https://blog.64p.org/entry/20101210/1291938021 kits 2010-12-10T05:25:33Z programming csspreprocessor 17 <blockquote cite="https://blog.64p.org/entry/20101210/1291938021" title="SASS とか HAML とか、ましてや DBIC と学習コストのはなし - TokuLog 改メ tokuhirom’s blog"><cite><img src="https://cdn-ak2.favicon.st-hatena.com/64?url=https%3A%2F%2Fblog.64p.org%2Fentry%2F20101210%2F1291938021" alt="" /> <a href="https://blog.64p.org/entry/20101210/1291938021">SASS とか HAML とか、ましてや DBIC と学習コストのはなし - TokuLog 改メ tokuhirom’s blog</a></cite><p><a href="https://blog.64p.org/entry/20101210/1291938021"><img src="" alt="SASS とか HAML とか、ましてや DBIC と学習コストのはなし - TokuLog 改メ tokuhirom’s blog" title="SASS とか HAML とか、ましてや DBIC と学習コストのはなし - TokuLog 改メ tokuhirom’s blog" class="entry-image" /></a></p><p>SASS とか HAML とか、ましてや DBIC と学習コストのはなし 結局、がんばってそれの作法をおぼえても、それのブームがさった後にまったく役にたたない知識なので、そういうのを覚えるぐらいなら、ベーシックな技術の修得に時間をさくべきではないか、とおもった。 Published: 2010-12-09(Thu) 23:40</p><p><a href="https://b.hatena.ne.jp/entry/s/blog.64p.org/entry/20101210/1291938021"><img src="https://b.hatena.ne.jp/entry/image/https://blog.64p.org/entry/20101210/1291938021" alt="はてなブックマーク - SASS とか HAML とか、ましてや DBIC と学習コストのはなし - TokuLog 改メ tokuhirom’s blog" title="はてなブックマーク - SASS とか HAML とか、ましてや DBIC と学習コストのはなし - TokuLog 改メ tokuhirom’s blog" border="0" style="border: none" /></a> <a href="https://b.hatena.ne.jp/entry/s/blog.64p.org/entry/20101210/1291938021"><img src="https://b.st-hatena.com/images/append.gif" border="0" alt="はてなブックマークに追加" title="はてなブックマークに追加" /></a></p></blockquote>