Breaking News: Grepper is joining You.com. Read the official announcement!

Sass CSS examples

YOU.com answered on May 16, 2022 Popularity 9/10 Helpfulness 2/10

answer Sass CSS examples

related SCSS examples

Sass CSS examples

Comment

// Example 1
$primary-color: #3d82df;
$text-color: #333;

.heading {
  color: $primary-color;
  font-size: 24px;
}

.paragraph {
  color: $text-color;
  font-size: 16px;
}

// Example 2
$highlight-color: #e84545;

.button {
  color: #fff;
  background-color: $highlight-color;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 18px;
}

.button:hover {
  background-color: darken($highlight-color, 10%);
}

Popularity 9/10 Helpfulness 2/10 Language whatever

Source: Grepper

Link to this answer
Share Copy Link

Contributed on Sep 12 2023

YOU.com

0 Answers Avg Quality 2/10

Closely Related Answers

SCSS examples

Comment

@mixin displayproperty {
  display: flex;
  //other property for commen to many classes:
}
//for light and dark theme:
@mixin theme-color($light_color: true) {
  @if $light_color {
    background-color: #fff;
    color: black;
  } @else {
    background-color: black;
    color: #fff;
  }
}
$margin: 100px;

.paginator-wrapper {
  @include displayproperty();
  justify-content: end;
  margin-top: 2.5px;
  .page-no {
    margin-left: $margin - 90px;
    margin-right: $margin - 60px;
    // &:hover {
    //   color: red;
    // }
    //this is nesting in nesting:
  }
}

.spinner {
  margin: 20px 0;
  margin-bottom: $margin - 80px;
  padding: 30px 50px;
  text-align: center;
  border-radius: 4px;
}
.empty-data {
  @include displayproperty();
  justify-content: center;
  margin-top: 10%;
}

.main-wrapper {
  .light {
    @include theme-color($light_color: true);
  }
  .dark {
    @include theme-color($light_color: false);
  }
}

Popularity 9/10 Helpfulness 4/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on May 16 2022

30_Savaliya Denish

0 Answers Avg Quality 2/10

Sass CSS examples

Contents

More Related Answers

Sass CSS examples

Closely Related Answers

SCSS examples

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.