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

デザイ二ングインターフェイスのまとめ

デザイ二ングインターフェイスを今まで読んで実務にすぐ生かせそうな&ポイントとなりそうな箇所のまとめ Contents1 ユーザーを理解する2 ユーザーの行動パターン3 ポジショニング(情報の配置) 4 …

no image

フォーム入力のポイント

以前のエントリーにならってさらにフォーム入力のデザイン上のポイントなどを。 Contents1 選択肢は横よりも縦で2 エラーがすぐにわかる入力欄を3 会員登録ではメリットをわかりやすく4 必須項目は …

no image

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

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

no image

CSS floatについて

以前もちょっと書きましたが、CSSのfloatについて。 http://skill-up-engineering.com/?p=1708への追記 親から見るとfloatした子供は存在しない状態 flo …

no image

Bootstrapまとめ 主に段組み関連の知識について

自分はデザインセンスが壊滅的なので、Bootstrapにいろいろと頼っております。 最初は仕事でちょこっと使う機会があり、見よう見まねでやっていましたが、理屈がわからないと応用がきかないこともあるため …