Syntactically Awesome Stylesheets の略で、直訳すると「文法的にイケてるスタイルシート」。
通常の CSS にネスト記法や変数など便利な機能を組み込むことで、CSS をより管理しやすくする。
Sass のファイルはそのままではブラウザで読み込めないので、コンパイルしてブラウザが読み込める形式に変換して使う。
/*動画学習アウトプットです*/ ご参考程度に楽しんでいただければと思います♪ https://www.udemy.com*Udemy講座より mixinの使い方について動画学習からメモです。 ☆Sassの機能mixinを使ってanimationの詳細を関数化 ◆mixin演算子 sassファイルの中で使える。【注!】CSSファイルでは使えない [記法] ☆定義 @mixin 呼び出すための名前(引数) { 内容} 例)@mixin animation() { } * 「animation」はmixinを呼び出すための名前・関数のように定義できる・引数にデフォルト値を設けることができる ☆mi…
稀に発生する Sass / SCSS で web サイトを作る案件。 毎回メディアクエリを生成する mixin どう書いてたっけ?ってなるのでコピペできるメモ Motivation breakpoint を変数で持たせて mixin でそれぞれのメディクエリを生成できるようにする media query を生成する mixin $breakpoints: ( "sm": 430, "md": 768, "lg": 1024, "xl": 1280, ) !default; @mixin mediaUp($breakpoint) { @media screen and (min-width: #…
昨日は午前中プログラミングの勉強を行った後、妻からのタスクを実行し、戻ってプログラミングの勉強、そのうち息子が16時辺りに下校してくるので、宿題を監視してという流れになりました。 そして、夜は週1の外食です。少し贅沢をしました。 この習慣は妻自身が仕事をしている事へのご褒美として、必ず週1回は贅沢な外食と決まっています。 休みはパソコンへ向かえる時間が、しっかり取れるのでかなり、充実した時間を過ごせました。 普段、仕事がある時の車内での勉強に慣れてくると、この書斎で広々できる有難さを実感できることと、割とやりにくい環境の作業に慣れると、通常モードに戻った時の負荷の軽減による快適さをより実感でき…
昨日は、先輩設計と一緒に2現場の完成後の社内検査に参加しました。 現場には、学びが沢山あります。工事の段階ごとにありますが、集大成の完成の時に今までの図面が形になります。 デザイン性や工夫した部分、使いやすさ等、実際に触ってみて、空間に入ってみて学ぶことも大切ですが、 やはり、 一番大切な事は、もっとこうした方がいいという反省と展望で、原因と結果の確認を行い、更に能力を向上する糧にすることです。 完成は設計をしていての喜びの瞬間でもあります。 どの仕事でもそうだと思いますが、90%の大変さと10%の楽しさだと思います。 90%の泥臭い作業、難しい作業、新しい知識のアップデート、労働時間などなど…
昨日も引き続き今週末と休み明けの打ち合わせ準備を行って行きました。 途中、社内の同じエリアの図面チェックを行いました。 未然に現場で起こるであろうトラブルを回避する為、エリア内の設計でチェックし合うシステムです。 これは非常に良くて、相手のチェックや冷静に第三者の目線で見る習慣が身に付くので、自分が図面を作成する際の見るチカラを養うことができます。 割と作成している人は、自分のプランに肯定的な目線になっていることが多く、 経験値が少ない人ほど、手持ちの経験値でしか勝負できないので、それぞれ経験年数の異なる人の目線で見ることで、成果としての図面は自分以上の力で作成できますし、その経験をインプット…
昨日は設計打ち合わせ中心の一日でしたが、やはり打ち合わせしている時が一番楽しいです。 むしろ、この為に日々の業務をこなしていると言ってもいいかもしれません。 人と関わることで、自分自身の変化や一緒に家づくりすることで可能性の探求、模索によって今まで沢山成長させてもらっています。 自分にないものを補完していくことが人と関わる大きな意味になっていると思います。 昨日よりも違った自分になる事を意識し続けることで、チリが積もればですが、少しずつ成長して行くと思います。 あまり起こっては欲しくないですが、悪いことが起こっても同じく、成長の兆しです。 如何に解決するか、解決して成し遂げることも、自分への自…
やればやるほど、わからん。 ひとつ??になると、次も?? 最終的には、何をやっているかわからなくなる・・・ みんなそうなのかな? かじった程度の知識を持っていればわかるのかもしれないけど、 知識ゼロの私にとって、かなり難解。 { }が多すぎて、どこに向けての{ }なのかがわからない・・・ あるある? 一人学習の欠点、相談者がいなーーーい!
一通りCSSについて学んできましたが、CSSを書くにあたり効率的かつ管理しやすい形でCSSを作りたいですよね! そのためにはどうしたら良いか?についてここでは学んでいきましょう。 CSS設計について OOCSSについて 「構造」と「見た目」の分離 「コンテナー」と「コンテンツ」の分離 Sassでの記述の注意 BEMについて【命名規則】 補足 参考サイト SMACSSについて Sassでの記述のポイント Sassについての復習 まとめ CSS設計について CSSには色々な書き方が有ります。それを効率的かつ管理しやすい形となるよう先人が体系化して共有してくれていたりします。それをCSS設計と呼んで…
Sassについて学んだところで、実際にコードを書いていくための準備をしましょう。 SassからCSSへコンパイルする Live Sass Compilerのインストール 設定画面記述文 Sassの出力方法の設定 拡張子 出力先フォルダ Autoprefixerによるベンダープレフィックスの設定 除外するファイルの設定 ソースマップの無効化 フォルダの構成 ファイル分割の方法(@useの使い方) 基本記述 @importについて 別ファイル内のmixin、変数を使う場合 SassからCSSへコンパイルする ■コンパイルとは■ Sassそのままだとブラウザで読み込めない。Sassで書いた内容をCS…
SassのSCSS文法について学んでいきます。 Sassとは? 入れ子の書き方 &でつなげる擬似要素・クラスの書き方 変数を使ってみよう 変数をつかった四則演算 定義したスタイルを使いまわそう @extendの使い方 @mixinの使い方 @extendと@mixinの違い @mixinを使ったメディアクエリの設定方法 解説(Sass) 【まとめ】Sassのメリット Sassとは? ■Sassとは■ CSSを拡張して扱いやすくしたスタイルシートのこと。Syntactically Awesome StyleSheetの略(直訳:文法的に素晴らしいスタイルシート)。CSSで記述するよりも圧倒的に早…