1. Home
  2. front-end

フロントエンド開発関係

  1. node.js のバージョンを切り替えて使う(nvm-windows)
  2. 開発前の下ごしらえ(npm init)
  3. npm コマンドを使ってパッケージをインストールする( node-sass をインストール)
  4. node-sass を使ってみよう( npx コマンドを使ったパッケージの実行)
  5. npm から node-sass を使う( package.json の scripts )
  6. npm コマンドまとめ
  7. ベンダープレフィックスを補完してくれる Autoprefixer

02.Visual Studio Code

  1. Visual Studio Code 日本語化
  2. 自動でブラウザの表示を更新してくれる拡張機能 Live Server
  3. Visual Studio Code で Sass をコンパイルする Live Sass Compiler
  4. VSCode の拡張機能 Prettier でソースコードを整形する

Sass

  1. Sassの基本
  2. 別の SCSS ファイルを読み込む @import
  3. Sass で変数を使用する
  4. Sass のコメント記述
  5. 「変数の値を書き換えませんよ」と宣言する !default
  6. 他で定義されたスタイルを継承する @extend
  7. 共通のスタイルを使いまわせる @mixin
  8. 親セレクターを参照する「 & (アンパサンド) 」
  9. 組み込み関数と独自の関数定義 ( @function )
  10. 条件分岐 @if , @else , @else if
  11. ループ処理( @for , @while , @each )
  12. Sass でリスト変数を使用する
  13. Sass でマップ(連想配列)を使用する

未分類

  1. SNS 等の公式アイコン(ロゴ)のまとめ( Facebook , Twitter, Instagram , Youtube ...)

bluenote by BBB