Monday, 13 January 2025

3. Sass Concepts

 A simple set of Sass (SCSS) examples demonstrating core concepts, along with corresponding HTML for visualization.

1. Variables

variables.scss (Sass file)

$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-size: 16px;

styles.scss


@import "variables";

.button {
    background-color: $primary-color;
    color: #fff;
    font-size: $font-size;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
 
    &:hover {
      background-color: $secondary-color;
    }
  }

Compile sass code to generate styles.css file

index.html



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Try 1 Sass </title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    Check this button <button class="button">Click Me</button>
</body>
</html>
Output

2. Nesting


nesting.scss (Sass file)

.navbar {
    background-color: #daf50a;
    color: white;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 36px;

  
    ul {
      list-style: none;
      padding: 0;
  
      li {
        display: inline;
        margin-right: 15px;
  
        a {
          color: rgb(10, 10, 9);
          text-decoration: none;
  
          &:hover {
            color: #e40b28;
          }
        }
      }
    }
  }
  


styles.scss

@import "nesting";

Compile styles.scss to generate styles.css
nesting.html




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nesting</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="navbar">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>    
</body>
</html>
output

3. Imports



button.scss


.button {
    background-color: $secondary-color;
    color: rgb(18, 170, 240);
    padding: 10px 20px;
    border: rgb(0, 255, 98) solid;
    border-radius: 15px;
    font-family: $font-family;
    font-size: medium;
  
    &:hover {
      background-color: white;
    }
  }
  
styles.scss
@import 'variables';
@import 'nesting';
@import 'buttons';

body {
  font-family: $font-family;
  margin: 0;
  padding: 0;
  background-color: $primary-color;
}

.container {
  max-width: 400px;
  max-height: 200px;
  margin: 0px auto;
  text-align: left;
}

HTML




<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sass @import Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav class="navbar">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
  
  <div class="container"> 
    <h1>Welcome to Sass @import Example</h1>
    <button class="button">Click Me</button>
  </div>
</body>
</html>

Compile styles.scss to generate styles.css file 
Check the outpit 


Mouse over to check the change in color Red in Top Menu and white over button.

4. Partials




Partials are partial SCSS files (e.g., _variables.scss) that don’t generate CSS. Use @import to include them.




_variables.scss


$primary-color: #e74c3c;
$secondary-color: #2ecc71;



_mixins.scss


@mixin center {
  display: flex;
  justify-content: center;
  align-items: center;
}



main.scss


@import 'variables';
@import 'mixins';

.container {
  height: 100vh;
  background-color: $primary-color;

  @include center {
    color: white;
    font-size: 24px;
  }
}



HTML


<div class="container">Centered Content</div>





5. Mixins


_mixins.scss


@mixin button-style($bg-color, $text-color: rgb(14, 1, 1), $radius: 5px) {
    background-color: $bg-color;
    color: $text-color;
    border: none;
    border-radius: $radius;
    padding: 10px 20px;
    font-size: 16px;
    text-transform: uppercase;
    cursor: pointer;
  
    &:hover {
      background-color: lighten($bg-color, 30%);
    }
  }
  
  @mixin flex-center {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
  }


_variables.scss
$primary-color: #4ae73c;
$secondary-color: #312ecc;
_main.scss
@import 'mixins';

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.header {
  height: 10vh;
  background-color: #3498db;
  color: white;

  @include flex-center;
    

  h1 {
    font-size: 3rem;
  }
}

.button-primary {
  @include button-style(#2ecc71, white, 10px);
}

.button-secondary {
  @include button-style(#6f3ce7, white, 20px);
}

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Sass Mixins Example</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <header class="header">
    <h1>Welcome to Mixins Example</h1>
  </header>
  <div style="text-align: center; margin-top: 20px;">
    <button class="button-primary">Primary Button</button>
    <button class="button-secondary">Secondary Button</button>
  </div>
</body>
</html>




output







6. Extends


_extends.scss


%btn {
    display: inline-block;
    padding: 10px 20px;
    text-align: center;
    border-radius: 5px;
    color: white;
  }
  
  .button-primary {
    @extend %btn;
    background-color: $primary-color;
  }
  
  .button-secondary {
    @extend %btn;
    background-color: $secondary-color;
  }
styles.scss
@import 'variables';
@import 'extends';

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sass Extends Demo</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <a href="#" class="button-primary">Primary</a>
    <a href="#" class="button-secondary">Secondary</a>
</body>
</html>


output







7. Operators


_operators.scss


$base-size: 16px;

.container {
  font-size: $base-size * 1.5; // 24px
  padding: $base-size / 2;    // 8px
}


styles.scss
@import 'operators';
HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sass Operators </title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">Responsive Container</div>
</body>

output










8. Interpolation
Variable Interpolation is a SASS feature that developers can use to dynamically inject the value of a variable into selectors and properties. It can be done by utilizing the '#{}' syntax. Developers can create dynamic stylesheets by using static text with variable values via variable interpolation.


_interpolation.scss


$breakpoints: (small: 50px, medium: 100px, large: 150px);

@each $name, $size in $breakpoints {
  .container-#{$name} {
    height: $size;
    width: $size;
    background-color: lime;
    padding: 20px;    
  }
}


styles.scss
@import 'interpolations';
HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sass Interpolation Demo</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <div class="container-small">Small</div>
    <div class="container-medium">Medium</div>
    <div class="container-large">Large</div>
</body>

</html>


output






9. Directives


_directives.scss


$primary-color: #3498db;

@if $primary-color == #3498db {
    .info {
      background-color: $primary-color;
      color: rgb(230, 238, 231);
      height: 20px;
    }
  } @else {
    .info {
      background-color: grey;
      color: black;
      height: 20px;
    }
  }


styles.scss
@import 'directives';
HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sass Directive Demo</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="info">Conditional Styling</div>
</body>
</html>


output







Profile Awesome web site Project
styles.scss

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background-image: linear-gradient(rgb(162, 240, 72), rgb(247, 247, 238));
}

nav {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 2rem;
 
  .icons i {
    margin-left: 20px;
    font-size: 20px;
    cursor: pointer;
  }

  ul li {
    display: inline;
    margin-left: 20px;
    list-style: none;
    a {
      text-decoration: none;
      //text-decoration: underline solid;
      font-family: sans-serif;
      color: #181818;
    }
  }
}

main {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  margin: 6rem;
  background-image: linear-gradient(rgb(162, 240, 72), rgb(247, 247, 238));
}

.image-container {
  background: #fff;
  border-radius: 200px;
  padding: 20px;
  box-shadow: 4px 4px 10px -4px #ccc;

  .image {
    background: url(rmc.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 300px;
    height: 500px;
    border-radius: 150px;
    margin-top: 30spx;
    
  }
}

.content {
  margin: 3rem 0;
  font-family: sans-serif;

  .badge-label {
    margin-bottom: 20px;
    font-size: 1.4rem;
  }

  p.info {
    width: 300px;
    color: #4a4a4a;
    line-height: 1.5;
  }
}

.pills-container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  gap: 10px;
  .pill {
    border: 2px solid white;
    box-shadow: 4px 4px 10px -4px #ccc;

    padding: 10px 20px;

    border-radius: 100px;
    width: 100px;
    text-align: center;
  }
}

.content2 {
  text-align: right;

  .info {
    transform: translateX(20px);
  }
}


index.html (Thanks to HUXN Web Dev)

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Awesome Header</title>
    <link rel="stylesheet" href="style.css" />
    <!-- Font Awesome -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
      integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
  </head>
  <body>
    <nav>
      <div class="icons">
        <i class="fa-brands fa-youtube"></i>
        <i class="fa-brands fa-twitter"></i>
        <i class="fa-brands fa-github"></i>
        <i class="fa-brands fa-instagram"></i>
      </div>
      <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">WORK</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </nav>

    <main>
      <div class="content1">
        <div class="content">
          <p class="badge-label">BADGE</p>
          <p class="info">I'm a Life Long Learner  and UI/UX lover.</p>
        </div>
        <div class="content">
          <p class="badge-label">TOOLS</p>
          <p class="info">
            I've worked with lots of popular & unpopular technologies,
            frameworks, and libraries.
          </p>
        </div>
        <div class="content">
          <p class="badge-label">Languages</p>
          <div class="pills-container">
            <p class="pill">JS</p>
            <p class="pill">C</p>
            <p class="pill">Python</p>
            <p class="pill">Java</p>
            <p class="pill">Dart</p>
            <p class="pill">C++</p>
          </div>
        </div>
      </div>

      <div class="image-container">
        <div class="image"></div>
      </div>

      <div class="content2">
        <div class="content">
          <p class="badge-label">Previous Work</p>
          <p class="info">Previously I've worked with Aurele, Tata NELCO, Anna, Annamalai Universities & Etiacm Inc, CA, USA</p>
        </div>
        <div class="content">
          <p class="badge-label">Hobbies</p>
          <div class="pills-container">
            <p class="pill">Teaching</p>
            <p class="pill">Learning</p>
            <p class="pill">Reading</p>
            <p class="pill">Writing</p>
            <p class="pill">Coding</p>
          </div>
        </div>
        <div class="content">
          <p class="badge-label">Location</p>
          <p class="info">Annamalai Nagar</p>
        </div>
      </div>
    </main>
  </body>
</html>
output



Final Notes:


    

  • Save each .scss file as separate files if using imports and partials.
    • 

  • Compile the SCSS files into a single .css file using a tool like sass CLI or online compilers.
    • 

  • Link the resulting .css file in your HTML.













at







































No comments:















Post a Comment























        

      









Subscribe to:
Post Comments (Atom)









3. Sass Concepts



 A simple set of Sass (SCSS)  examples demonstrating core concepts, along with corresponding HTML  for visualization.   1. Variables  variab...