CODEWITHSUNDEEP
cssfontssasscompass-sass
jsuissa
jsuissa

Reputation: 1762

Setting a font stack with SASS for all text below fixed size

I inherited a site with legacy CSS containing numerous font sizes. Ideally, I want to set a specific font stack for cases where the font size is below 12px, but I don't need to change the sizes.

Is it even possible to develop a mixin with SASS that would set a font stack for all instances where the "font-size" is below a fixed value like 12px. Or is there a better approach to rectify the same problem?

Thanks in advance for pointing me in the right direction.

Update:

Reading through the documentation the closest I've seen to what I'm describing is using an @if statement, but I don't believe you can evaluate if an an attribute like "font-size" is actually smaller than a fixed size like "10px" assuming pixels is the unit being used.

p {
  @if $type == ocean {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;

  }
}

The SASS docs also mention "Note that control directives are an advanced feature, and are not recommended in the course of day-to-day styling."

I asked this question only because I assume someone has encountered a similar issue and may have landed on a comparable solution.

Justin

Upvotes: 0

Views: 704

Answers (2)

JHogue
JHogue

Reputation: 206

This is actually pretty easy with SCSS, but I am not sure if SASS can also do it. Maybe this code can set you down the right path. SCSS can do math functions, it is just tricky to get the syntax right. Here is working code in SCSS compiling with Compass: 

@function clear-units($value){
    @if type-of($value) == "number" {
        @if (unitless($value)) {
            @return $value;
        } @else if unit($value) == "em"{
            @return $value / 1em;
        } @else if unit($value) == "px" {
            @return $value / 1px;
        } @else if unit($value) == "pt" {
            @return $value / 1pt;
        }
    } @else {
        @warn "Not a number value: #{$value}";
        @return $value;
    }
}

@function font-family-for-size($value) {
    $size: clear-units($value); 
    @if ( $size <= 12 ) {
        @return "Verdana, sans-serif"; 
    } @else {
        @return "Arial, sans-serif"; 
    }
}

.hello-twelve {
    font-size: 12px; 
    font-family: font-family-for-size( 12px ); 
}
.hello-fourteen {
    font-size: 14px; 
    font-family: font-family-for-size( 14px ); 
}

Which compiles to: 

.hello-twelve { font-size: 12px; font-family: "Verdana, sans-serif"; }
.hello-fourteen { font-size: 14px; font-family: "Arial, sans-serif"; }

Hope that helps you figure out the syntax in SASS.

A @mixin would not work here, as it is intended to compile to entire sets of styles, but a @function can be used to calculate a value, which is what it is doing here.

Upvotes: 1

mimimimichael
mimimimichael

Reputation: 143

What you want is simply not possible. You can't avoid the good old search and replace.

However, instead of just replacing the font-family you could create a mixin that from now on takes care of your font-styling and use it everywhere instead of css-properties like font-family, font-size etc...

Upvotes: 1

Related Questions