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

flexショートハンドに関して

実務でflexをちょこちょこ使うようになりました。 やはりfloatなどで組むことと比べると圧倒的に楽ですね・・・ んで、あまり理解してなかったショートハンド要はgrow,basis,shinkに関し …

no image

backgroundやbox系のプロパティ

cssのbackground-imageについてちょっとまとめ。urlとかrepeatとかはとりあえずぬきで Contents1 背景画像の位置 background-postion2 背景画像のサイ …

no image

flexについて

CSSのflexをちょこちょこ使ってます。 以前下記リンクで超簡単なサンプルは動かしましたが、実践的なことは何もやっていませんでした。 css flexbxについてどんなことができるのか 使って思った …

no image

compassについて

sassをベースにしたフレームワークがcompassです。 Contents1 compassとは?2 使用方法3 参考リンク compassとは? sassの記法をベースにCSSファイルの作成が可能 …

no image

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

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