mixinが3文字で！Emmetオリジナルスニペットの登録方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
お疲れさまです、デザイナーのサリーです。 LIGにSassがもたらされて1年… たまにあるCSSで書かなきゃいけない機会にネストして書いてハッとしてキーーッてなったりしますよね（Sassあるある）。 私はDreamweaverを使いつつたまーにSublimeText2を使っているのですが、DreamweaverはSassのコードヒントが出ないので、Compassのmixinを呼び出すのがかなり面倒です。 簡単に呼び出せるようにスニペット機能を使おうと思ったのですが、Emmetのスニペットを使う方が簡単そうだったので、やり方に慣れていることもありEmmetを使うことにしました。 今回はDreamweaverまたはSublimeText2で、Emmetにオリジナルスニペットを登録する方法を紹介します。 Emmetをインストールする すでにEmmetをインストール済の方はこの項目は飛ばしてくださ
sass 3.3.0.rc.3 から、インターポレーションなしで、「&」を含んだセレクタが作れる！！！！ - Toro_Unit
sass 3.3.0.rc.3 から、インターポレーションなしで、「&」を含んだセレクタが作れる！！！！ 先日、LessでBEMってみたらかなりさくさくコーディングできた！という話という記事で、Sassを全力でDisったような気がしますが、 いい加減にsass3.3を導入しようとついに一念発起して、sass3.3.0.rc.3を突っ込んでみました。 Compassも1.0.0の開発版にアップデートし、いざ、SassでBEMるぞ！！！と、かの有名なBEM用Mix-in @mixin e($name) { @at-root #{&}__#{$name} { @content; } } @mixin m($name) { @at-root #{&}--#{$name} { @content; } } を突っ込んでみたんですが、このMix-inでコンパイルエラー。これはrc.2にしてみたらうまくい
Sass, Haml, CoffeeScript… あらゆるテンプレートエンジンを自動変換する便利ツール『Prepros』 | Campus Note
Webサイトを作るとき、HTMLとCSSでコーディングしてますか？それはもしかすると、ちょっともったいない事をしているかもしれません。 ■テンプレートエンジンとは HTML, CSS, JavaScript等をはじめとした、プログラミング言語のソースコードを、本来よりも短い記述で表現し、開発の効率を高めることができるものの事です。 例えば、僕がこのブログのリニューアルテーマをコーディングする時に使っているJadeエンジンでは… このような、よくあるHTMLのソースコードを こんな感じで、かなり簡略化して記述することができます。 テンプレートエンジンを使えば、ただ単にソースコードを簡略化するだけではなく、変数を代入したり、繰り返し処理をしたり、計算処理をしたりといった様々な恩恵を得ることができます。 ■テンプレートエンジンの敷居 テンプレートエンジンには様々な種類があります。書き方はもちろん
BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号
BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
カスタマイズ性抜群！Sassに対応したCSSフレームワークがアツイ！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。デザイナーのはるえです。 レスポンシブWebサイトを作成する際に重宝されているCSSフレームワークですが、「自由度が低い」「使わないUIパーツは邪魔になる」「カスタマイズするのに手間がかかる」「結果CSSファイルが肥大化してしまう」など、利用するうえでのデメリットも多々ありました。 実際フレームワークって、レスポンシブの大枠ができちゃってるし、コンポーネントが充実してる分あまり作り込む必要がないんで楽っちゃ楽なんですが、テンプレートに束縛されちゃデザイナーとしては面白くないしあまり頼りたくないってのも正直なところ。似たりよったりになるし。。 過去にCSSフレームワークの代表的存在「Bootstrap」を利用しましたが、柔軟性の低さに苦しめられたのを覚えています。 ですが最近はCompassのようにSassファイルが収められたシンプルでカスタマイズ性の高いCSSフレームワークが増
ネストを覚えた人のためのSassの便利な使い方
11. $baseColor: #AD253A; 変数を代入 body { background-color: $baseColor; 変数を出力 } #globalHeader { #gNav { color: $baseColor; 変数を出力 } } #main #featureList { a { h3 { color: $baseColor; 変数を出力 } } }
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
CompassでCSSスプライト
CompassでCSSスプライト Sassの拡張機能であるCompassを利用するとCSS Spriteが簡単に利用できるのでやり方をメモ書きレベルで書いておきます(SassもCompassも詳しくないのでおかしいところはツッコミを入れてください)。 まずはCompassで監視している画象ディレクトリ内(config.rbのimages_dirで設定しているディレクトリ)に任意のディレクトリを作成して、 CSSスプライトで利用する元画像を入れておきます。 今回は画象ディレクトリは「img」CSSスプライト用のディレクトリは「sprite」とし、元画像は以下の画象です。 a.png b.png c.png 次にscss内で@importでCSSスプライト用のディレクトリとファイルを指定します。 @import "sprite/*.png"; これをコンパイルするとimgディレクトリに「spr
CompassでデータURI スキーム
CompassでデータURI スキーム Sassの拡張機能であるCompassを利用するとCSS スプライトだけでなくデータURI スキームも簡単に作成できます。Compassすごい。 次のようにinline-image()で画象フォルダ内のbase64エンコードしたい画象を指定します。 .dataUriImage{ background-image: inline-image("sprite/a.png"); width:50px; height:50px; } そうするとCSS内に次のように画象がbase64エンコードされたデータURI スキームで出力されます。 .dataUriImage { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABHNC
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Css preprocessorの始めかた