タグ

CSSとsassに関するtomtoma1025のブックマーク (2)

  • SCSSとCompassでおしゃれなCSSパーティクルを作ってみた - ICS MEDIA

    Webサイトを構築する際、角丸、グラデーション、アニメーション等、従来では画像やプログラミング言語を使わないと不可能だったデザイン表現が、CSS3を使うことで可能となりました。さらに、CSSの拡張言語であるSCSSや、SCSSのフレームワークであるCompassと組み合わせると、CSSによる表現の幅が広がります。今回は、CSSのみでのデザイン表現をテーマとし、SCSSやCompassの便利な機能を活用した幾何学模様の作り方をご紹介します。 別画面でデモを再生する ソースコード(SCSS) なぜSCSSやCompassを使うのか プログラミングを使って図形を描く場合、基的な四則演算や三角関数といった数学的な処理や、繰り返し文(for文)、条件分岐(if文)等が扱えると便利です。しかし、CSSではcalc()メソッドを使った簡易な計算しかできず、繰り返し文や条件分岐等は実装されておりません。

    SCSSとCompassでおしゃれなCSSパーティクルを作ってみた - ICS MEDIA
  • コーディングのスピードアップに最適なSassを使ってみた。環境構築から基礎的な記述までを紹介します。 |https://wp.yat-net.com/name

    2012年 01月 12日 コーディングのスピードアップに最適なSassを使ってみた。環境構築から基礎的な記述までを紹介します。 カテゴリ: Sass タグ:CodingSassコーディング効率化 CSSのメタ言語として登場したSass。去年から認知はしていたのですが中々手を出しておらず、年が開けて「やってみよう!」と思い起こして使って見ました。 Index 1.Sassとは 2.インストール 3.SassファイルをCSSファイルに 4.実際に作る 5.参考文献 1.Sassとは Sassがなんなのか知らない人も居ると思うので簡単に説明すると、CSSファイルを作成するために扱うプログラムのようなもので、直接CSSファイルを作成するのではなく、CSSよりもシンプル且つ構造化した記述でSCSSというファイルを作成し、そのファイルからCSSファイルに変換(コンパイル)します。 コンパイルされたフ

    コーディングのスピードアップに最適なSassを使ってみた。環境構築から基礎的な記述までを紹介します。 |https://wp.yat-net.com/name
  • 1