Sass Lessのよく使うMixinメモ

よく使うMixinのメモ

※都度拡張させます

Scss/compass

フォントサイズ計算

PC用

@mixin fontSize($fontSize, $baseFontSize:14){
    font-size: percentage($fontSize / $baseFontSize);
}

レスポンシブ用（rem使用）

@mixin fontSize($size, $base: 14) {
  font-size: $size + px;
  font-size: ($size / $base) * 1rem;
}

行間計算

@mixin lineHeight($lineHeight, $baseFontSize:14){
    line-height: percentage($lineHeight / $baseFontSize);
}

ポジション

@mixin absolute-top-left($top: 0, $left: 0) {
  position: absolute;
  top: $top + px;
  left: $left + px;
}
@mixin absolute-top-right($top: 0, $right: 0) {
  position: absolute;
  top: $top + px;
  right: $right + px;
}
@mixin absolute-bottom-left($bottom: 0, $left: 0) {
  position: absolute;
  bottom: $bottom + px;
  left: $left + px;
}
@mixin absolute-bottom-right($bottom: 0, $right: 0) {
  position: absolute;
  bottom: $bottom + px;
  right: $right + px;
}

半角文字改行（プレフィックスは適宜調整）

@mixin wordWrap{
  white-space: pre;           //CSS 2.0
  white-space: pre-wrap;      //CSS 2.1
  white-space: pre-line;      //CSS 3.0
  white-space: -pre-wrap;     //Opera 4-6
  white-space: -o-pre-wrap;   //Opera 7
  white-space: -moz-pre-wrap; //Mozilla
  white-space: -hp-pre-wrap;  //HP Printers
  word-wrap: break-word;      //IE 5+
}

Less

スマホ用にコンテンツ幅計算

左右paddingにて調整

.cntWidth(@p-size: 0, @page: 640){
  @p-size-retina: @p-size * 2;
  @percent: ((@p-size-retina / @page) * 100);
  width: ~'@{percent}%';
  @pd-size: (100 - @percent) / 2;
  padding-left: ~'@{pd-size}%';
  padding-right: ~'@{pd-size}%';
}

左右marginにて調整

.cntWidthCenter(@p-size1: 0, @page1: 640){
  @p-size-retina1: @p-size1 * 2;
  @percent1: ((@p-size-retina1 / @page1) * 100);
  width: ~'@{percent1}%';
  margin-left: auto;
  margin-right: auto;
}

フォントサイズ計算

スマホ用

.fontsize(@size: 24, @base: 16) {
  font-size: (@size / @base) * 1rem;
}