![](https://mnet-company.co.jp/wp-content/uploads/2023/05/image-1.png)
長時間作業しても疲れない!?4スタンス理論から見る本当に自分に合ったマウスの選び方!
![](https://i0.wp.com/mnet-company.co.jp/wp-content/uploads/2023/05/member02.webp?fit=96%2C96&ssl=1)
突然ですが皆さんはコーディング速度どれくらいでしょうか?
正直自分は周りと比較したことがないのでわからないのですが周りからはよく早いと言われます。
ただそれで終わらないのが僕山下。
さらに高みを目指すために少しの時間を犠牲にして新しい技術を習得しました!
その名も「SCSS」(正式にはSASSっぽい)
SASS/SCSSで厳密な違いがあるのですが備忘録としてここに記していきたいと思いますが
長くなりそうなので前編・後編に分けてお届けしたいと思っております。
「Sass(サス、サース)」とは、CSSを拡張して、書きやすく、見やすくしたスタイルシートのことです。Syntactically Awesome StyleSheetの略で、直訳すると「文法的に素晴らしいスタイルシート」です。CSSがめっちゃ見やすく書きやすく保守もしやすいでっせ!みたいな感じです。
SASSとSCSSがありますがどちらもメリットや使い方の部分では同じです。
違うところと言いますとSASS記法・SCSS記法と呼ばれるように書き方が少し変わります。
SASS記法:
SASS記法の大きな特徴は、セミコロンや波括弧を使用しないことです。そのため、コードが簡略化され、書く際の負担が少ないというメリットがあります。
ただ、入れ子にすることが多いのでやっぱり波括弧は欲しい、、、
SCSS記法:
SCSS記法の特徴は、書き方がCSSに似ていることです。なのでCSSを触れる人ならそんなに学習コストもかからずかつ生産性が驚くほどアップしますのでこっちの方が一般的に普及しているみたいです。
(名前もSCSS標準にすればいいのに。調べても基本的にSASSで出てくるので。。。)
実際にSASSを使うと何ができてどんなメリットがあるの?が気になるところだと思います。
SASSを使う事のメリットを一つずつご紹介します。
CSSでは、それぞれのセレクタが独立して記述されていますが、Sassはネストを使い、子要素を波括弧{}で囲うことで、まとめてスタイルを設定することが可能です。親と子の関係性がわかりやすいので、可読性が高まり保守性もぐんとアップするということですね!
これは便利ですね!基本的にWEB制作をする際は色コードや幅の数値が何パターンか決まっているものです。それにより毎回「color: #000000;」とか書いていたものが「color: $black;」で済みますからね。例では恩恵がわかりにくいかもですが実際使ったらこれがすごく捗ります。
これが最大の特徴ではないかなと思います。
スタイルのテンプレートを関数で定義することによって変数だけではなく共通のボタンとかがあったら関数を呼び出すだけで一発でスタイルを当てることが可能です。
これによりスタイルを繰り返し書くことが無くソースコードを短くでき、保守や修正がしやすくなる訳ですね
前編は主にメリットについて述べていきましたが
後編は実際の書き方や導入方法についてご紹介していきたいと思います!
山下 生真
役員
建築家を志し京都の大学を卒業。様々な業種を経て、IT業界に心惹かれ、一心発起し、プログラミングスクールに業務の傍ら通う。趣味のYouTubeの動画編集・撮影活動で現CEOと出会う。幼少期からの夢であった”魔法使いになってみんなの役に立つ”実現の為、IT技術を駆使し、世の中の役に立つことを目標に起業。座右の銘は”野心・向上心”。
長時間作業しても疲れない!?4スタンス理論から見る本当に自分に合ったマウスの選び方!
【Part7】記事取得のカスタマイズが捗る。WP_Queryの使い方。カスタムフィールドの指定編
【ワードプレス】問い合わせフォームから届く、ひたすら迷惑なスパムメールを防ぐ為には?
サステナブルマーケティングとは
対面マーケティングの重要性
AIとグラフィックデザイン: デザイナーは心配すべきか?
最近のマイブーム(おすすめメディア紹介)
Webサイト制作における開発手法
幼稚園でICT活用のメリットを紹介
デジタルヘルスとは?