Why logic in stylesheets is needed in SASS - See It in Action

Why Logic in Stylesheets is Needed

📖 Scenario: You are building a website with different button styles. You want to reuse colors and sizes easily. Instead of writing the same colors and sizes many times, you will use logic in stylesheets to make your code simpler and faster to change.

🎯 Goal: Create a Sass stylesheet that uses variables and a simple condition to style buttons differently based on a size setting.

📋 What You'll Learn

Create a variable for the button color

Create a variable for the button size

Use a conditional statement to set the button padding based on the size variable

Write CSS rules for a button class using these variables

💡 Why This Matters

🌍 Real World

Web designers often need to create buttons and other elements that look consistent but can change easily. Using logic in stylesheets helps them manage styles better.

💼 Career

Knowing how to use variables and conditions in Sass is a valuable skill for front-end developers to write maintainable and scalable CSS.

1

Set up color and size variables

Create a Sass variable called $button-color and set it to #3498db. Also create a variable called $button-size and set it to medium.

SASS

$button-color: #000;
$button-size: small;
// Your code here

Hint

Use $variable-name: value; to create variables in Sass.

2

Add padding variables for sizes

Create two more variables: $small-padding set to 0.5rem 1rem and $medium-padding set to 1rem 2rem.

SASS

$button-color: #3498db;
$button-size: medium;
// Your code here

Hint

Variables can hold any CSS value, including padding sizes.

3

Use logic to set button padding

Write a Sass @if statement that sets a variable $button-padding to $small-padding if $button-size is small, otherwise set it to $medium-padding.

SASS

$button-color: #3498db;
$button-size: medium;
$small-padding: 0.5rem 1rem;
$medium-padding: 1rem 2rem;
// Your code here

Hint

Use @if condition { ... } @else { ... } to add logic in Sass.

4

Create button style using variables

Write a CSS rule for .button that sets background-color to $button-color, padding to $button-padding, and color to white.

SASS

$button-color: #3498db;
$button-size: medium;
$small-padding: 0.5rem 1rem;
$medium-padding: 1rem 2rem;
@if $button-size == small {
  $button-padding: $small-padding;
} @else {
  $button-padding: $medium-padding;
}

.button {
  // Your code here
}

Hint

Use variables inside CSS rules by writing their names with a $ sign.