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)
DoSqrRoot function doesn't look right 😂 and @import will or is already deprecated. @use @foward is what you want
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.