sassの「&」の使い方メモ
sass の「&」の使い方でちょっとはまりそうになったのでメモ。
sassの&
には色んな使い方があります。
僕がよく使うのは :before
、:after
、:hover
みたいなやつですね。
.hoge{ &:before{ 〜〜 } }
ネストの前後を入れ替えることもできちゃいます。
.hoge{ .foo{ 〜 } .bar &{ 〜 } }
↓コンパイル後
.hoge .foo{ 〜 } .bar .hoge{ 〜 }
くっつけることは出来なかった
で、「特定のタグにだけクラスを付与した場合」を書こうとしたのですよ。
例えば.hoge
とa.hoge
を書こうとして下記のようにしましたが、これはコンパイルエラーになりました。
.hoge{ 〜 a&{ 〜 } }
変数展開#{}の方法があった
何か方法はないかと調べたら#{&}
という感じに変数展開の方法が使えるのですね。
こんな感じに書き換えました
.hoge{ 〜 a#{&}{ 〜 } }
変数展開の場合はネストが付いてしまいました。
.hoge{ 〜 } .hoge a.hoge{ 〜 }
結局普通に書くことに
結局普通に分けて書くことにしました。 何かいい方法ご存じの方がいたら教えてください。
.hoge{ 〜 } a.hoge{ 〜 }
sassの「&」の使い方メモ
sass の「&」の使い方でちょっとはまりそうになったのでメモ。
sassの&
には色んな使い方があります。
僕がよく使うのは :before
、:after
、:hover
みたいなやつですね。
.hoge{ &:before{ 〜〜 } }
ネストの前後を入れ替えることもできちゃいます。
.hoge{ .foo{ 〜 } .bar &{ 〜 } }
↓コンパイル後
.hoge .foo{ 〜 } .bar .hoge{ 〜 }
くっつけることは出来なかった
で、「特定のタグにだけクラスを付与した場合」を書こうとしたのですよ。
例えば.hoge
とa.hoge
を書こうとして下記のようにしましたが、これはコンパイルエラーになりました。
.hoge{ 〜 a&{ 〜 } }
変数展開#{}の方法があった
何か方法はないかと調べたら#{&}
という感じに変数展開の方法が使えるのですね。
こんな感じに書き換えました
.hoge{ 〜 a#{&}{ 〜 } }
変数展開の場合はネストが付いてしまいました。
.hoge{ 〜 } .hoge a.hoge{ 〜 }
結局普通に書くことに
結局普通に分けて書くことにしました。 何かいい方法ご存じの方がいたら教えてください。
.hoge{ 〜 } a.hoge{ 〜 }
Safariで display:table に overflow:hiddenが効かず、IEは mainタグをブロック要素として扱わない件
今日は「迷家ーマヨイガー」という作品のサイトをリニューアルしたのですが、SafariとIEのCSSではまりました。
Safariは display:table を overflow:hidden しても効かない
キャラクター紹介ページの下部には登場人物のサムネイルが並んでいます。
マウスオーバーすると名前が表示されるのですが、当初は display:table-cell
で縦中央揃えしていました。
<a href=""> <span>名前</span> </a>
a{ display: table; width: 70px; height: 70px; border-radius: 50%; overflow: hidden; } a span{ display: table-cell; vertical-align: center; background-color: red; }
他のブラウザは丸い形でマスキングされるのですが、OSX ElCapitan の Safariだけは四角く表示されてしまいます。
仕方ないので display:block
にし、<span>
をもう一段増やして translateY:50%
で中央揃えにしました。
<a href=""> <span><span>名前</span></span> </a>
a{ display: block; width: 70px; height: 70px; border-radius: 50%; overflow: hidden; } a span{ display: block; width: 100%; } a >span{ background-color: red; position: relative; height: 100%; } a > span > span{ position: absolute; left: 0; top: 50%; translateY: -50%; text-align: center; }
IE11 ではHTML5の <main> をブロック要素にしてくれない
こちらのページに詳細がありました。
これは display:block
することで対応できました。
<main class="mainBox"> </main>
.mainBox{ display: block; }
Dropbox無料版に戻しました。最近の僕のクラウドストレージとバックアップ環境
技術的な話は特になく、単に自分の環境の再確認です。何かの参考になれば幸いです。
Amazon Cloud Driveは同期型じゃなかった
1/21にAmazonがAmazonプライムフォトというサービスをスタートしました。
これは従来5GBまでの無料ストレージだった Amazon Clud Drive(以下ACD)を、画像ならJPEGだろうがPNGだろうが、RAWですら容量無制限で保存できちゃうというものすごいサービスに変更したものです。大量のRAWを抱える一眼レフユーザーに絶賛されました。
ただ個人的にはイメージしていたのとはちょっと違っていました。
現在競合として存在する Dropbox、Google Drive、One Driveのような同期型だと思っていたのですが違いました。
ACDにアップしたフォルダの中身をローカルで変更してもACDには反映されません。ACD側のファイルを削除してもローカルには反映されません。たとえるならFTP型だったのです。
iPhoneの写真は全部 Amazon Cloud Driveに!
ACDの使い勝手は予想していたものと違いましたが、写真が容量無制限というのはやはり魅力的なので、iPhoneの写真は自動的に ACDにバックアップするようにしました。
そしてiPhoneで撮影した写真は iCloudにも保存されます。しかしこちらは容量制限があるのでどんどんPCに移動させ、最新のもののみが入っている状態にします。
一眼で撮影したものも、不要なファイルを削除したあとにACDにバックアップします。
ACDは画像のバックアップ専用と割り切りました。ローカルでうっかり削除したときに復元するために使います。
今までのクラウドストレージ環境
サービス | 容量 | 用途 |
---|---|---|
Dropbox | 1TB(有料) | バックアップ&業務上の共有 |
OneDrive | 1TB(有料) | 連れとの写真共有 |
GoogleDrive | 17GB(無料) | 主にGoogleドキュメント |
これからのクラウドストレージ環境
サービス | 容量 | 用途 |
---|---|---|
Dropbox | 8GB(無料) | 業務上の共有 |
OneDrive | 1TB(有料) | バックアップ&写真共有 |
GoogleDrive | 17GB(無料) | 主にGoogleドキュメント |
AmazonCloudDrive | 画像無制限 | 画像倉庫 |
Dropboxは無料に変更
Dropboxはクライアントとの素材受け渡しにフォルダ共有を使っていたのですが、使わなくなったので無料に戻しました。
OneDriveはバックアップ用に
1TB使えますが Mac Book Pro本体にそんな容量はないので一部ファイルのみバックアップです。
iTunesや Lightroomのライブラリなど、ローカルにないと使えないものを入れています。ただし画像や音楽データ自体は外付けのドライブに入れています。MBAにそんな容量はないのでw
Google Driveはそのまま
Googleアカウントはあっさりと消えてしまうということを経験的に知っているので、バックアップ用途としては使いませんw Gmailのデータも Outlookでバックアップしています。
Amazon Cloud Driveは画像倉庫
画像を放り込むだけです。ローカルでうっかり削除してしまった時の救出用として使います。
Mac Book本体は TimeMachineでバックアップ
ローカルドライブは外付けHDDに TimeMachineでバックアップしていますが、実はあんまりやっていません(一番重要度高いのにw)
外付けHDDは Acronis True Image Cloudでバックアップ
データ置き場として使っている外付けHDDは Acronis True Image Cloud(ATIC) で定期的にバックアップしています。ATICは容量無制限をうたっているので全データをバックアップするのに向いています。
稼働中のプロジェクトデータは Bitbucket
Bitbucketに保存して、外部協力者に作業してもらう時はプルリクエストを投げています。
もう使わないであろうデータは Google Cloud Storage
2年前に終了したプロジェクトのデータは RARで圧縮して Google Cloud Storage Nearlineに保存しています。上述したようにGoogleはアカウントBANが怖いので、専用のアカウントを作っています。
http://www.itmedia.co.jp/news/articles/1503/12/news055.html
ただしローカルにもバックアップ
色々クラウドにバックアップしていますが、やはり手元にもないと安心できないものです。業務用データは半年に一度新しいHDDにまるまるバックアップして入れ替えることにしています。
おわり
というわけで色々安全弁は設けていますが、やはり1日単位の巻き戻りが発生することはあります。
友人は一週間一度も保存をしてない状態で Windowsアップデートが走り、一週間分の原稿が消えたそうです。
一週間一度も保存しないって馬鹿じゃねえのか!!
彼にはGoogleドキュメントを強く推奨しました。
余談
台湾情報ブログはじめました。
写真データが容量無制限のAmazonフォトプライムはRAWデータも無制限らしい
2016/1/21 に発表されたAmazonフォトプライムが話題になっているようです。
Amazonフォトプライム Amazon Cloud Drive(以下ACD)のサービスの一部です。ACD米国版は容量無制限なのに、日本版は上限5GBという制限が以前からありました。
≫【人柱レポ】容量無制限の本家アメリカ版Amazon Cloud Drive使ってみた&超快適最強サービスだった! | ひとぅブログ
それが今回のサービス改変で写真データのみ容量無制限ということになったようです。
画像以外はやっぱり上限5GB
調べてみると写真データ以外はやっぱり上限5GBでした。
そうすると「写真データは専用フォルダに保存する? それとも写真データの容量だけカウントしないの? その両方なの?」という疑問がわきました。
保存する場所は同じで、容量をカウントしない仕様だった
というわけで実際に調べてみました。
今までACDは使っていなかったので使用容量はゼロです。そこに19MB弱のファイルを置いてみました。
同じ場所にRAWデータ(拡張子「CR2」)を2つ置いてみました。
すると、ファイル総数は「3」なのに「1個のファイル」と表示されます。 RAWデータはファイルの個数にカウントされていません。
※本来はここに写真の個数が別にカウントされるのですが、反映されるまで少し時間がかかるようです。
拡張子で判断しているわけではなさそう
拡張子で判断しているのだろうか? という疑問がわいたので、先ほどのZIPファイルの拡張子を「.jpg」にしてアップしてみました。
しっかり容量にカウントされています。ファイル個数からも写真データ扱いになっていないのがわかります。
Lightroomカタログごと置いちゃう?
写真データだけ無制限で、他のファイルも一緒に置くことが出来るのがわかりました。
拡張子ではなくデータ形式をちゃんと確認しているのもわかりました(当たり前か)。
というわけでどういう風に使うかはおいおい考えていきたいと思います。
個人的には外付けHDDにある写真+Lightroomカタログをまるごと置いて同期させようかなーなんて考えてますが、その辺はデスクトップアプリ次第かなと。
シンボリックリンクは使えるのか。外付けHDDがない状態ではどうなるのか。その辺も検証してみたいと思います。
2016/1/24追記
現状のAmazon Cloud Driveデスクトップアプリは同期型ではないので、「カタログを置いて自動的にバックアップ」のようなことは出来ないようです。