タグ

CSSとsassに関するbaboocon19820419のブックマーク (3)

  • Sass(SCSS)の基本機能|メリット・デメリットも紹介! | Bigmac inc

    仕事HTMLコーディングする人の約7割が、Sass(SCSS)を使用しているという調査結果があるように、コーディングする上でSass(SCSS)は欠かせない便利なものとなってきています。今回はSass(SCSS)の基情報からメリット・デメリットもふまえて紹介していこうと思います。 Sassとは? まず、Sassを使ったことがない方に向けて、簡単にSassの使い方を説明します。Sassとは「Syntactically Awesome Stylesheets」の略で、訳すると「構造的にとても凄い(最高な・素晴らしい)スタイルシート」という意味になります。 SassにはSASS記法・SCSS記法という2種類の記法があり、元々はSASS記法が採用されていましたが、CSSとの互換性に乏しいなどの理由から、CSSとの互換性を高めたSCSS記法が作られました。SCSSCSSと記法が近いため、CSS

    Sass(SCSS)の基本機能|メリット・デメリットも紹介! | Bigmac inc
  • Sass、そしてSassy CSS (SCSS)

    CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4

  • Middleman の自分用テンプレートを簡単に作る方法 | e2esound.com業務日誌

    Middleman Advent Calendar 2013 の 6 日目の記事です。 もっと簡単に 4 日目に書いた Middleman採用サイトを分析する – Middleman ガイド編 -  のような記事を量産していこうかと考えてみたものの, どうせならドキュメントに詳しく載っていない部分を補強するようなものを書いた方が有用ではないか? ということで穴を埋めるかのような記事を書いていくのであった。 さて, 6 日目の記事は自分用テンプレートの作り方 (一番簡単な方法) をまとめてみるよ! 自分用テンプレート (カスタムテンプレート) とは何か? Middleman のカスタムテンプレートは自分が作業を始める時に用意する Asset(CSS, JavaScript), レイアウト, 共通の値の定義(タイトル, keyword, description等々サイトで使うもの), さらには

  • 1