読者です 読者をやめる 読者になる 読者になる

勉強会メモ

教えていただいたことをメモ

SCSS

ターミナルからインストール

$ gem install sass

ちゃんと入ったかチェック

$ sass -v

今回はコンパイラとしてPrepesを使うことに。

他参考サイト:ほんとに無料?なくらい高機能なGUIコンパイラーPrepros【Win・Mac】 | Sou-Lablog

パーシャルを使うとコンパイルさせないようにできる(ファイル名の冒頭にアンダーバーをつける)。
importさせるファイルなどにつけるとよろしい。importは.scssを省略できる。

@import "mixins"; //元のファイル名はmixins.scss

今日教えてもらったのは入れ子、変数、mixinとinclude、extend(継承)、計算、コメントアウトの仕様の違い(//コンパイル時に消される。/**/コンパイルしても残る)、等々。

jade

まずはNode.jsをインストール

参考サイト1:MacにNode.jsをインストールする - Qiita 参考サイト2:Node.jsの設定でN/A version is not installed yet - 万年素人からGeekへの道

Gulpインストール
(-g でグローバルに入れないといけないっぽい?参考サイトは-g無しだったけど、-gを入れないと自分の環境では動かなかった。
ちなみにGruntはオワコンと言われた。)

$ npm install gulp -g

Jade コンパイラをインストール

参考サイト:軽量なマークアップ言語 Jade 入門 からの Gulp でコンパイルまで – Gulp で作る Web フロントエンド開発環境 #5 – NET BIZ DIV. TECH BLOG

$ npm i -D jade

Gulp 上で動かすために gulp-jade もインストール

$ npm i -D gulp-jade

上記参考サイトを少し付け足したり変更したりしたファイルを用意した

index.jade

doctype html
html(lang="ja")
  head
    meta(charset='UTF-8')
    title Hello, Jade!
  body
    h1 Hello, Jade!
    p これは Jade のチュートリアルです。

gulpfile.js

var gulp = require('gulp');
var jade = require('gulp-jade');
 
gulp.task('jade', function() {
    gulp.src(['./*.jade', '!./_*.jade'])
    .pipe(jade({
        pretty: true
    }))
    .pipe(gulp.dest('./dest/'));
});

ターミナルからgulp jade./dest/index.htmlが生成されている。

本日はここまで。記法等は後日。

その他

ファイル名が表示される箇所にフルパスが書かれていると捗ることに気がつく。
MacMac - Finderタイトルをフルパス表示にする方法 - PC設定のカルマ
SublimeSublime Text でタイトルバーにフルパスを表示させる設定 - Qiita