タグ

あとで嫁とscssに関するopparaのブックマーク (2)

  • normalize.scss: Modularized and Sassy normalize.css

    normalize.cssをルールごとに分離させて、必要なルールだけをSassのpartialとして@importできるようにしたnormalize.scssを作った。各ルールには特に手を入れず、normalize.cssのセクションごとにディレクトリを切って整理しただけ。それぞれのpartialは特にSassに依存してるわけではないので普通にcatで連結しても使える。 今のところはそのまま切り分けただけで、新たなルールの追加とかはこれらを@importするSCSSファイル側でやるという形にしておいた。具体的には_my_normalize.scssを見てくれるとわかるんじゃないかと。html5shivを使っている場合に必要なくなるHTML5新要素のためのルールとかを消したり、hr要素のbox-sizingプロパティーの違いを吸収するルールを追加したりしてる。@importする順番を変更する

    normalize.scss: Modularized and Sassy normalize.css
  • SCSSでのグリッドの基本

    SCSSCSSフレームワークを使うのでも良いんですけど、ちょっとしたパーツだけグリッド・レイアウトしたいとかには少し大げさです。まぁつまりこのサイトのトップで使っているエントリー一覧をSCSSでどう効率的に調節しながら書いたかという話です。 エントリー一覧のHTMLは簡単にすると以下のような形になっています。 <section class="news"> <h2>Lastest entry</h2> <p>Summary of latest entry.</p> <hr> <section class="sub-news"></section> ... <section class="sub-news"></section> </section> グリッドにするためのCSSは以下のような形になります。 .sub-news { float: left; width: 256px; } CS

    SCSSでのグリッドの基本
  • 1