第15回 デザイン勉強会 Sassの基礎とインストール TIMING デザイン事務所 北村 崇 http://timing.jp info@timing.jp 13年2月16日土曜日
第15回 デザイン勉強会 2 Sassについて Sass =syntactically awesome style sheet シ ンタク ティ カ リ ー オ ーサ ム スタイル シ ー ト CSSに関数や変数等の計算式 つまりプログラム 要素を追加できる あ く まで C S S の 補 助 機 能 で あ って S a s s で サイ ト を表示できるわけではない 特 定 の エ ディ タ や オ ー サ リ ン グ ツ ー ル に 依 存 し な い の で D r e a m w e a v e r で も テ キ ス ト エ ディ タ で も 使う事が出来る 13年2月16日土曜日
第15回 デザイン勉強会 2 Sassについて メリット CSSの編集 記述が早くわかりやすくなる CSSの修正が楽になる 複数の人数で構築 管理する案件に特におすすめ デメリット SCSSファイルが増える 初期段階での勉強が結構大変で時間がかかる 13年2月16日土曜日
第15回 デザイン勉強会 3 Sassのインストール Rubyが必要 Mac 最初からRubyが入っている Windows RubyInstaller for Windowsをダウンロード http://rubyinstaller.org/ 13年2月16日土曜日
第15回 デザイン勉強会 Mac Codaの場合 3 Sassのインストール 1 ターミナルを起動する ア プ リ ケ ーショ ン ユ ー ティ リ ティ ー タ ー ミ ナル 2 Rubyのアップデート確認 kitamura-no-macbook-air-2: 自分のID$ sudo gem update --system Password:自分のパスワード 打ち込んで文字が出なくても 入力はされている Updating RubyGems Updating rubygems-update Successfully installed rubygems-update-1.8.25 Updating RubyGems to 1.8.25 しばらく待ってアップデート Installing RubyGems 1.8.25 完了のテキストを確認 RubyGems 1.8.25 installed 13年2月16日土曜日
第15回 デザイン勉強会 Mac Codaの場合 3 Sassのインストール 3 Sassのインストール kitamura-no-macbook-air-2: 自分のID$ sudo su sh-3.2# 表示されたら 続けて入力 gem install sass Successfully installed sass-3.2.5 1 gem installed Installing ri documentation for sass-3.2.5... Installing RDoc documentation for sass-3.2.5... sh-3.2# 最後まで表示 されたら完了 13年2月16日土曜日
第15回 デザイン勉強会 Mac Codaの場合 3 Sassのインストール 4 CodaにSassを入れる https://github.com/secca/coda-sass-plug-in ダウンロード SassPlug-in.zipを解凍 Sass.codapluginを開く 5 Sassを色をつける https://github.com/brajeshwar/sass.mode ダウンロード Sass.mode-master.zipを解凍し フォルダ名をSass.modeに変更する ユーザ名/ライブラリ/Application Support/Coda 2/Modes/ へSass.modeを入れる もし見あたらない場合は Finderの上部メニューから 移動 フォルダへ移動 を選び ~/Library/Application Support/Coda 2/Modes/ と入力するとフォルダが開きます 13年2月16日土曜日 完了
15