【Sass】新規でサイトを作るのに使えそうなの一式。HappyLifeCSSに関するネタを中心に色々書いてます。【Sass】新規でサイトを作るのに使えそうなの一式。レイアウトTweetシリーズっぽくやってたSassを覚えようですが、今回は今までご紹介したSassに関する知識が有れば、直ぐにでも使えそうな一式をご用意しました。HTMLとかは過去の新規でサイトを作るのに使えそうなの一式。そんなに変わってないので、SCSSファイルだけ有れば良いと思いますがHTMLとかあった方が確認もそのまま出来るので良いかなーと。【Sass】新規でサイトを作るのに使えそうなの一式。1をDL(zip:約50kb)実際のページを見るページを見ても、あんまり意味が無いっすね。いつもの新規セットに比べると、ボク自身がSassはまだ全然使いこなせて無いですし、開発中と言うかベータな感じが否めないので、コレをベースにSassを色々試したりするのに良いかなと思います。一つの参考までにって感じでしょうか。んでは、続きにて中身の説明なんぞをしていきます。中身のご説明zipを解凍すると「newsite_sass_ver01」ってフォルダができます。中身はそこまで過去のと変わりませんが、SassをWindowsでささっと始める様のバッチファイルと、「html」「sass」フォルダが有ります。バッチファイルに関しては「バッチファイルを使ってカンタンに黒い画面でSassを利用する」を参考にして下さい。各SCSSファイルの概要sassフォルダに入ってる、各SCSSファイルについてカンタンに。各SCSSファイル名をクリックすると、ファイルがダウンロード出来ます。_layout.scssヘッダーとかフッターとかレイアウト関係用。_main.scssメインコンテンツ等のスタイル用です。_mixin.scssミックスインとか@extendなどが定義されてます。_print.scss印刷用で使うSCSSファイル。_reset.scssXHTMLとHTML5のリセットスタイル、フォントサイズの相対指定が書かれているファイル。_setting.scssなんか、色々を設定する為のファイル。style.scssstyle.cssに変換するファイルで、上記すべてをインポートするファイル。後は、ページ固有のスタイルが必要な場合に、SCSSファイルを追加していく感じになるかなーと思います。ちなみにあと味さんでも使ってるSCSSファイルを紹介しているので、そちらも参考になると思います。設定する為の_setting.scssファイルは、一部の値をちょっと変えたりするだけで、ガラっとスタイルを変更したり出来ます。んでは、この_setting.scssファイルを、実際どんな感じで使うのかをいくつかご説明するです。値を「false」から「true」にすればOKです。実際どんな風に切り替わるかをSass使ってない人も分かるように動画にしてみた!値を変更するだけで、ガラっと吐き出されるCSSが変わるのが面白いかなーと。値を変更すれば、次のように付与されるベンダープレフィックスが変更されるので、同じようにインポートして使ってる他のスタイルも一瞬で変更できます。余白調整用のスタイルを吐き出すあまり使いたくはないけど、やはり状況に寄っては余白を調整するためだけのクラスが用意されてると便利だったりしますよね。言ったクラスが直ぐに吐き出せるようにしています。デフォルトでは、これらのクラスは吐き出されないようにしていますが、これも値を「false」から「true」に変更することで吐き出されるので必要に応じて使い分けが出来る感じです。この余白調整用のクラスは「_mixin.scss」に定義されてますので、変更したい場合は次の部分を変えてもらえれば良いかと。ん所を10にするだけでOKです。各クラスが吐き出されますが、多すぎたり少ないって思う場合は、この20を変えればOKです。他にも、paddingの調整はいらない場合は、コメントアウトか消してしまえばOKです。試しに、10px刻みにして繰り返し回数を20から10に。paddingは吐き出さない様にした場合は次のような感じです。}}}こんな風に、色んな設定が出来たり、ちょっと数値を変えるだけで吐き出されるCSSを大幅に変更できます。試して、遊んでみるのが良いのかなーと!各SCSSファイル最後に、ちょっと長いけど各SCSSファイルのコードをそのまま貼っておきます。このファイルにメインコンテンツ部分のスタイルをガツガツ書いていく。mixinやらCSS3やら、extendも。fz(14)」とかってすればOKです。コレに関しては、えどさんの記事で紹介されてるのをそのまま流用していますので、そちらも合わせて読んで頂ければと。最後の方に書かれてる「@functionを使って何度も記述することをまとめる」ん所です。「Web制作者のためのSassの教科書」の改訂2版が発売しました。́)ゞそろそろ「こちら」や「ここ」にだけリンクさせるのを絶滅させたいんです。Sassの教科書で一番読んで欲しいところ。Spaceが3月1日にオープンしますCSSSってコワーキングスペース運営するです。excluded.↑上に行くよ。