簡単に、まずは手を動かしてsassを使ってみる

sassは、覚えるとかなり効率的にコーディングが進むらしい…とは聞いていましたが、1から勉強しなくてはいけないと思いなかなか手が出せずにいました。
ここでは、”sassとは何か” や “sassに必要なコンパイルとは?” などの説明はすべて割愛し、とにかくまずはやってみよう!の説明をメモします。

Contents

コンパイラー「prepros」のダウンロード
preprosの設定
Projectを追加する
早速sassを用意してみます
早速sassを記述してみる
cssフォルダにstyle.cssが自動生成されている!!
css/style.cssをindex.htmlなど各ファイルで読み込む

コンパイラー「prepros」のダウンロード

prepros公式より自分のPCに合わせたファイルをDLします。

preprosの設定

ダウンロードが完了し起動させると、preprosの色が選択できる設定画面になるので「Dark」or 「Light」を選択します。

Projectを追加する

・prepros画面左下にある+マークをクリックするとフォルダを選択する窓が立ち上がります
・開発で使用するフォルダを選択します
・今回デスクトップのtestというフォルダを選択したところ、画面上に新しく「test」フォルダが追加されました

早速sassを用意してみます

・該当のフォルダ(デスクトップ > test)にsass/style.scssを作成します。まずは中身は空っぽでも大丈夫です
・また同じ階層にcss/フォルダを空っぽで用意します
・prepos画面に戻り、Refresh Projectすると、フォルダとpreposが同期されます

早速sassを記述してみる

・先ほど用意したsass/style.scssを開き以下のように記述し保存してみます
・私のPCの場合、右下に緑の☻顔文字でsuccessのアラートがあがりました

@charset "utf-8";
/** SETTING **/
$sp-width: 768px;
$color: #000066;
$font-size: 16px;
/** //SETTING **/
body{
  color: $color;
  font-size: $font-size;
}
.header {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden;

  @media(max-width: $sp-width) {
    width: 100%;
  }
  
  &-logo {
    float: left;
    width: 20%;
  }
  &-nav {
    width: 80%;
    float: left;
    text-align: right;
  }
}

@charset "utf-8";

/** SETTING **/

$sp-width: 768px;

$color: #000066;

$font-size: 16px;

/** //SETTING **/

body{

color: $color;

font-size: $font-size;

}

.header {

width: 1200px;

margin: 0 auto;

overflow: hidden;

@media(max-width: $sp-width) {

width: 100%;

}

&-logo {

float: left;

width: 20%;

}

&-nav {

width: 80%;

float: left;

text-align: right;

}

cssフォルダにstyle.cssが自動生成されている!!

・先ほど空っぽで用意しておいたcssフォルダの中に、自動でstyle.cssができていました
・中身を覗くとこんな感じに↓

/** SETTING **/
/** //SETTING **/
body {
  color: #000066;
  font-size: 16px; }

.header {
  width: 1200px;
  margin: 0 auto;
  overflow: hidden; }
  @media (max-width: 768px) {
    .header {
      width: 100%; } }
  .header-logo {
    float: left;
    width: 20%; }
  .header-nav {
    width: 80%;
    float: left;
    text-align: right; }