DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 967,611 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for SCSS, a more advanced and powerful weapon for page styling
sankha
sankha

Posted on

SCSS, a more advanced and powerful weapon for page styling

For styling a web page, a web designer’s first and the most preferred choice is CSS (Cascading Style Sheet), along with that we often encounter with another kind of style sheet rules, an advanced and evolved version of vanilla CSS, SASS also is known as the SCSS (Syntactically Awesome Style Sheets). Both CSS and SCSS are a type of scripting language that we use to style a web page to make it aesthetically more enhanced. Widely used in combination with JavaScript, jQuery and HTML, CSS and SCSS are now most powerful component for the web.

One of the most major differences between SCSS and CSS is SCSS is a pre-processor language, which means we need an interpreter or compiler to convert the advanced SCSS tag to simple browser readable CSS rules. Through the pre-processor, SCSS syntax are getting parsed into the server and returned to the browser as normal CSS rules. As SCSS is a more powerful and advanced form of CSS it’s a bit more complex than normal CSS where we can just play around with the pseudo-class and ID, but in the SCSS we have few programming languages like features such as declaring variables, functions, operators, parameter passing, import and @include directives. We can also do simple mathematical calculations like calculating padding or margin based on a given parameter. It is worth mentioning here that we can also write simple CSS style rules in the .scss file (.scss is the file extension of a .SCSS language.
Mixin is another strong feature that makes a big difference between SCSS and vanilla CSS. Mixin is a group of CSS declarations that we import with @import directive and reuse throughout the style sheet. For declaring a Mixin in SCSS we have to create a mixin like this

  
@mixin  mixinName {
    /* CSS Codes */
}
  

For example

  
@mixin button {
    padding:0.50rem 2.5rem;
    font-size:$font14p;
    border:none;
    box-shadow: none;   
    font-family: $siteFont;
} 
  

Here we have a mixin called button, and now we can to call this button mixin within any other class selector with the @include directive. The CSS rules specified within the button Mixin now are a part of btnCommon class.

 .btnCommon {
    @include
 btnprimary;
} 
  

Nesting is also another important feature of SASS / SCSS. SASS,which allows us to write SCSS code in a nested hierarchy, just like HTML, XML. It means we can place or wrap the child selector code inside of parent selector and it gives us a spiral kind of chain effect, here how it is works

  
        body {
            padding:0px;
            margin:0px;
            font-family: $siteFont;
            background: $secondaryBgColor;
        
            header {
                background: $header-bg-color;
                padding: 1rem;
                width: 700px;
                margin:0 auto;
        
                .header-top {
                    position: fixed;
                    width: 100%;
                    left:0;
                    right: 0;
                    top:0;
                    padding: 0.5rem 1.25rem;
                }
            }
  

.header-top class is nested inside the header selector and header selector is nested within the body tag. As the body object is the parent DOM element so this nested hierarchy must be present inside the

element of HTML code structure.
<body>

<header>
    <div class="header-top">
            <p>This is header</p>
    </div>
    
</header>

</body>
     

Declaring a SCSS variable

Consider we are using two main colors throughout the web site to match the branding perspective of a company. Now, If we need to change those colors at some point, we’ll need to change it in all those places in all the .css (.css is the file extension of CSS language) file where we call the color value, but if we define color values as a variable in a single place then we can call the variable throughout our stylesheet and multiple CSS file too. If we need to change the color value later, we just change the color value of the variable and it will reflect that change throughout the entire stylesheet.

Syntax

   $variable_name: value;
  

example

$primaryColor:#000

In the above example we have declared a variable called β€œ$primaryColor” whose value is the color black. Now if we call this variable into the <body> tag, then the default font color will be black for the entire site. Just refer the name of the variable wherever we need to implement the style.

example

  
        body {
            color: $primaryColor;
            }    
        
  

SASS/SCSS function

Functions are blocks of code that accomplish a specific goal. Like other programming language SCSS functions also have some specific tasks to perform.

Syntax

  
        @function DoSqrRoot($int) {
            @return $int * $int;
        } 
  

Example

  
        body {
            font-size: DoSqrRoot(4);
        }
  

This will return font-size as 16px in the body tag.

SASS import

To import a .scss file into another .scss file we use @import directive. This is basically calling an external file within another file; say we are importing two .scss files β€˜variables’ and β€˜mixin’ into a common.scss file.

  
        @import 'variable.scss';
        @import 'mixin.scss'; 
        
  

Normally we cannot parse SCSS from our pc, like we can write and test HTML, CSS from the browser, but If we have node.js installed we can convert SCSS to CSS with following command from the Command Prompt(CMD)

  
        sass --watch scss:css
  

once sass is running it will show you a message like this

  
        sass is watching for changes. Press Ctrl+C to stop
  

Please remember you should run this command inside a folder where both SCSS and CSS folders are present, otherwise the command will fail. We can also parse a single file from a folder with following command

  
        sass --watch common.scss common.css
  

a .map file will be created inside the css folder which done the mapping job between two files i.e. SCSS and CSS

Moreover, SASS is very vast and interesting, more you dig into the subject more you find out its beauty and charm. With the help of variables, nesting, mixin and other features, we can create a clean,easy maintainable code that provides a better result than CSS. The reusability of SCSS helps us get rid of writing the same piece of code again and again.

Top comments (2)

Collapse
 
supportic profile image
Supportic

DoSqrRoot function doesn't look right πŸ˜‚ and @import will or is already deprecated. @use @foward is what you want

Collapse
 
jsankha profile image
sankha Author

Thanks for the information. Will check DoSqrRoot function, but @import is still working fine for me. There is a basic differences between @import @use and @foward. @import is actually importing SCSS rules from A.SCSS to B.SCSS, whereas @use and @foward loads mixins, functions, and variables from other Sass stylesheets. Yes, @import is going to phase out gradually.

🌚 Friends don't let friends browse without dark mode.

Sorry, it's true.