お問い合わせはこちら
  • トップ
  • はじめに
  • 業務案内
    • 業務案内
    • 使用システム・ソフトウェア
  • ポートフォリオ
  • 業務の流れ
  • ブログ・お知らせ
    • ブログ
    • お知らせ
  • 私たちについて
    • エムティ・デザインについて
    • 免責事項など
メニュー
  • トップ
  • はじめに
  • 業務案内
    • 業務案内
    • 使用システム・ソフトウェア
  • ポートフォリオ
  • 業務の流れ
  • ブログ・お知らせ
    • ブログ
    • お知らせ
  • 私たちについて
    • エムティ・デザインについて
    • 免責事項など

sassを使う上で重要なことを書いてみました

  • 2013-02-13
  • 10:11
  • Webサイトデザイン

さて、先日、Coda2でsassを使う方法をアップしました。
それから本格的にsassを触り始めたのですが、その中でちょっと気付いたことがあります。

Coda2でsassを使えるようにしてみる

sassを触り始めるとcompassまで使いたくなる

当初は「まあ最初だし、sassだけ使えればいいかな」と思っていましたが、sassの使い方を調べていると、compassの情報が自然と目に入ってきます。
compassはsassを更に使いやすくしたもので、mixinというライブラリ的な機能が提供されています。
例えば、divタグに角丸を適用したければ
[css]@import "compass/css3/border-radius";
#box {
width:240px;
height:300px;
background-color:#E5E6E9;
@include border-radius(10px);
}[/css]
で角を10pxで丸めた角丸ボックスのCSSに変換されます。
[css]変換後
#slogo {
width: 240px;
height: 300px;
background-color: #E5E6E9;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px; }[/css]
また、自分でmixinは設定できるため、定型化されたコードなどをmixinで設定しておけば、変更する時にいくつもコードを変更する、という手間が省け、なおかつコードの視認性も上がります。

なので、結局はCodeKitが使いたくなる

Mac OS Xユーザに限ったことですが、Macの環境でいちばん便利なsass/compass/less環境は「CodeKit」だと言われています。
「CodeKit」は$25と有料ですが、これ1本でsass/compass/less/CoffeeScriptなど、様々なCSS/JS環境のフレームワークをコンパイルしてくれます。
更に、「CodeKit」の機能でよく取り上げられるのが「イメージの圧縮機能」です。私は正直、「ImageOptim」の方が優れていると認識しているので、使う機会は少ないかと思いますが、画像まで含めて一気に省サイズ化出来るのはとても便利だと思います。

事前にサイトデータの構造化が必要になりそう

sassを利用する大きな目的の一つが、CSSの構造化、だと思います。
同じコードはまとめて記述したり、事前に使いたい機能に合わせてmixinを読み込む・設定する、ということをやっていく必要があります。
が、どちらかといえば、行き当たりばったりでコードを書いていた人の場合は手間ばかり増えて、効率が上がらないよ、ということにもなりかねません。
なので、この辺りで一度、考え方の転換が必要になりそうです。
「コーダ」と呼ばれる人たちや、一人でサイト製作をやっているような人たちにとっては、うまく使いこなせばかなりの省力化になるであろう「sass/compass/less」というCSSフレームワーク(と呼んでいいのでしょうか?)。これから大切な技術・・・というか、考え方の一つになりそうです。
[tmkm-amazon]4883378578[/tmkm-amazon]
[tmkm-amazon]4777517349[/tmkm-amazon]

Share this post

Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on pinterest
PrevPreviousCoda2でsassを使えるようにしてみる
Next今、WordPressで作ってるサイトで使っているプラグインなどを紹介してみるNext

お知らせ

2021年4月~5月の休業日及びスケジュールについて

2021年3月22日
Read More »
No Image

当方の屋号は「エムティ・デザイン」もしくは「MT-Design」です

2021年3月1日
Read More »
Sunset Flares.

2021年1月~3月の休業日及びスケジュールについて

2021年1月21日
Read More »
christmas, snow, snowman

2020年末~2021年初のお休みについて

2020年12月1日
Read More »
No Image

2020年11~12月の休業日について(年末年始除く)

2020年10月27日
Read More »

ブログ

No Image

動画編集をするようになってFFmpegが便利なことに気付いたのでコマンドをメモしておく

2021年1月12日
Read More »
No Image

税込44,000円以下で買えるグラフィックボードを探してみる

2021年1月6日
Read More »

明けましておめでとうございます!

2021年1月1日
Read More »
No Image

2020年の総括とまだ見えない2021年に向けて

2020年12月30日
Read More »

【終了】動画編集したい人、Vegas Proが安くなってますよ/2020.12.14まで

2020年12月8日
Read More »
カテゴリー
  • コラム
  • 製作
    • Webサイトデザイン
    • サーバ
    • プログラミング
    • WordPress
    • Webサイト運営
    • 製作プラグイン
    • Elementor
  • ハードウェア
    • Macintosh
    • スマホ・タブレット
    • カメラ
    • ガジェット
    • Windows
  • ソフトウェア
  • サービス
  • 本
  • イベント
  • お店・旅行
  • プレスリリース・ニュース
  • 古い記事
  • 未分類

CONTACT

 

お問い合わせ

Webサイト製作、デザイン、WordPressなどに関するご相談、ご依頼などお待ちしております。
お問い合わせはこちら
logo_white

Information

エムティ・デザインはフリーランス(個人事業主)として主にWeb制作を行っています。
Webサイトのコンセプトワーク、デザイン、文章作成・修正から実際のサイト構築、写真の撮影やサーバの構築・管理に至るまで全てをワンストップでご提案できることが一つの大きな特徴です。

Contact Information

福岡)
〒810-0001 福岡県福岡市中央区天神2丁目3-10
   天神パインクレスト716
長崎)
長崎県大村市(個人宅のため住所非公開)

Phone 050-5857-5623
オンラインミーティング対応 :
 Zoom / Skype / Discord / Google Meetなど

Copyright (C) MT-Design , All rights reserved.

NEWS

2021年4月~5月の休業日及びスケジュールについて

2021年3月22日

当方の屋号は「エムティ・デザイン」もしくは「MT-Design」です

2021年3月1日

2021年1月~3月の休業日及びスケジュールについて

2021年1月21日
arrow