タグ

CSSとsassに関するkyotawebのブックマーク (6)

  • Your Friendly Web Development Companion

    Your Friendly Web Development Companion Prepros compiles your files, transpiles your JavaScript, reloads your browsers and makes it really easy to develop & test your websites so you can focus on making them perfect.

    kyotaweb
    kyotaweb 2013/08/27
    Windowsコンパイラ最強?
  • 「Compass」、基礎から応用まで! | 株式会社LIG

    こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません! はじめに結論を言うと、CompassでCSSを書くと 早い! 見やすい! メンテしやすい! コード量がぐっと減る! 一度使い出したら最後、もう元には戻れない! 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず! 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください! Compassとは? Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh

    「Compass」、基礎から応用まで! | 株式会社LIG
  • コーディング速度を3倍早くするSass(Scss)のフレームワーク”Compass”が本当に便利 |https://wp.yat-net.com/name

    2012年 10月 31日 コーディング速度を3倍早くするSass(Scss)のフレームワーク”Compass”が当に便利 カテゴリ: Sass タグ:CodingSassScssコーディング効率化 \ CSSのメタ言語Sass(Scss)。これ使うと凄く便利でコーディングスピードが上がるんですが、これをより便利に使えるようにしたフレームワークのCompassがもの凄く便利なので記事にしました。赤い彗星みたいなタイトルになってますが、使いこなせばかなり早くなります。 1.Compassとは 2.インストール 3.初期設定 4.Sass(Scss)ファイルをCSSファイルに 5.実際に作る 6.参考文献 compassとは オープンソースのCSSオーサリングフレームワークです。Sassがベースになっており、mixinで予めベンダープレフィックスが定義されていたりと、Sassをより便利に使え

    コーディング速度を3倍早くするSass(Scss)のフレームワーク”Compass”が本当に便利 |https://wp.yat-net.com/name
  • 今さら聞けない?!Webディレクターの為のSass講座 : LINE Corporation ディレクターブログ

    こんにちは。ウェブサービス部の hamashun です。 今回は CSS を便利にする Sass (さっす)という技術を、ディレクター向けにご紹介します。 最初に結論:Sassとは? CSS の、コーディング効率やソースコードの保守性を向上させる技術が、Sass です。 まずは普通のCSSについて Sass のことを知るには、まずは CSS のことを知っておく必要があります。CSSを自分で書ける or 読める人は、この項は飛ばしてしまってかまいません。 p { color: red; } このソースコードは、ごくシンプルな CSS です。このソースコードの各部分を解説すると、次のようになります。 従って、上記のソースコードを日語にすると、「p要素(pタグ)内の、文字色を、赤にする」となります。 こうして見てみると、CSS の構文は、とてもシンプルであることが分かります。 CSS は、こ

    今さら聞けない?!Webディレクターの為のSass講座 : LINE Corporation ディレクターブログ
    kyotaweb
    kyotaweb 2012/07/20
    Sass便利だよなー。ブラウザでデフォルトで対応して欲しい。
  • Introduction to Sass and How to Setup with Mac + Coda

    2014年7月31日 CSS, 便利ツール 「Sass」って聞いたことありますか?すっごく簡単に言うと、CSSをもっと便利に・効率良く記述するためのものです。とは言え基的な書き方はCSSと同じなので、「新しいプログラミング言語」というより「CSSの新しい装備品」といったところでしょうか。一見難しく思えるかもしれませんが、慣れると「これなしではいられない!」とまで思えるSassの魅力と、Macでの設定方法はあまり見ないなーという事でMac+Codaでの設定方法も紹介します。 ↑私が10年以上利用している会計ソフト! Sassとは 日語では「サス」と読まれるようです。拡張子は「.scss」。今までのCSSに変数や計算式を使ったプログラミング風の書き方を加えた .scss ファイルを、変換(コンパイル)してCSSファイルを作成します。例えば「style.scss」のSassファイルを変換する

    Introduction to Sass and How to Setup with Mac + Coda
  • コーディングのスピードアップに最適な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
    kyotaweb
    kyotaweb 2012/01/13
    これは便利かも。変数やミックスインは、いいなー
  • 1