タグ

scssに関するpopup-desktopのブックマーク (3)

  • Dreamweaverで覚える最新Web開発ワークフロー: Sass編 | Adobe Blog

    Dreamweaver CC ベータ版で追加された CSSプリプロセッサー CSSプリプロセッサーとは、SassなどのCSSメタ言語(CSSの元になるファイル)からCSSファイルにコンパイル(変換)するプログラムのことです。従来、CSSメタ言語をCSSにコンパイルするには、ターミナルやSassをコンパイルするアプリケーションに頼らならければなりませんでした。 Dreamweaverベータ版では、SassやLessのコンパイルに必要な環境が自動で構築されます。Windowsでは面倒なRubyなどの環境構築もDreamweaverをインストールするだけで整います。CSSメタ言語のコンパイルはファイル保存のタイミングで自動的に行われ、コマンドプロンプトなどを使わずに、CSSが生成されます。 記事では、Sassを中心にDreamweaverベータ版の関連機能の使い方を取り上げます。 Sass自体

    Dreamweaverで覚える最新Web開発ワークフロー: Sass編 | Adobe Blog
  • コーダー必見、SCSS・Compassで開発効率アップ|Retina Display対応CSS Sprite編 | DevelopersIO

    コーダー必見、SCSS・Compassで開発効率アップ|Retina Display対応CSS Sprite編 はじめに 特に寒い今日この頃ですが読者の皆様は元気にお過ごしでしょうか? 2月のリア充イベントといえばバレンタインですね(企業戦略)。バレンタイン用のチョコを販売するお店も増えてきました。 弊社は秋葉原という立地ですが意外なことに既婚者が多いので「リア充爆発しろ」と嘆く男性は少数のようです。 ちなみにビターチョコが好きです。 題 今回は少し前に執筆した「コーダー必見、SCSS・Compassで開発効率アップ|便利なCSS Sprite実装編」を発展させてSCSS・CompassでRetina Displayに対応する方法を紹介します。 事前に必要な知識 この記事では、以下の事前知識が必要になります。 記事中でも解説を挟みますが、詳しくは解説で案内しているページを参考にしてくださ

  • (S)CSSの書き方メモ

    HTML5時代に向いていそうな(S)CSSの書き方を模索しています。SCSSで書くのでモジュール式に色々分割した方が良さそうだな……とか色々試してますが、なかなかこれ! というものに辿りつけません……。ということで、ここ最近の書き方をメモがてら晒してみる試みです。 実際にこのサイトで使っているSCSSファイルを抜粋しつつ列記していきます。 style.scss style.cssになるSCSSファイルではCSSは書かないようにします。ただし例外としてCSS文法での@importルールはその必要性からここに書きます。Webフォントなんかで使いますね。それ以外はSCSSの@importでモジュール化した各種SCSSファイルを読み込んでいきます。 @import url("http://fonts.googleapis.com/css?family=Pacifico"); @import "va

    (S)CSSの書き方メモ
  • 1