React) Creating a Responsive Color Box Layout with Sass in React

JS

import './SassComponent.scss';

const SassComponent = () => {
    return (
        <div className="SassComponent">
            <div className="box red"/>
            <div className="box orange"/>
            <div className="box yellow"/>
            <div className="box green"/>
            <div className="box blue"/>
            <div className="box indigo"/>
            <div className="box violet"/>
        </div>
    );
};

//SassComponent.scss
//sass : 중괄호와 세미콜론 사용하지 않음
//scss : 기존 css를 작성하는 방식과 비교하여 문법이 크게 다르지 않음
// $red: #fa5252;
// $orange: #fd7e14;
// $yellow : #fcc419;
// $green : #40c057;
// $blue: #339af0;
// $indigo : #5c7cfa;
// $violet: #7950f2;
//
// @mixin square($size){
//     $calculated: 32px * $size;
//     width: $calculated;
//     height: $calculated;
// }
//
// .SassComponent {
//     display: flex;
// .box {
//         background : red;
//         cursor: pointer;
//         transition: all 0.3s ease-in;
//     &.red{
//             background: $red;
//         @include square(1);
//         }
//     &.orange{
//             background: $yellow;
//         @include square(3);
//         }
//     &.green{
//             background: $green;
//         @include square(4);
//         }
//     &.blue{
//             background: $blue;
//         @include square(4);
//         }
//     &.indigo {
//             background: $indigo;
//         @include square(6);
//         }
//     &.violet{
//             background: $violet;
//         @include square(7);
//         }
//     &:hover {
//             background : black;
//         }
//     }
// }

//App.js
// import {Component} from 'react';
// import SassComponent from "./SassComponent";
//
// class App extends Component{
//     render(){
//         return(
//             <div>
//                 <SassComponent/>
//             </div>
//         );
//     }
// }
//
// export default App;
export default SassComponent;

1. **React Component (`SassComponent.js`)**:
    - The `SassComponent` functional component imports its styling from `SassComponent.scss`, demonstrating the integration of Sass with a React component.
    - The component renders a div with a class `SassComponent`, containing multiple child divs each with a class `box` and an additional class corresponding to a color name. These classes are used to apply specific styling rules defined in the Sass stylesheet.

2. **Sass Styling (`SassComponent.scss`)**:
    - **Variables**: The stylesheet defines color variables for red, orange, yellow, green, blue, indigo, and violet, promoting reusability and consistency in color values across the stylesheet.
    - **Mixin**: A `square` mixin is defined to calculate and apply width and height based on a multiplier, demonstrating Sass's capability to create reusable and dynamic styling blocks with custom properties.
    - **Nested Styling**: Utilizes Sass's nested syntax to style elements relative to their parent `.SassComponent` class. This approach simplifies targeting child elements (`.box`) and applying unique styles based on additional class modifiers (e.g., `.red`, `.orange`).
    - **Conditional and Dynamic Styling**: The stylesheet employs nested rules to apply background colors from the defined variables and dimensions calculated by the `square` mixin. It showcases how to dynamically change styles based on class names.
    - **Hover Effect**: A global hover style for all `.box` elements changes the background to black, enhancing user interaction feedback.

3. **App Integration (`App.js`)**:
    - Demonstrates how the `SassComponent` is imported and used within a parent component (`App`), showing the ease of integrating styled React components into larger applications.

**Key Concepts Demonstrated**:
- **Sass Integration with React**: Shows how Sass can be used to style React components, leveraging features like variables and mixins for more dynamic and maintainable styling.
- **CSS Architecture in React**: Provides an example of organizing styles using Sass's advanced features, like nesting and mixins, to keep styles readable and scalable.
- **Responsive and Dynamic Styling**: Through the use of mixins and conditional class applications, the example illustrates how to create responsive layouts that adjust based on properties or user interactions.

 

SCSS

//$red: #fa5252;
//$orange: #fd7e14;

//sass : 중괄호와 세미콜론 사용하지 않음
//scss : 기존 css를 작성하는 방식과 비교하여 문법이 크게 다르지 않음

//$yellow : #fcc419;
//$green : #40c057;
//$blue: #339af0;
//$indigo : #5c7cfa;
//$violet: #7950f2;
//
//@mixin square($size){
//  $calculated: 32px * $size;
//  width: $calculated;
//  height: $calculated;
//}

@import '../styles/utils';
.SassComponent {
  display: flex;
  .box {
    background : red;
    cursor: pointer;
    transition: all 0.3s ease-in;
    &.red{
      background: $red;
      @include square(1);
    }
    &.orange{
      background: $yellow;
      @include square(3);
    }
    &.green{
      background: $green;
      @include square(4);
    }
    &.blue{
      background: $blue;
      @include square(4);
    }
    &.indigo {
      background: $indigo;
      @include square(6);
    }
    &.violet{
      background: $violet;
      @include square(7);
    }
    &:hover {
      background : black;
    }
  }
}

1. **Variable Declaration**: At the beginning of the snippet, several Sass variables are defined to hold color values for red, orange, yellow, green, blue, indigo, and violet. These variables facilitate easy maintenance and consistent use of color schemes throughout the stylesheet.

2. **Mixin for Square Boxes**: The `square` mixin is a reusable block of code designed to calculate and set both the width and height of elements based on a given size multiplier. This mixin demonstrates Sass's ability to include logic in styling, allowing for dynamic style adjustments.

3. **Importing Utility Styles**: The `@import '../styles/utils';` statement imports additional styles from a utility file, which can contain mixins, functions, variables, or placeholders that are used across multiple components or stylesheets. This import enhances modularity and reusability in styling.

4. **Styling the `.SassComponent` Container**:
   - The `.SassComponent` class applies `display: flex;`, utilizing CSS Flexbox to layout its child elements (`.box`) in a row or wrap as necessary, providing a flexible and responsive design.
   
5. **Dynamic Background and Size for `.box` Elements**:
   - Each `.box` element starts with a default red background, which is overwritten based on additional class names (`red`, `orange`, `green`, `blue`, `indigo`, `violet`) that correspond to the defined Sass variables.
   - The `@include square(n);` mixin is used to dynamically set the size of the boxes, with `n` determining the size multiplier. This approach allows for a variety of box sizes within the same container.
   - A transition effect is applied to all `.box` elements, ensuring a smooth visual transition when the boxes are interacted with or animated.

6. **Hover Effect**:
   - A hover state is defined for all `.box` elements, changing the background color to black. This interactive feedback enhances the user experience, indicating that the boxes are interactive or clickable.