このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

CSSライブラリ化? Sass(scss)のインストール 使用方法 mac

CSS3

2011.08.31

この記事は最終更新日から1年以上が経過しています。

なんだか色々と出てきますよね。

もう、最近良く分かんないないです(笑)

ではSassのインストール、使い方を紹介していこうと思っております。

Sass公式サイト

http://sass-lang.com/

そもそも、Sassって何?って話なんですが、

SassとはCSS を生成するためのメタ言語です。

メンテナンス不能な状態に陥りがちのCSSをSass を使うことによって

上手い具合に構造化して記述することができます。

Sassという言語でcssを記述し、通常のcssとして吐き出すことが出来ます。

管理時は関数として扱い、使用する際に通常のcssと使用するイメージですかねぇ。

関数として扱ったり、

構造化して記述も可能。

1.Ruby

Sassを利用するには、Rubyが必要となってきます。

macにはRubyがインストールされてるため、インストールの必要はありません。

が、上手くいかない事もあるので、念のため。

※ Ruby(プログラミング言語)※ RubyGems(Rubyのライブラリを簡単にインストールするプログラム)

Rubyが入っているかは、ターミナルを起動し以下のコマンドでRubyのバージョンを確認出来ます。

$ruby -v

RubyGemsを最新にバージョンアップ

$sudo gem update --system

2.Sass インストール

Sassのインストールを行いたいのですが、

まず、Hamlのインストールを行います。

Hamlとは,簡単に正しい(X)HTMLを記述するためのマークアップ言語です。

インデントとCSSセレクタを用いた記述を行うことによって,少ない行数で正しい(X)HTMLを記述することができます。SassはそのHamlの一部として含まれています。

なので、まずHamlのインストールを行います。

$ sudo gem install haml

これでSassも機能するのかな。と思っていましたが、

Sassのコマンド打ってみましたところ、Sassが見つからねーよ。と。

$sudo gem install sass

こちらで無事インストール出来ることが出来ました!

3.Sass使用方法

ターミナルコマンド cdで作業用ディレクトリへ移動しましょう。

$cd Users/ほげほげ/~~

任意のディレクトリ

そこに.scssファイルを作成。

このファイルにscss(Sass)を記述していきます。

cssファイルを書きだす場合、以下のsassコマンドを入力すると、scssファイルからcssファイルの書き出しが可能です。

書き出し

$sass sample01.scss sample01.css

で、sample01.scssファイルから通常のcssの書き出しが出来ます。

毎度はさすがに面倒なので、

.scssが上書き保存されたら、cssも書きだすようにファイルを監視させます。

このように自動でcssファイルを(変換し)書きだしてくれます。

記述にエラーがあった場合、


このようにエラー表示があり、エラー箇所の行数も表示されます。

自動書き出し

$sass --watch sample01.scss:sample01.css

でOK。

フォルダ単位でも監視可能です。

$ sass --watch pathtofolder

また、別のディレクトリへ書きだすことも可能。

$sass --watch css/sass:css/compiled

また、生成するときのフォーマットも選択出来ます。

$sass --style expanded --watch sample01.scss:sample01.css

とすると、通常のCSSぽくなり

$sass --style compressed --watch sample01.scss:sample01.css

とすると、圧縮されたCSSファイルで書きだしてくれます。

4.Sass記述方法

Sass公式サイトのデモソースを参考に記述を行っていたのですが、

2011年8月26日にサイトの改修があったようで、デモソースが減少しております。(涙)

デモソースにあったカテゴリ別に自分なりでありますが、解釈しながら記述の説明をさせて頂きます。

カテゴリは大きく6種類に分けられていました。

  • Nesting
  • Parent References
  • Variables
  • Operations and Functions
  • Interpolation
  • Mixins

まずは『Nesting』。
書かれているソースから「構造化」ではないかと判断しました。
日本語翻訳では「巣篭もり」

『Nesting』


のように、親子関係の構造そのまま記述出来ます。

続いて、『Parent References』。

こちらは擬似要素、擬似クラスを記述するとき方法ではないかと判断しています。
日本語翻訳では「親参照」。

『Parent References』

続いて、『Variables』。

これはそのまま「変数」ですね。
CSSプロパティの値を変数に代入し、扱うことが可能です。

『Variables』

『Operations and Functions』

日本語翻訳では「操作と機能」。
最初に変数を宣言し、演算子を用いて値の変化と共にプロパティも変化する。
といったところでしょうか。

『Operations and Functions』

『Interpolation』

日本語翻訳では「挿入」。
一括で変換が可能といったところですね。

『Interpolation』

最後に、

『Mixins』日本語翻訳では「Mixins」変換されませんでした。
こちらは、プロパティのブロックで@mixinを用いて定義し、
適応させたいプロパティに@include で挿入するという、
なんともすばらしいものとなっております。

Comment

Related Article

CSS ファイル簡単生成。APBCSS ファイルジェネレーターツール「APB CLI」の使い方。

2017.06.18

「compass」をやめて、爆速「Libsass」に変えたら作業が超捗った件。

2016.06.11

「CSSが難しい。。」「CSSが面倒。。」 と言ったエンジニアさんにもオススメのCSS設計! 「APBCSS(Atomic Parts Base CSS)」が良い感じ!

2016.03.28

2016年は「AtomicDesign」を取り入れた「APB CSS(Atomic Parts Base CSS)」で迷わず、簡単、拡張性持った CSS設計を!

2016.01.02

CSS3アニメーション をスマートフォンサイトで 綺麗に作りたいあなたへ

2014.08.25

フロントエンド パフォーマンス向上について まとめ

2014.01.07

前回に続いて、SPEC vol.4で3位受賞しました。

2012.07.28

前回に続いて、SPEC vol.4に参加しております。

2012.07.15

CSS3のみでAjax風 ページネーション(ページ送り) JavaScript無し

2012.06.03

CSSでフォームパーツ(input,checkbox,etc…)をカスタマイズ

2012.06.03

CATEGORY LIST

LATEST NEWS

iPhoneXで、ubuntuを動かす。

サーバー

2018.06.09

仮想通貨(暗号通貨)の作り方 その2 (Gethの使い方)

暗号通貨、ブロックチェーン

2018.05.20

$PAC (パックコイン)Macでマスターノードを建てる方法

暗号通貨、ブロックチェーン

2018.05.14

ついに「ウェブ帳」リニューアルしましたぁ!!!(PC 版)

イベント

2018.05.07

Raspberry Pi 3 Model B+ 2018 ニューモデルを購入!!

RaspberryPi

2018.04.23

仮想通貨(暗号通貨)の作り方 その1

暗号通貨、ブロックチェーン

2018.04.09

iPad Proで開発を行いたい。

iPad

2018.03.29

CPU使用しすぎて、Conohaからサーバーシャットダウンされた件。

tool

2018.03.28

春の大掃除。VHSに続いて、カセットテープもデジタル化!microSD保存 MP3変換プレーヤーを使ってみた。

tool

2018.03.27

Macで、VHSダビング I-O DATA ビデオキャプチャー 「アナレコ」を使ってみた。

tool

2018.03.27

ご報告

イベント

2018.02.02

明けましておめでとうございます。(遅め

イベント

2018.01.16

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US