markdown SCSS / SASS基础知识

Posted 2021-05-05

# SCSS / SASS Basics

#### Declaring variables
```scss
$variable-name: some-value
```

#### Extending
```scss
.some-class {
    @extend .class-name
}
```

#### Mixins
```scss
@mixin some-name($param-name) {
    ...
    @content;
    ...
}

@mixin some-name($param-name: some-default-value) {
    ...
    @content;
    ...
}
```

Usage:
```scss
@include some-name(50px);
```

#### List functions
```scss
length($list-name);

// if you select a negative nuber
// you start from the end of the array
// ex. nth($list-name, -1); // is the last element
nth($list-name, $one-base-index);

index($list-name, $value-to-search);
```

#### Color functions
```scss
    color: saturate($color: #9923FF, $amount: 50%);
    color: lighten($color: #9923FF, $amount: 10%);
    color: darken($color: #9923FF, $amount: 20%);
    color: adjust-hue($color: #9923FF, $degrees: 70deg);
```

#### @at-root
```scss
@media print {
    @at-root (with: media) {
        .bar {
            color: red;
        }
    }
}
// will produce
@media print {
  .bar {
    color: red;
  }
}
```

```scss
@media print {
    @at-root (without: media) {
        .bar {
            color: red;
        }
    }
}
// will produce
  .bar {
    color: red;
  }
```

```scss
@if a==b
    // ...
@else if a==c
    // ...
@elseif a==d
    // ...
@else
    // ...
```

#### Ternary operator
```scss
if(a == b, "they are equal", "they are NOT equal");
```

#### not (!) operator
```scss
@if not $bool {
    // We get in there
}
```

#### boolean functions (unitless and *-exists functions)
```scss
$value1: 42em;
$value2: 42;
$unitless: unitless($value1); // false
$unitless: unitless($value2); // true

$unicorn: 'rainbow';
$variable-exists: variable-exists('unicorn'); // true
```

#### Nested media queries
```scss
@media (min-width: 42em) {
    .foo {
      color: red;
  
      @media (max-width: 50em) {
        color: blue;
      }
    }
  }
// will produce
@media (min-width: 42em) {
  .foo {
    color: red;
  }
}
@media (min-width: 42em) and (max-width: 50em) {
  .foo {
    color: blue;
  }
}
```

#### @extend (!optional flag)
Use
```scss
@extend .bar !optional
```
if the parent class (.bar) might not be defined.

#### Functions' *keywords arguments (named arguments)*
// I know who to do it (like in C#)

#### Functions: unknown number of arguments
```scss
@function my-function($specific-argument, $extra-arguments...) { ... }
```

#### type-of()
You can check an object's type by doing `type-of($object-dentifier)`.