Sassの時のカスタム関数まとめ

ホームページ制作の時に使うSassのカスタム関数とかのまとめ
FLOCSSで言うとこのFoundationの中身。使いまわしてる部分記録用

reset.scss

下記のリセットCSS入れてる
https://andy-bell.co.uk/a-modern-css-reset/

base.scss

ベースとなるscss

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
video,
object {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
}

img,
picture {
  max-width: 100%;
  border-style: none;
}

img {
  backface-visibility: hidden;
  vertical-align: bottom;
}

a {
  color: $c-black;
  text-decoration: none;
  cursor: pointer;
}

html {
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  scroll-behavior: smooth;
  touch-action: manipulation;
}
body {
  color: $c-black;
  font-family: $default-font-family;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
}

color.scss

カラー変数とか

$c-base: #***;
$c-main: #***;
$c-accent: #***;
$c-primary: #***;
$c-secondary: #***;

$c-accent-lightest: #***:
$c-accent-lighter: #***;
$c-accent-light: #***:
$c-accent-dark: #***;
$c-accent-darker: #***;
$c-accent-darkest: #***;

$c-red: #***;
$c-gray: #***;

font.scss

font周り

// Inter（Google Fonts）
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
// Noto Sans（Google Fonts）
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap");

// default
$default-font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",
  "メイリオ", meiryo, "ＭＳ Ｐゴシック", sans-serif;
// Inter
$inter: "Inter", sans-serif;
// Noto Serif JP
$noto-sans: "Noto Sans JP", sans-serif;

function.scss

pxをremに変換と、vw変換も入れる時もある

// pxをremに変換
@function rem($px, $base: 16px) {
  @return $px / $base * 1rem;
}

mixin.scss

/* ipad miniの縦からsp想定 */
@mixin xs {
  @media only screen and (max-width: ($xs)) {
    @content;
  }
}

/* innerの幅からipad miniの縦まで想定 */
@mixin sm {
  @media only screen and (max-width: ($sm)) {
    @content;
  }
}

/* タブレットの横と小さいPC */
@mixin md {
  @media only screen and (max-width: ($md)) {
    @content;
  }
}

/* カンプのカンバス1366pxより大きいPC */
@mixin lg {
  @media only screen and (min-width: ($lg)) {
    @content;
  }
}
// line-height
@mixin line-height($num: 16, $line: 24) {
  line-height: ($line / $num);
}

// 絶対配置中央揃え
@mixin center-pos {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
@mixin vertical-center {
  position: absolute;
  top: 50%;
  left: 0%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

// flex
@mixin flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
@mixin flex-start {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
}

//三点リーダー
@mixin line-clamp($count: 3) {
  // 引数が数値以外だったらエラーを返す
  @if type-of($count) != "number" {
    @error 'line-clampの引数は必ず数値で指定してください';
  }

  @if $count == 1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  } @else {
    display: -webkit-box;
    -webkit-line-clamp: $count;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

// clearfix
@mixin clearfix() {
  &::after {
    clear: both;
    content: "";
    display: block;
  }
}

// 画像などを縦横比を維持したままレスポンシブ対応
@mixin aspect-ratio($width, $height) {
  position: relative;

  &::before {
    content: "";
    float: left;
    padding-top: ($height / $width) * 100%;
  }

  &::after {
    content: "";
    display: block;
    clear: both;
  }

  & > :first-child {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
}

//三角
@mixin triangle($direction, $width, $height, $color: currentColor) {
  @if not
    index(
      upward
        rightward
        downward
        leftward
        upper-left
        upper-right
        lower-right
        lower-left,
      $direction
    )
  {
    @error 'triangle()の方向は"upward","rightward","downward","leftward","upper-left","upper-right","lower-right","lower-left"から指定してください';
  }

  border-style: solid;
  height: 0;
  width: 0;

  @if $direction == upward {
    border-color: transparent transparent $color transparent;
    border-width: 0 ($width / 2) $height ($width / 2);
  }

  @if $direction == rightward {
    border-color: transparent transparent transparent $color;
    border-width: ($height / 2) 0 ($height / 2) $width;
  }

  @if $direction == downward {
    border-color: $color transparent transparent transparent;
    border-width: $height ($width / 2) 0 ($width / 2);
  }

  @if $direction == leftward {
    border-color: transparent $color transparent transparent;
    border-width: ($height / 2) $width ($height / 2) 0;
  }

  @if $direction == upper-left {
    border-color: $color transparent transparent transparent;
    border-width: $height $height 0 0;
  }

  @if $direction == upper-right {
    border-color: transparent $color transparent transparent;
    border-width: 0 $height $height 0;
  }

  @if $direction == lower-right {
    border-color: transparent transparent $color transparent;
    border-width: 0 0 $height $height;
  }

  @if $direction == lower-left {
    border-color: transparent transparent transparent $color;
    border-width: $height 0 0 $height;
  }
}

variable.scss

$hover-transition: 300ms;

$inner-width: 960px;

$opacity-06: 0.6;

$box-shadow-sm: 0 5px 10px 0 rgba(#000000, 0.1);
$box-shadow-md: 0 10px 20px 0 rgba(#000000, 0.1);

結構前に作ったやつで古くなっちゃってるのでちょっとずつ改善できるとこ改善したい。