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

Archives Details

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

CSS

2011.09.05

この記事は最終更新日から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スプライトを コマンドで生成 「Glue」の使い方

2014.08.23

jsdo.it企画 CSSで必殺技に参加しています。

2011.12.07

CSS圧縮 webサービス css compressor

2011.11.26

同一クラスで異なるレイアウト CSS 隣接セレクタ

2011.10.26

css 文頭のみ インデントを適応させない

2011.10.19

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

2011.09.05

IE6 クリアーフィックスが効かない時

2011.06.25

CSS ブラウザの縦幅に合わせレイアウト調整

2011.06.05

css リキッドレイアウト スマートフォンでも利用化

2011.02.23

CSSとはなんぞや? (スタイルシート物語)

2010.11.25

CATEGORY LIST

LATEST NEWS

Ubuntu 18.04 LTSで OpenGL開発

ubuntu

2019.05.20

MacOS Mojave (10.14.4)の Xcode に、過去のMacOSのSDKをインストール

C++

2019.05.19

クローンソフトの「EaseUS Disk Copy」を使って、OSのバックアップを取ってみた。

tool

2019.05.06

Rails5 gemでmysql2が インストールできない

Ruby

2019.05.05

平成最後のお買い物!!「Logicool MX Master 2 Wireless Mouse」と「K780 マルチデバイス BLUETOOTH® キーボード」で快適PC生活。

ubuntu

2019.04.27

Amazon 87時間のビックセール タイムセール祭りで購入したもの

イベント

2019.04.23

Androidに Linuxを簡単にインストールするアプリ「UserLAnd」

Linux

2019.04.16

SPAサイトでの認証認可 JWT✗Rails5✗Nuxt.js

JavaScript

2019.03.24

CentOS MySQL(MariaDB) を バージョン10.3に yumでアップデート

MySQL

2019.03.22

Ubuntu 開発環境構築まとめ

ubuntu

2019.02.25

Nuxt.js と auth-module (@nuxtjs/auth)で、JWT(JSON Web Tokens)& OAuth 認証 ログイン

JavaScript

2019.02.21

HerokuでRailsをビルド buildpack、Rubyバージョンでエラー

エラー

2019.02.13

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

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

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

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

FOLLOW US