求職者支援訓練Webデザイン Webサイト制作科 白描

求職者支援訓練Webサイト制作科 補足メモ Web白描

初心者用 Sass 使用時の設定

Sass(サース)

f:id:web-0220:20190217141012p:plain

sass-lang.com

Sassの記法
  1. 「SASS」記法
  2. 「SCSS」記法
なぜSassで記述するか
  • コーディングの速度がアップする
    • コードがシンプルになる
    • 変数が使える
    • コードを使い回しができる
    • if文やwhile文が使える
    • 四則演算が使える
  • メンテナンスしやすくなる
Sassの導入方法

Prepros

  • GUIで操作できるSassのコンパイラ
  • 授業では、Preprosを使っていきます

prepros.io

f:id:web-0220:20190217142241p:plain

起動

f:id:web-0220:20190225165806g:plain

初期設定

f:id:web-0220:20190225170110g:plain

f:id:web-0220:20190225170412g:plain

f:id:web-0220:20190225170614g:plain

f:id:web-0220:20190225170825g:plain

f:id:web-0220:20190225171004g:plain

f:id:web-0220:20190225171227g:plain

f:id:web-0220:20190225171455g:plain

管理フォルダーを設定
  • 管理したいフォルダーを、「ドラッグ&ドロップ」します

f:id:web-0220:20190217170123p:plain

Compile(コンパイル
  1. 管理フォルダー内に「scss」フォルダーを作成
  2. 「scss」フォルダー内に「style.scss」を作成

f:id:web-0220:20190225172425g:plain

  • 保存をすると、自動的に「css」フォルダーと、その中に「style.css」が作成されます

f:id:web-0220:20190225172700g:plain