潜在意識として、
デザイナー視点では、Sassは不要に感じている。
プログラマー視点では、CSSは貧弱に感じている。
Sassは、CSSをより強力にするための言語で、Rubyでできている。
と聞くとRubyに無知な自分にとっては、難しいイメージだが恐れるに足らず。従来のCSSの書き方で問題ない(Sass バージョン3から)。
拡張子は、.sass or .scss
↓ コンパイル(変換)
.css
ほかにも、less / stylus とかもあるけど、なぜSass?
コンパイル後のCSSを想像してSassを書く
コンパイル後のCSSが汚い場合は、Sassの書き方に問題あるということ
なぜSass? → ラクに書けるから
複数ファイルが一つのファイルになるのは、すごい!
色の微修正、いいね!グラデとかもできて、反転とかもできるといいな。
Sassだけではできない機能がセットになっている。
その他のたくさんの機能はCompass Helpersで確認。
CSS Spriteとdata URI schemeはとくに感動したッ!これだけでCompassを取り入れる価値あるッ!
導入方法は、他サイトや教則本を参考にするとして、衝撃だったのは、その手軽さ。セミナー内で環境をインストールし、コンパイルしてCSSファイルを出力できた!
かわいいからすべて許せる内容でした。
お友達になりたいわー。
いずれにせよディレクションのお話
原則として納品する
回避方法がある。
ネストが深すぎると・・・これはひどい
ネストは3階層まで、とルール付けをして制限をつけるといい。
運用面で破綻してしまいがち・・・これはひどい
クラスやmixinをつかう
ただし、mixinは、extendとは違いサイズ要領が大きくなるので、扱い注意。
そもそもそんなにセレクターを書いている時点で設計がまずい。
レスポンシブルなWebデザインを容易に作る Bootstrap / Foundation /Bem
バージョン管理 bundler
Gruntでもっと便利に(Compassより柔軟)
LINE株式会社での導入事例をサンプルに、職種や環境、技術レベルの異なる複数の作業者がかかわる環境で、どのように導入し、運用を続けているかを、紹介していただいた。
2011年6月から実用できるかを検査が始まり、実用できると判断後はチーム全体で導入の開始が始まり、現在は問題点のフィードバックとライブラリへの反映を行っているとのこと。
詳細はLINEのエンジニアブログに紹介されていて大変興味深い。 LINE Engineers' Blog NAVERでのSassの使い方
compassを導入する際には、設計をしっかりしておく必要がある。そうしないと運用が破綻しかねないので注意が必要だ。
そんな中で3つの概念モデルを紹介していただいた。
オブジェクト指向っぽく考えて整理しよう。
レイアウトに依存したCSSはダメ(なぜなら上書き合戦となるから、もしくはコピーしなければいけないから)
↓
レゴみたいに考える
↓
スキン(共通項目を一つのモジュールに)
BEMというワードは、いろんなケースで使われその意味が変化するが、ここではクラス名のこととして説明。BEMでは、クラス名の命名規則を厳格にしているのが特徴。
ややこしく、クラス名が長くなるデメリットがあるが、設計思想 / ルールの統一ができるのは大きなメリット。これを導入することで得られる4つのポイント。
CSSルールを5つに分ける
Base | サイトのデフォルトスタイルを定義する |
---|---|
Layout | サイトレイアウトの枠組み、およびそれを調節するための仕組み |
Module | レイアウトの中にモジュールをいれていくサブクラス(OOCSSのスキン) |
State | 状態ルール(BEMのクラス名ルールと同じ) |
Theme |
もともとSASSに対しては、現状にまったく問題がないのに、なんでCSSファイルを生成するためのSCSSというステップを踏む意味があるのか、そもそもSASSを使うための学習は無駄ではないのか、という否定的な考えでした。
そんな中で「絶対便利だから」と言われただけでは納得できなかったので、今回だまされたと思って、このセミナーに参加することに決め、その分、とても楽しみにしていたセミナーでした。
実際に参加してみて、SASSのメリットしているところに懐疑的になる部分もありましたが、圧倒的に便利な部分もありました。すなわち導入した方がいいッ!という結論に至りました。LINEでの導入実例を参考に、まずは個人レベルから始めたいと思います。
5年くらい前に購入した書籍「インタラクションデザイン」。この書籍内ではたくさんの事例が紹介されている。残念ながらその多くは現在閲覧することができなくなっていた・・・
WordPressを自作する上でもはや欠かせないプラグインの一つが、「Advanced Custom Fields」。 名前を変更しようと思って、Wor・・・
配列の場合 /** * 配列の重複を削除する * * @param {array} ary* * @return {array} 処理後のary・・・
5年以上前と比べると、アップデートが簡単で驚く。とくに記事にするまでもないと思いつつ、一応備忘録。 インストールすると、既存のディレクトリはそのままに別・・・
プラグインを更新中に、誤って、違うページにアクセスしまいました。すると、管理画面だけでなく、公開中のすべての画面が「briefly unavailable f・・・
Gulp。いつもは正常に動いている環境をそのままコピーして再利用するようにしている。そうすることで、案件ごとに毎回環境作りをする手間を省くことができ、何よりG・・・
書籍「LEAN UX リーン思考によるユーザエクスペリエンス・デザイン」から抜粋。 「前提の宣言」「MVPの作成」「実験の実行」「フィードバックとリサー・・・
LEAN UX は、コラボレーションと部門/領域横断的な手法によって、製品の本質を素早く明らかにするための実践的手法であり、これによって文書への過度な依存を減・・・
オブジェクト指向 クラス定義 JavaScriptは厳密にはクラスがない、プロトタイプベースのオブジェクト指向言語。ES6でclass構文が導入さ・・・
書籍「メンテナブルJavaScript」と Google JavaScript Style Guide 和訳 を参考に自分なりのJavaScriptスタイルガ・・・
めっちゃ参考になるページを見つけた。 絞り込みをするたびに色々ググっていたが、これがあればほとんどのことが解決できそうな気がする。 参考: これは便利!Word・・・
まずはサンプル。 これは、overflowをautoにした要素のスクロール位置を変更するサンプルです。 これは、overflowをautoにした要素のスクロ・・・
http://localhost:8888/ での参照ではなく、http://localhost/ で参照できるようにします。 MAMPの設定を変更する M・・・
<?php $args = array( 'paged' => 1, 'posts_per_page' => 20, 'post・・・
iframeで呼び出した際、iframe自体はスクロールさせずに高さを取得してiframe全体を表示させます。 サンプル:iframeの高さを自動調整するデモ・・・
【2020年07月13日】 macOS Catalina(10.15.5) / Adobe iLLustrator 2020(24.2.1) にて動作確認済・・・
ポイントを使ったり、増やしたりしたときに、結果のポイント数に差し替えるのではなくて、カウントアップしたり、カウントダウンして動的に動かそうと思って作ってみた。・・・
やりたいこと カテゴリー一覧ページで、そのカテゴリー一覧ページに属する記事一覧を取得するためにループさせるのとは別に、タイトルやカテゴリー別にデザインを変・・・
MAMPを使用していて、日時の情報を制御しようとしたとき、取得している日時が日本時間ではないことに気がついた。 時差を計算してPHPでプログラミングしていたが、・・・
WordPressの管理画面。「投稿」や「固定ページ」の一覧は、公開日順に並んでいる。ところが、カスタム投稿を追加した場合、公開順ではなく名前順に並んでいること・・・
思考と学び参加セミナー・イベントSass(CSS Nite LP32) | シンプルシンプルデザイン