×
Clear all filters including search bar
Valeri Tandilashvili's Personal Professional Blog
Results: 1022
setting text color based on background-color using mixin
Setting text color using the container's background-color:
// set text color based on bg
@function set-text-color($color) {
    @if (lightness($color) > 70) {
        @return #333;
    } @else {
        @return #fff;
    }
}

// set bg color & text color
@mixin set-background($color) {
    background-color: $color;
    color: set-text-color($color);
}
Use the mixin - "set-background"
h1 {
    @include set-background($primary-color);
}
Changing bg-color effect on text-color: https://youtu.be/nu5mdN2JIwM?t=2333
lightness
Setting text color using the container's background-color:
@function set-text-color($color) {
    @if (lightness($color) > 70) {
        @return #333;
    } @else {
        @return #fff;
    }
}
Calling the function - "set-text-color":
h1 {
    background-color: $primary-color;
    color: set-text-color($primary-color);
}
_config.scss partial for variables
In _config.scss partial file we have:
$primary-color: blue;
$secondary-color: lightblue;
And then we can import the partial into style.scss:
@import 'config';
nesting inside nested CSS
installing extension "live SASS compiler" in VS code 
Extensions (left navigation)  
->  search & install 
->  Manage (left bottom)  
->  Settings  
->  search (live sass...)  
->  Edit in settings.json
Possible values for 
format
part of settings: 
expanded / compressed
Default location is 
null
(root) but we can put 
"css/"
When format is 
compressed
we can put 
.min.css
as 
extensionName
changes in .css files
We don't want to ever touch our .css files when we are dealing with SASS because .css files are going to keep getting recompiled
--watch flag 
sass --watch example.scss output.css
SASS will watch example.scss file changes and will compile it immediately after every change
else / if statement with @error keyword 
@mixin triangle($size, $color, $direction) {
  height: 0;
  width: 0;

  border-color: transparent;
  border-style: solid;
  border-width: $size / 2;

  @if $direction == up {
    border-bottom-color: $color;
  } @else if $direction == right {
    border-left-color: $color;
  } @else if $direction == down {
    border-top-color: $color;
  } @else if $direction == left {
    border-right-color: $color;
  } @else {
    @error "Unknown direction #{$direction}.";
  }
}

.next {
  @include triangle(5px, black, right);
}
if / else statment 
$light-background: #f2ece4;
$light-text: #036;
$dark-background: #6b717f;
$dark-text: #d2e1dd;

@mixin theme-colors($light-theme: true) {
  @if $light-theme {
    background-color: $light-background;
    color: $light-text;
  } @else {
    background-color: $dark-background;
    color: $dark-text;
  }
}

.banner {
  @include theme-colors($light-theme: true);
  body.dark & {
    @include theme-colors($light-theme: false);
  }
}
if statement 
@mixin avatar($size, $circle: false) {
  width: $size;
  height: $size;

  @if $circle {
    border-radius: $size / 2;
  }
}

.square-av { @include avatar(100px, $circle: false); }
.circle-av { @include avatar(100px, $circle: true); }
Results: 1022