Sass % Operator

Sass % operator

This is a placeholder selector.

They are very similar to class selectors, but instead of using a period (.) at the start, the percent character (%) is used. Placeholder selectors have the additional property that they will not show up in the generated CSS, only the selectors that extend them will be included in the output.

Does Sass has different operator (!=)?

try this:

@mixin icon($w,$h,$float: null) {
    width: $w;
    height: $h;
    @if $float != null {
        float: $float;
    }
}

or try the documentation http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_9

SCSS ampersand operator

Try this:

SCSS:

.btn {
  //  move content out of `.btn` nesting 
  @at-root {
    //  use interpolation to `glue` a and & together 
    a#{&}.disabled,
    fieldset[disabled] a#{&} {
        pointer-events: none;
    }
  }
}

CSS Output:

a.btn.disabled,
fieldset[disabled] a.btn {
  pointer-events: none;
}

CSS :not operator for parent

use *:not(aup-switch) > input[type='checkbox'] selector instead

*:not(aup-switch) > input[type='checkbox'] {  -webkit-appearance: unset;  width: 10px;  height: 10px;  background-color: red;}

Normal checkbox: <input type="checkbox" >
<aup-switch>    aup-switch checkbox: <input type="checkbox" ></aup-switch>

Sass maths operators with functions

In SASS, #{} is used for interpolation.

In your case, the interpolation syntax around the variables is the reason why you were seeing the resulting value get concatenated like: 3.5rem0.9375.

To work around this, you could evaluate the math expression as you normally would, without interpolation, and then add 0rem in order to coerce the number into a rem unit:

@function toRem($val){
  @return ($val / $fontSize) + 0rem;
}

Example usage:

$fontSize: 16;

@function toRem($val){
  @return ($val / $fontSize) + 0rem;
}

element {
  top: toRem(32);
  left: 3.5rem + toRem(15);
}

Output:

element {
  top: 2rem;
  left: 4.4375rem;
}

What's the SASS equivalent of Javascript's var x = y || z?

$x = if(variable-exists('y'), $y, $z);`

Docs for variable-exists

Type check in SCSS?

This is a good use of @function instead of a mixin. And you can use the % modulo operator for this.

Added a @mixin for clarity (and another option).

@function evenOdd( $value) {
    $number : blue;
    
    @if ($value % 2 == 0) {
        $number : red 
    }
    
    @return $number;
}

@mixin evenOdd( $value ) {
    @if ($value % 2 == 0) {
        background-color: red;
    } @else {
        background-color: blue;
    }
}

.selector {
    background-color: evenOdd(2);
    /* compiles to red */
}

.selector {
    background-color: evenOdd(3);
    /* compiles to blue */
}

.selector {
    background-color: evenOdd(4);
    /* compiles to red */
}

/* MIXINS */
.selector {
    @include evenOdd(2);
    /* compiles to background-color: red */
}

.selector {
    @include evenOdd(3);
    /* compiles to background-color: blue */
}