忍者ブログ

World of granshe.

HTMLやCSS、JavaScriptに関する話題を中心に、Web制作について知ったこと、覚えておきたいことをメモしておく個人的スペースです。
[178] [177] [176] [175] [174] [173] [172] [171] [170] [169] [168

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

わたしの作業環境:Sass&Compass編

お疲れ様です、完全社畜と化しております。
でもそれには理由があって、今後のために「今」必要だという、自身の判断でやっています。
なので、今までのキャリアの中では、仕事量に比べて、精神的には非常に前向きに仕事ができてます。

ということで、ネタとしては今さら感満載ですが、
最近作業環境をガラッと?変えました。
今度社内勉強会に向けてまとめようと思ってるので、事前にここに書いてみます。

一応サブタイトルとして
「Sass&Compass+Sublime+LiveReload」ってついてまして(自分の中で)、
3本立てでお送りする予定です。

時間がなかったので、とりいそぎSass&Compassから。

Sass&Compass

今回の隠れサブタイトルの中で最初に導入したものがコレです。
最初は、「CSS3のprefixをつけてくれる便利なやつ」だと思ってたのですが、
それだけじゃない。
そして今も、きっとこんなもんじゃない。まだ使い切れていない何かがある。と思ってます。

ちなみにSassとCompassインストールしている前提で、自分がどういう機能を使っているのかを書いています。
自分は下記サイトを見てインストール含め基本的なところを学びました。

前準備

自分はいつも下記の指定を最初にしています。

@import "compass"; // compassを使うときの指定です。たいてい使います。
$experimental-support-for-svg: true; //IE9でgradientしたいときは必ず。

機能1:入れ子

個人的には最近はあまり使わないですが、CSSを深い入れ子にするときにSassは便利です。

Sassなし

#container{
max-width:960px
}
#container .hdg01{
font-size:
}
#container .txt01{
line-height:1.5;
}
#container .txt01 a{
color:#9cf;
}

Sassあり

#container{
max-width:960px;
  .hdg01{
  font-size:1.25em;
  }
  .txt01{
  line-height:1.5;
    a{
    color:#9cf;
    }
  }
}

Sassではこんな感じで書けます。

入れ子でCSSを書くのがあまり好きではないのと、
インデントがあまり好きではないので、最近はあまり使わなくなりました。
(インデントしなくても書けるんですが、読みづらい

機能2:import

一昔前に、@importでCSSを1ファイルにインポートするのが流行ってませんでしたか?
私もやってました。
その後、@importだとパフォーマンスが悪いということで、CSSは@importせず、直接1ファイルで読み込むのが主流になりました。

私自身、大きなサイトを作ることがあまりなかったので、スタイルを1ファイルでさせることに対して、苦労はほとんどなかったのですが、
最近、CSSを大量に書く機会が増え、コードを探しにくくなってきました。
そこでimport。

この記述を書くと、sassが勝手にCSSファイルをまとめて結合してくれます!素敵!

  1. 結合したいファイルの頭にはアンダースコア「_」をつけます。
    (CSSファイルとして出力されることはなくなります)
    basic.scss(出力ファイル)のほかに、_base.scss、_modules.scss を作ります。
  2. basic.scssに下記の記述をします。(アンダースコアは除いてOKだそう。
    @import "base", "modules";
  3. 書き出すと、basic.css内に、_base.scss、_modules.scssの内容が出力された状態になります。

管理は複数ファイルだけど、最終的に出力されるCSSは一つになるので、便利。
複数人で設計をする際も、マージの心配をせず作業することができますしね。

機能3:Mixin

良く使う機能をmixinとして保存しておくことができます。

たとえば自分が良く使うのは、これ。

@mixin iAbs {
content: "";
display: block;
position: absolute;
}

擬似要素をbefore&afterでアイコンをつけるとき用のmixinです。

IE8以上対応の案件ですと、私はsprite+before&afterを多用します。
毎回登場するたびにスタイルを書くのが苦痛だったのですが、mixinを使うと指定が楽にすみます。

Mixinなし

.xxx:before{
content: "";
display: block;
position: absolute;
top:10px;
left:0;
}

.xxx:after{
content: "";
display: block;
position: absolute;
top:50%;
right:0;
}

.ttt:before{
content: "";
display: block;
position: absolute;
top:10px;
left:10px;

記述場所がくっついていればいいんですが、いろんな場所で使ったりするので、コピーしてくるのが大変です。
そこで、mixinを使うと、こうなります。

@mixin iAbs {
content: "";
display: block;
position: absolute;
}

.xxx:before{
@include iAbs;
top:10px;
left:0;
}

.xxx:after{
@include iAbs;
top:50%;
right:0;
}

.ttt:before{
@include iAbs;
top:10px;
left:10px;
}

楽ですね!

他にも、色をmixinでストックしておけば、
サイトで使われている配色を少し変えたいときも、1箇所に色の指定をまとめておけば、
置換することなく、変更することができて便利なのです。

機能4:自動prefix

Compassを使うと、自動でprefixを生成してくれます。
現状、自分が使っているのは下記。です。

@include box-sizing(border-box);
@include background-image(linear-gradient(#efefef 0%, #dfdfdf 100%)); 
@include rotate(-45deg);

機能5:Sprite

CompassにはSpriteを簡単に生成してくれる機能があります。
一度使うと、これなしでは生きていけなくなります。

使い方(設定
$icon-spacing:2px; // 生成されるsprite画像の、画像同士のスペースです。
$icon-sprite-dimensions:true; // sprite内のアイコンの幅・高さを出力します。
@import "icon/*.png"; // iconフォルダに入ったpng画像をsprite化する、という指定です。

Sass側で、画像の出力先を指定することができます。
Sassのconfig.rb内で

images_dir = "shared/images"

と記述していた場合、sprite画像は「shared/images」配下につくられます。

その出力先のフォルダ内に、sprite用の任意の名前のフォルダを作ります。
上の例でいくと、「icon」というフォルダです。

@import "icon/*.png"

sass側の画像の出力先「shared/images」からの相対パスを記述します。

このフォルダの名前は任意で変更できます。sprite画像を複数作る場合は、下記のように指定します。

$icon-spacing:2px;
$hdg-spacing:2px;
$icon-sprite-dimensions:true;
$hdg-sprite-dimensions:true;
@import "icon/*.png";
@import "hdg/*.png";

これらの指定をして、iconフォルダに、spriteしたい画像を入れていきます。

これをコンパイルすると、自動でに結合してくれます。
結合したファイルの名前は、フォルダ名と同じになります(この例の場合、icon.png)

なお、普通にspriteを作ると、ランダム文字列が生成されます。(キャッシュ対策?)
これを消したい場合は、下記のような指定をconfig.rbに追記します。

# Make a copy of sprites with a name that has no uniqueness of the hash.
on_sprite_saved do |filename|
  if File.exists?(filename)
    FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')
    # Note: Compass outputs both with and without random hash images.
    # To not keep the one with hash, add: (Thanks to RaphaelDDL for this)
    FileUtils.rm_rf(filename)
  end
end
 
# Replace in stylesheets generated references to sprites
# by their counterparts without the hash uniqueness.
on_stylesheet_saved do |filename|
  if File.exists?(filename)
    css = File.read filename
    File.open(filename, 'w+') do |f|
      f << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png')
    end
  end
end

また、画像をひとつにまとめてくれるだけじゃなく、CSS側での指定も自動で行ってくれます。

Sassの記述

nav a:after{
content: "";
display: block;
position: absolute;
top:10px;
left:0;
@include icon-sprite(arrow1);
}

// ※さっきのmixinを記述すると、もっと簡単に。
nav a:after{
@include iAbs;
top:10px;
left:0;
@include icon-sprite(arrow1);
}

出力されるCSS

nav a:after {
  background: url('/shared/images/icon.png') no-repeat;
}
nav a:after{
content: "";
display: block;
position: absolute;
top:10px;
left:0;
background-position: 0 -39px;
height: 11px;
width: 11px;
}

画像ファイルが増えても、background-positionを再計算してくれます。
便利ですね!

こういうのは実際に動いてるの見せないと、なかなかやってみようかなっていう気にならないですよね。実際にはライブコーディングでやれたらなぁと思ってます。

別に、「みんなこれ使えよ!」ってわけじゃないですけど、こーいう便利ツールを知ってると、楽しくなるよ、ということは伝えたいです。

PR
この記事にコメントする
お名前
タイトル
文字色
メールアドレス
URL
コメント
パスワード   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
プロフィール
名前: ゆーり
職業: コーダー(模索中
趣味: Web制作
自己紹介: 某Web製作会社の入社5年目のマークアップエンジニア。専門はHTMLとCSSとMT(自称)。
カレンダー
02« 2017/03 »04
S M T W T F S
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
ブログ内検索
忍者ブログ [PR]