×
Clear all filters including search bar
Valeri Tandilashvili's Sass Notes
Results: 33
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); }
SASS ignores files with underscore during compilation
SASS moduls vs native CSS modules
If we import CSS file using native CSS, it will make additional HTTP request, compared to SASS.
installing Sass using npm 
npm install -g sass
Then we can compile .scss file:
sass source/stylesheets/index.scss build/stylesheets/index.css
https://sass-lang.com/documentation/variables
hyphens 
-
and underscores 
_
are identical. This means that 
$font-size
and 
$font_size
both refer to the same variable
Results: 33