潜在意識として、
デザイナー視点では、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での導入実例を参考に、まずは個人レベルから始めたいと思います。
ソフマップで、MacBook Air Mid 2013 を中古で購入した。なつかしのOS X Lion。だがしかしッ!工場出荷時に初期化してアップデートしよう・・・
外部のAPIを利用する際、リクエスト回数が制限されることがある。また、リクエスト回数が制限され、かつ毎日更新をルールとする外部のAPIもある。 そんなと・・・
インスタに投稿した画像を自動でホームページでも更新されるようにしたい。もっとも簡単に実現する方法を紹介する。 公式リファレンスInstagram・・・
このたび、ハンドメイドアクセサリー作家さんのWebサイト制作させていただきました! Sunny Side Accessory(サニーサイド アクセサリー・・・
5年くらい前に購入した書籍「インタラクションデザイン」。この書籍内ではたくさんの事例が紹介されている。残念ながらその多くは現在閲覧することができなくなっていた・・・
WordPressを自作する上でもはや欠かせないプラグインの一つが、「Advanced Custom Fields」。 名前を変更しようと思って、Wor・・・
配列の場合 /** * 配列の重複を削除する * * @param {array} ary* * @return {array} 処理後のary・・・
5年以上前と比べると、アップデートが簡単で驚く。とくに記事にするまでもないと思いつつ、一応備忘録。 インストールすると、既存のディレクトリはそのままに別・・・
プラグインを更新中に、誤って、違うページにアクセスしまいました。すると、管理画面だけでなく、公開中のすべての画面が「briefly unavailable f・・・
Gulp。いつもは正常に動いている環境をそのままコピーして再利用するようにしている。そうすることで、案件ごとに毎回環境作りをする手間を省くことができ、何よりG・・・
めっちゃ参考になるページを見つけた。 絞り込みをするたびに色々ググっていたが、これがあればほとんどのことが解決できそうな気がする。 参考: これは便利!Word・・・
まずはサンプル。 これは、overflowをautoにした要素のスクロール位置を変更するサンプルです。 これは、overflowをautoにした要素のスクロ・・・
iframeで呼び出した際、iframe自体はスクロールさせずに高さを取得してiframe全体を表示させます。 サンプル:iframeの高さを自動調整するデモ・・・
http://localhost:8888/ での参照ではなく、http://localhost/ で参照できるようにします。 MAMPの設定を変更する M・・・
【2020年07月13日】 macOS Catalina(10.15.5) / Adobe iLLustrator 2020(24.2.1) にて動作確認済・・・
いつもは直接アップロードしているので気にしていなかったが、WordPress管理画面のメニュー「メディア」からfavicon.icoをアップロードしようとした・・・
<?php $args = array( 'paged' => 1, 'posts_per_page' => 20, 'post・・・
WordPressの管理画面。「投稿」や「固定ページ」の一覧は、公開日順に並んでいる。ところが、カスタム投稿を追加した場合、公開順ではなく名前順に並んでいること・・・
ポイントを使ったり、増やしたりしたときに、結果のポイント数に差し替えるのではなくて、カウントアップしたり、カウントダウンして動的に動かそうと思って作ってみた。・・・
前回、「入力フォームを自由にカスタマイズできる「Advanced Custom Fields」」で基本的なフィールド名を出力方法を紹介したが、今度は条件分岐に関・・・
思考と学び参加セミナー・イベントSass(CSS Nite LP32) | シンプルシンプルデザイン