タグ「scss」の一覧

【Sassを覚えよう！】もくじ的なのと参考リンク

  • Sass

需要が有るのか無いのかも分からず、半分以上は勢いで書いてたSassを覚えようシリーズですが、少しでも利用する人が増えるきっかけになれば幸いです。

カテゴリ一覧から全部見れますけど、一応【Sassを覚えよう！】の全記事一覧です。

  1. 【Sassを覚えよう！Vol.1】はじめに
  2. 【Sassを覚えよう！Vol.2】何がすごいの？プログラムが出来なくても使える？効率がホントに上がるの？
  3. 【Sassを覚えよう！Vol.3】一番カンタンな環境構築（Scout編）
  4. 【Sassを覚えよう！Vol.4】Sassの基本的な記述方法
  5. 【Sassを覚えよう！Vol.5】環境構築（黒い画面編）
  6. 【Sassを覚えよう！Vol.6】黒い画面での実際の運用に関して
  7. 【Sassを覚えよう！Vol.7】ファイルを分割して管理を楽に（partialについて）
  8. 【Sassを覚えよう！Vol.8】ネストをもうちょい使いこなす
  9. 【Sassを覚えよう！Vol.9】変数と演算で効率的に
  10. 【Sassを覚えよう！Vol.10】mixin とか色々活用してスマホ案件で楽をする
  11. 【Sass】新規でサイトを作るのに使えそうなの一式。Ver 1

新規セットのは、ちょっと遊び心で動画とか使ってるんで、実際の動きがちょこっとでも感じられるので、観てもらうとグッと興味が出るかも！？

【Sass】新規でサイトを作るのに使えそうなの一式。Ver 1

シリーズっぽくやってたSassを覚えようですが、今回は今までご紹介したSassに関する知識が有れば、直ぐにでも使えそうな一式をご用意しました。

まぁ、HTMLとかは過去の新規でサイトを作るのに使えそうなの一式。とそんなに変わってないので、SCSSファイルだけ有れば良いと思いますがHTMLとかあった方が確認もそのまま出来るので良いかなーと。

ページを見ても、あんまり意味が無いっすね。えぇ。

いつもの新規セットに比べると、ボク自身がSassはまだ全然使いこなせて無いですし、開発中と言うかベータな感じが否めないので、コレをベースにSassを色々試したりするのに良いかなと思います。
なので、一つの参考までにって感じでしょうか。

んでは、続きにて中身の説明なんぞをしていきます。

【Sassを覚えよう！Vol.10】mixin とか色々活用してスマホ案件で楽をする

  • Sass

気付けば、Vol.10！
ずいぶん長編になってまいりました。

何気に、既に去年1年分のエントリー数を超えてるだなんて！
今年が頑張ってるのか去年がひどすぎたのかは、ボクには分かりません。

・・・はい、後者です。

さてさて、Vol.4のSassの基本的な記述方法で書いた「ミックスイン」に関して、もうちょい書いてみたいと思いますが、ミックスインは奥が深くてこれから触れる内容も、触り程度って感じだと思いますが、それでも、タイトルに有るように、スマホ案件なんかではかなり活躍しちゃいます！

ミックスインついでに、@if 、@each 辺りもカンタンにですが触れていきます。
ここまで来ればだいぶSassを使いこなしてる様な気がしますよ！たぶん。

や、日本初の Sass エヴァンジェリストである @kotarok さんみたいな超上級者な方々からしたら、鼻をほじほじしながら ( ´_ゝ｀)フーン 程度なんでしょうけど！

【Sassを覚えよう！Vol.9】変数と演算で効率的に

  • Sass

ちゃっかりデザインを変更しました。
デザイン以外にも、メインエリアの横幅が変わったりしてます。
かなり突貫工事なので、色々アレな部分があるかと思いますが、、、

さて、Vol.4のSassの基本的な記述方法で書いた「変数」と「演算」に関して、もうちょい突っ込んだ部分を書いていこうかと思っちょります。

【Sassを覚えよう！Vol.7】ファイルを分割して管理を楽に（partialについて）

  • Sass

ちょっと間が開いてしまいましたが、今回はSCSSファイルの分割に関してです。

通常のCSSの場合は、分割した複数のファイルを読み込み用の「import.css」みたいなファイルを用意して管理することが多いかと思います。
もしくは、head要素内に各CSSファイルを読み込んだりしますよね。
ただ、これだと分割するファイルが多くなればなるほど、読み込むごとにHTTPリクエストとその読み込みがブラウザで行われるため、Webサイトの読み込みが遅くなってしまうって問題があります。
まぁ体感速度的にどの程度影響があるかはアレですが。

それでも、CSSファイルを1つにすることで、ちょっとでも表示が早くなるかも知れないならやって損は無い訳ですが、それで管理面で問題が生じてしまうのも困ったちゃんなので、分割するCSSは必要最低限にしていることが多いかと思います。

そう言った問題も、Sassなら分割したSCSSファイルを一つのCSSファイルとして吐き出してくれるので解決します。

【Sassを覚えよう！Vol.6.5】バッチファイルを使ってカンタンに黒い画面でSassを利用する

  • Sass

前回の記事を書いたら、バッチファイルを使えばもっと楽ですよ！と言うのをTwitterで@grfxdsgnさんから教わりました。

バッチファイルとか全くわかってなかったんですが、軽く調べたり教わったりしてたらボクが理想とする感じの運営が出来そうだったので、当初は予定してなかったエントリーですが、これで黒い画面からの利用がScoutより楽な感じになると思うので、ぜひ利用してみてください！

こうやって記事を公開することで、反応があってよりステキな方法に巡り合えるって良いですね。
久々に、ブログを書くことの面白さの一つを思い出したような気がしないでも無いです。

【Sassを覚えよう！Vol.6】黒い画面での実際の運用に関して

  • Sass

ボクがSassを覚えるにあたって一番のネックだった部分がこれから書く内容なんですが、黒い画面でSassが動作する所までは進んでも、これから実際に案件ベースで使っていくにはどうしたら良いかって部分。

と言うより、黒い画面を起動して都度手打ちしてウンタラカンタラみたいなのは、正直面倒過ぎて実用的じゃないな、と思ってた部分がとても大きいです。
黒い画面に関する知識も殆ど無いので、何かよく分かんないなーって感じでした。

実際問題として、RubyとSassのインストールだけなら、ちょっと気になってる分かりそうな人（あ、ボクでもいいんですけどね）に、『分かんないから教えて(・∀・)！』って言ってみれば、モンクを言いつつもやってくれると思いますよ。えぇ。
あ、ヤローは自分でやりましょうね。

軽く話が反れましたが、そろそろ本題に。

【Sassを覚えよう！Vol.5】環境構築（黒い画面編）

  • Sass

いよいよ、、、
黒い画面（コマンド プロンプト）の登場です。
...待って！逃げちゃダメだ！！

ここでは、、、
Rubyのインストールもしなければなりません。
...だから待って！逃げちゃダメだ！！逃げちゃダメだ！！

Rubyやら黒い画面とかは、ボクもそうですが、馴染みのない人にとっては意味不明過ぎるかと思いますが、思ったよりカンタンに使うことが出来ます。
これを乗り越えれば、黒い画面も可愛く見えるかも知れません。

ちなみに、Macの方がインストールが楽だと色んな所で書かれてますが、ボクがMacにインストールした感じ、見事にハマってMacの方が大変じゃないか！と思ったのはナイショです。

こんな感じでハマってしまう可能性が有るんですよ、奥さん。

【Sassを覚えよう！Vol.4】Sassの基本的な記述方法

  • Sass

前回のエントリーで、無事にSassが動作する環境が整ったかと思います。
今回は、いよいよ通常のCSSでは出来なかったSassの記述（Sass記法）に関してです！
まずは基本って感じですが、これだけでも十分Sassを利用することでコーディングの効率が上がる！って思ってもらえれば幸いです＞＜

記法の前に

Sass記法の前に、SassはCSSの「完全な上位互換」と言えるので、CSSのルールはすべてそのまま利用することが出来ます。
その為、cssファイルをそのまま拡張子だけ .scssに変更して変換（コンパイル）し直すみたいな事も可能です。（圧縮できる程度のメリットしか有りませんが）

軽く余談ですが、このCSSとの完全な互換性が従来のSassには無かったのですが、現行のバージョンではそれが出来るので、余計な事を覚える必要がなく、Sassの機能を今までのCSSの知識にプラスアルファとして使えるんです。
これに寄ってハードルが下がり、学習コストも最低限で済むので非常に意味の有る事かなーと。

ただ、一部のCSSハックに関しては変換した際にエラーになってしまうので、その場合は別の方法で書く必要があります。
細かい部分まで把握できていませんが、引っかかる可能性が高いハックとしては次のような「/」を使ったIE6/7用のハックを使うとエラーになります。

.item {
	/zoom: 1;
}

「/」が使えないので、この場合は「*」にすれば問題有りません。

.item {
	*zoom: 1;
}

いきなりちょっと不便っぽい部分が出てきましたが、Sassの素敵なトコの1つとしてエラーがちゃんと表示されることです。
その為、ScoutのLogを見ると下記のように表示されます。

>>> Change detected to: style.scss
error style.scss (Line 12: Invalid CSS after ".item {": expected "}", was "/zoom: 1;")
overwrite style.css

英語が出来なくても『style.scss の12行目でエラーが出てる！何か /zoom: 1; がInvalidなCSSっぽい！』って感じで分かるので、変にハマって時間を取られません。

「/」以外にも単純な文法違反でもちゃんとエラーが返ります。
例えば、、、

.item {
	width: 350px;
}s

何か、} の後に s が残ってる！！！（きっと、Ctrl+SしたつもりでCtrlが押せてなかったんですね）とかでもちゃんとエラーになるので、ケアレスミスが原因で時間を取られてしまう事が減ると思います。
記事書いてて思いましたけど、これって結構ステキですね。

互換性の話だったのに、気付けばエラー処理の話になってしまいましたが、こんな感じで今のCSS知識はそのまま使うことが出来ます。

↑上に行くよ