Sass and Rounding Down Numbers. Can This Be Configured

SASS calculation rounding - configurating the number of decimals with Web Workbench and Visual Studio 2012

Mindscape got back on the forum, and you can do this through a "compile option directive". Simply put this in the top of your SASS file:

//* scss-compile-options: --precision 8

How to fix Web Essentials number precision issue with SASS?

Inside your compilerconfig.json file in Visual Studio add the option:

"options": {"precision": 10}

Using Compass/sass for percentage width responsive layouts?

No mixin needed. Sass has a built-in percentage function that accepts a variety of units.

width: percentage(640 / 980)
width: percentage(640px / 980px)

both result in:

width: 65.30612%

Correct aspect ratio on fluid width elements of different sizes

Okay, I had to adjust the markup, but got it working, using spans inside.
For the margin I used the calc function.

<ul class="u-cf">
    <li class="double"><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
    <li class="double"><span></span></li>
    <li><span></span></li>
    <li><span></span></li>
</ul>

Check out the pen here:
http://codepen.io/bekreatief/pen/MYKBgE?editors=110

How to check the type of multiple variables in SASS

For those interested, I ended up using a map of the variable names and types and then looped over then, injecting the name and type into an error message.

I did however run into a couple of issues setting up the map. Firstly, the key cannot be a variable, as this returns the variable value rather than the name. I got round this by using the name of the variable, minus the $. This allowed me to see which variable I was looking at whilst still working as a key. Secondly, I needed to have the value of the variables, as well as the type. I set up the value for each pair to be another map, with the variable as the key and the type as the value. This meant I could then run another loop over this data to check these values. Below is an example of how my map was structured:

$setting-types: (
    variable-name1: ($variable-name1: bool),
    variable-name2: ($variable-name2: bool),
    variable-name3: ($variable-name3: list)
}

This effectively returns:

$setting-types: (
    variable-name1: (true: bool),
    variable-name2: (false: bool),
    variable-name3: (foo, bar, buzz: list)
}

I was then able to run an @each function over the map like so:

@each $setting, $data in $setting-types {
    $setting-name: $setting;
    @each $variable, $type in $data {
        @if type-of($variable) != $type {
            @error "'#{$variable}' is not a valid value for $#{$setting-name}, you must use a #{$type}.";
        }
    }
}

The first loop splits each variable in the map, and then the second loop goes over the variable value and expected data type. I then use type-of() to check what the data type for the variable is and if does not match what is written in the map, then the error is shown. I also set another variable after the first loop, which is just the key from the first loop, but can then be accessed in the second loop to help provide some clarity in the error message.

I hope this is clear enough for others to understand, should they need to do something similar.

---

Related Topics