Scssでfontの管理

functionでpx指定のような感覚でフォントサイズをremにする

$baseFontSize: 16;

html{
    font-size: $baseFontSize + px;
}

@function rem($pixels, $context: $baseFontSize){
    @return $pixels / $context * 1rem;
}

//使用するとき
.text{
    font-size: rem(12);
}

//一時的のベースフォントを変更したいとき
.text2{
    font-size: rem(10,12);
}

html {
  font-size: 16px; }

.text {
  font-size: 0.75rem; }

.text2 {
  font-size: 0.8333333333rem; }

下記は細かい指定がある時はこんな風にかくという参考

@mixin font($font-size, $letter-spacing, $line-height, $font-size_sp, $letter-spacing_sp, $line-height_sp){
    
    @if ($line-height == null and $line-height_sp == null){
        //pc・sp共にline-hightの設定がない時
    
        font-size: ($font-size/1920)*100vw;
        letter-spacing: ($letter-spacing/1920)*100vw;
        
        @include mq(){
            font-size: ($font-size_sp/3)*1px;
            letter-spacing: ($letter-spacing_sp/3)*1px;
        }
        
        @include mq(xl){
            font-size: $font-size;
            letter-spacing: $letter-spacing;
        }
        
    }
    @else if ($line-height == null){
        //pcにline-hightの設定がない時

        font-size: ($font-size/1920)*100vw;
        letter-spacing: ($letter-spacing/1920)*100vw;
        
        @include mq(){
            font-size: ($font-size_sp/3)*1px;
            letter-spacing: ($letter-spacing_sp/3)*1px;
            line-height: ($line-height_sp/$font-size_sp);       
        }
        
        @include mq(xl){
            font-size: $font-size;
            letter-spacing: $letter-spacing;
        }
        
    }@else if ($line-height_sp == null){
        //spにline-hightの設定がない時
        
        font-size: ($font-size/1920)*100vw;
        letter-spacing: ($letter-spacing/1920)*100vw;
        line-height: ($line-height/$font-size);     

        @include mq(){
            font-size: ($font-size_sp/3)*1px;
            letter-spacing: ($letter-spacing_sp/3)*1px;
        }
        
        @include mq(xl){
            font-size: $font-size;
            letter-spacing: $letter-spacing;
        }
        
    }
    @else{
        //pc.sp両方にline-hight有り
        
        font-size: ($font-size/1920)*100vw;
        letter-spacing: ($letter-spacing/1920)*100vw;
        line-height: ($line-height/$font-size);     

        @include mq(){
            font-size: ($font-size_sp/3)*1px;
            letter-spacing: ($letter-spacing_sp/3)*1px;
            line-height: ($line-height_sp/$font-size_sp);       
        }
        
        @include mq(xl){
            font-size: $font-size;
            letter-spacing: $letter-spacing;
        }
        
        
    }//if

}

.sample{
    @include font(30, 6, null, 60, 6, 55);
}

Scssでは　&&や||が使えないので注意が必要です。 ・『and』がかつ、『or』がまたは、『not』が否定として使えます。