oui-log

2019/06/24

Sassのmapを使って同じようなCSSを一括作成

mapとは、Javascriptでいう連想配列のようなもので、キーと値をセットで定義することができる変数です。普通の変数と違って何がよいかというと、ループして同じような処理を自動でできるようになります。

たとえば色違いの項目をたくさん作る必要がある場合、Sassに書くルールは1つでよく、パターンを増やすにも変数を1行増やすだけでいいので管理しやすくとても楽。

$map: (
  1: #ce5a24,
  2: #2f99ac,
  3: #9e272d
);

.hoge{
  &__item{
    @each $n, $color in $map{
      @at-root #{&}:nth-child(#{$n}){
        background-color: $color;
      }
    }
    }
}

この例でいうと、$nにキー(変数の左側)、$colorに値(変数の右側)が代入されます。この2つはわかりやすい任意の文字列で大丈夫。

$map: (
  hokkaido: #6cb041,
  tohoku: #d98d66,
  kanto: #6537a8,
  kansai: #e43474,
  chushikoku: #5d94a4,
  kyushu: #a63914
);

.section{
  @each $key, $color in $map{
    @at-root #{&}-#{$key}{
      color: $color;
      background-image: url(/path/to/bg_#{$key}.jpg);
    }
  }
}

mapに限った話ではないですが、Sassでは変数を#{$key}と囲うことで、ファイルパスやセレクタに使うこともできます。

2018/10/11

簡単なカラムmixin

サムネイルやカードを並べるのによく使うやつです。

@mixin col(
  $column-count, // カラム数
  $gutter: 10px, // 間の余白
  $inverse: false, // true->右から左へ、false->左から右へ
  $selector: '> *' // 子要素のセレクタ
){
  @include clearfix;
  $direction: if($inverse, right, left);

  #{$selector}{
    // 余白を一旦リセット
    margin-left: 0;
    margin-top: 0;
    float: $direction;
    @if $gutter != 0{
      $margins: $gutter * ($column-count - 1);

      width: calc((100% - #{$margins}) / #{$column-count});
      // 左右の余白
      + *:not(:nth-child(#{$column-count}n+1)){
        margin-#{$direction}: #{$gutter};
      }
      // 上下の余白
      &:not(:nth-child(-n+#{$column-count})){
        margin-top: #{$gutter};
      }
    }
    @else{
      width: calc(100% / #{$column-count});
    }
  }
}
2018/04/23

gulp-pleeeaseで依存パッケージのCSSをimportする

Normalize.cssをnpmでインストールして、それをsassでimportしようとしたけど、探してもそのものズバリな記事が出てこなかったのでメモ。

パッケージをインストールして、

$ npm install --save-dev normalize.css

gulp-pleeeaseのオプションにimport: 'node_modules/'を追加する。

var pleeease = require('gulp-pleeease');
// 中略
.pipe(pleeease({
  import: 'node_modules/'
}))

あとは、node_modules/からの相対パスで読み込みたいCSSファイルをimportするだけ。

@import "normalize.css/normalize.css";

追記(2018.5.3)

gulp-sassでも問題なかった…。一応メモ。

.pipe(sass({
  outputStyle:'compressed',
  includePaths: [
    'node_modules'
  ]
}))
2018/03/23

サンライズ瀬戸でSideM3rd仙台遠征に行ったレポ

はじめに

SideM3rdライブの宮城公演、シリアルが1つあったのでダメ元で応募してみたら当選してました(2daysのうち2日目だけ)。ありがたいことに1日目と相互同行していただける方が見つかり、晴れて両日現地参加できることに。その節は本当にありがとうございました…!

楽しかった思い出を振り返りつつ、備忘録がてら旅程を書き残しておきます。

Read more

1234