coding

function関数設定

function

リンク先一覧

  • _function.scss ( LibSass )

    /**
     * 引数のfontSizeをremに変換する関数
     * @param fontSize フォントサイズ
     *
     * 例)18pxをremに変換
     * font-size: fz(18);
     */
    @function fz($fontSize) {
      @return ($fontSize / 16) * 1rem;
    }
    
    /**
     * 引数の最大画面サイズから指定されたpx数を元にvwに変換する関数
     * @param maxScreenSize 最大画面サイズ
     * @param px 変換するpx数
     * 
     * 例)1440pxの幅に対して560pxの要素を可変させる
     * width: vw(1440, 560);
     */
    @function vw($maxScreenSize, $px) {
      @return (($px / $maxScreenSize) * 100) * 1vw;
    }
    
    /**
     * 引数のfontSizeを元に指定されたpx数をemに変換する関数
     * @param px 変換するpx数
     * @param fontSize フォントサイズ
     *
     * 例)font-sizeが24pxの要素の下に80pxのmarginをem換算で設定する
     * margin-bottom: em(80, 24);
     * 
     * font-sizeが16pxであれば第2引数は省略可能
     * margin-bottom: em(40);
     */
    @function em($px, $fontSize: 16) {
      @return ($px / $fontSize) * 1em;
    }
    
    Copied!
  • _function.scss ( Dart Sass )

    @use "sass:math";
    
    /**
     * 引数のfontSizeをremに変換する関数
     * @param fontSize フォントサイズ
     *
     * 例)18pxをremに変換
     * font-size: fz(18);
     */
    @function fz($fontSize) {
      @return math.div($fontSize, 16) * 1rem;
    }
    
    /**
     * 引数の最大画面サイズから指定されたpx数を元にvwに変換する関数
     * @param maxScreenSize 最大画面サイズ
     * @param px 変換するpx数
     * 
     * 例)1440pxの幅に対して560pxの要素を可変させる
     * width: vw(1440, 560);
     */
    @function vw($maxScreenSize, $px) {
      @return (math.div($px, $maxScreenSize) * 100) * 1vw;
    }
    
    /**
     * 引数のfontSizeを元に指定されたpx数をemに変換する関数
     * @param px 変換するpx数
     * @param fontSize フォントサイズ
     *
     * 例)font-sizeが24pxの要素の下に80pxのmarginをem換算で設定する
     * margin-bottom: em(80, 24);
     * 
     * font-sizeが16pxであれば第2引数は省略可能
     * margin-bottom: em(40);
     */
    @function em($px, $fontSize: 16) {
      @return math.div($px, $fontSize) * 1em;
    }
    
    Copied!