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

画面の制御フローなど

複雑な帳票系アプリではよくあると思うのですが、ある入力値が複数の場所から影響を受けており、制御がなかなか難しいときなどがあります。 例として クリアボタンなどでクリアされる 他のプルダウンなどで影響を …

no image

backgroundやbox系のプロパティ

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

no image

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

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

no image

CSSで背景画像の出力

最近はやりのWEBデザインでよくある、大きな背景画像のなかにユーザー名とパスワードを入力させるような画面の作成方法について。

基本的な …

no image

object-fitによる画像比率を保ったセンタリング

CSSでレイアウトを組むときにネックになるのが画像のレイアウトです。 と言うのも可変要素であり、幅を制御するのが難しかったりします。 参考リンク メインで使う画像のcssについて まあ縦長とか横長とか …

アーカイブ