skillup

技術ブログ

デザイン

sassについて

投稿日:2017年9月9日 更新日:

以前ちょろっと勉強していたことはあるんですが、仕事で使うことになりそうなんで復習。

sassとは

一言でいうとCSSをプログラミングのように書ける言語です。具体的には下記のようなことができます。

  • 変数、配列や条件分岐、繰り返しなどを使うことができる
  • ネストによりCSSの階層構造や継承を表記できる
  • テンプレート化したものを読み込んだりなどもできる
  • もちろん生のCSSを使うこともきます。

cssも保守するの結構大変ですもんね・・

インストール&コンパイル

前提としてruby(とgem)がインストールされていないと動きません。

ruby(とgem)がインストールされていれば下記コマンドで一発インストールできます。

あとはsassの記法により、~.scssというファイルをつくり、下記コマンドで一気にcssファイルを作れます。

またnodeをインストールしたあと使うこともできます。

一般的な記法など

sample.scss

そして上記のファイルをコンパイルすると下記のようなcssができあがります。

sample.css

参考リンク

CSSの常識が変わる!「Compass」の基礎から応用まで!
※タイトルはcompassですがsassの説明も含まれています。

-デザイン
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

lessサンプル

lessのサンプル Contents1 lessファイル構成2 ソース3 注意点4 参考リンク lessファイル構成 header,footer sytle 変数 lib 関数 common head …

no image

data- HTML5のカスタムデータについて

HTML5のカスタムデータ属性について。 HTML5ではタグにdata-*とすることで任意の値を持たせることができます。 いまさら聞けない、HTML5カスタムデータ属性の基本と使いどころ 例として下記 …

no image

css animationの使い方、他スクロース量でのアニメーションなど

transitionとちょっと近いですがCSSでのanimationに関して。 HTML

CSS [crayon-5e84164e72 …

no image

ブラウザ上でのドラッグ&ドロップの処理

あるシステムから別のシステムにデータを移すとき、一般的にはCSVを使うことが多いかと思います。 今携わっているシステムもそうなのですが、CSVのどの項目を選ぶかを変更したいときってありますよね。 以前 …

no image

CSSのレイアウト例 その2 部分的な多カラムレイアウト

ナビのボタンや一覧のリスト項目などfloatを使ったいろいろなバリエーションについて。 例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザインの大原則」 …