よく使うSassのmixinとfunctionのスニペットをまとめてみた

BRANK

こんにちは。TAK(@tak_dcxi)です。2020年最後のZennの投稿ということで、Web制作テンプレートの年末大掃除も兼ねて僕がよく使うSassのmixinとfunctionを厳選してまとめてみました。Sassを使っている方でmixinとかfunctionをあまり利用してないという方は参考にしてみてください。ブレークポイントの指定おそらくmixinで最も利用されているのはレスポンシブでのブレークポイントの指定だと思います。variables/_breakpoints.scss$breakpoints: ( 'xs': (min-width: 0), 'sm': (min-width: 576px), 'md': (min-width: 768px), 'lg': (min-width: 992px), 'xl': (min-width: 1200px), 'xxl': (min-width: 1400px) ) !default; mixins/_responsive.scss@mixin responsive($breakpoint) { @if map-has-key($breakpoints, $breakpoint) { @media screen and #{inspect(map-get($breakpoints, $breakpoint))} { @content; } } @else { @error "指定されたブレークポイントは定義されていません。" + "指定できるブレークポイントは次のとおりです。 -> #{map-keys($breakpoints)}"; } } ブレークポイントの変数はマップ型（キーと値の…