Posts tagged: CSS

Extension and Operators in SASS. Learn and implement Extension and operators in SASS.

The extension is a feature in SASS / SCSS through which we can apply styles of one class to another just by calling the @extend in the subsequent class. Here’s the following example in which we have explained the classic use case of extending 

Create a class with the name paragraph1

.paragraph1{
    color: red;
    background: white; 
    &:hover{
        color: pink;
    }
}

Create another class with the name paragraph2 and inside it call the paragraph1 style with @extend function.

.paragraph2{
    @extend .paragraph1;
    &:hover{
        color: yellow;
    }
}

Operators in SASS / SCSS is similar to CSS operators. There are operator functions such as addition, subtraction, multiplication and division. 

How operators are used in CSS:

.paragraph1{
    width:  calc(80% - 40%);
}

How operators are used in SASS / SCSS: 

.paragraph1 {
    width: 80% - 40%;
}

There is no need to use the calc function. 

The basics of SASS / SCSS is over with the extend and operators. You can explore more with the learning in your projects.

Light and Dark Theme using Mixin and implement in your web projects.

It is possible to switch between a dark and light theme using simple SCSS  / SASS without many code lines. We can leverage Mixin to achieve the change in light and dark themes. Following is the code for creating Mixin which can easily switch between light and dark themes. 

We will leverage two functions lighten and darken inside Mixin two achieve the functionality. Lighten function will help lighten the applied colour, and darken function will help darken the used colour. 

$primary-color: #000000;
$text-color: #3af80a;
$secondary-color: #432396;

@mixin theme($light-theme: true) {
    @if $light-theme{
        background: lighten($primary-color, 100%);
        color: darken ($text-color, 100%);
    }
}

Now create a class called light and apply it to the body tag. Inside the light class now include the theme mixin to enable the theme switch property.

.light{
    @include theme ($light-theme: true);
}

If the $light-theme is true, the HTML page will apply a light theme, the background colour will be light, and the text colour will be dark. If the $light-theme is false, the HTML page will apply a dark theme. 

.light{
    @include theme ($light-theme: false);
}

The above code will create a dark background and light text colour. In the next tutorial, we will learn Extension and Operators in SASS / SCSS.

Learn Mixins in SASS and reutilize style

Mixins permit you to characterize styles that can be re-utilized all through your stylesheet. They make it simple to try not to utilize non-semantic classes like .float-left and to disperse assortments of libraries’ styles. 

Mixins are characterized utilizing the @mixin at-rule, which is composed @mixin <name> { … } or @mixin name(<arguments…>) { … }

Following is a simple example of using mixing to define content to centre.

@mixin flexCenter{

display: flex;

justify-content: center; 

align-items: center; 

}

Now just using @include to call the mixin will copy the entire style. The beauty is that it can be called n number of times inside the SCSS file.

.main {

@include flexCenter;

}

The SCSS compiles to the following CSS

.main {

display: flex;

justify-content: center; 

align-items: center; 

}

Here’s another classic example using arguments inside mixins to define the flex-direction. 

@mixin flexCenter($direction) {

flex-direction: $direction

}

To call the mixin with the argument, follow the example.

.main{

@include flexCenter(column);

}

The column parameter defined inside flexCenter mixin will specify the flex-direction to the column, and the following is equivalent CSS

.main {

display: flex;

justify-content: center; 

align-items: center; 

flex-direction: column

}

Learn to implement

Learn functions in sass. Create functions, call them and level up your SASS Skills.

Functions permit you to characterize complex operations on SassScript values that you can reuse all through your stylesheet. They make it simple to extract out standard formulae and practices in a decipherable manner. The function helps in computing calculations and return values in SASS / SCSS. 

Functions are characterized utilizing the @function at-rule, which is composed @function <name>(<arguments…>) { … }

Following is a simple demonstration of how we can implement a function in SASS / SCSS. Let’s define the variable font-weights to allocate a name to respective font-weight such as light, regular and bold.

$font-weights:(
    "light": 300,
    "regular": 400,
    "bold": 700
);

Next, we can define the function weight to integrate the font-weights class.

@function weight($weight-name){
    @return map-get($font-weights , $weight-name)
}

Now, we can directly leverage function by calling the function weight to define font-weight in CSS

.main{
     font-weight: weight(light);
}

The respective output CSS will be as follows:

.main{
    font-weight: 300;
}

In the next tutorial, we will be learning Mixins in SASS

Learn Partials in SASS quickly in 5 mins and start implementing in your projects

Partial in SASS / SCSS is useful when the project files are enormous. Reusing or maintaining such huge SCSS files is cumbersome. Partial SCSS allows developers to split the variable, resets or page-wise SCSS separately and quickly embed them in the main SCSS. The main advantage of SASS is that partial SCSS files will not compile into new CSS files and therefore it becomes easier to manage. 

To make a particular SCSS a partial file, we can add an underscore before the file name and follow by .scss extension. For example, if we are to take variables of the main scss to a partial file, we can cut the variables and paste in a new scss file with the name _variables.scss and we can embed it using the import function in the main scss. 

SCSS file before the split of partial SCSS files: 

File name: main.scss

$primary-color: #d2d2d2;

$secondary-color: #322332;

$accent-color: #435434;

$text-color: #0000;

p{

color:$primary-color;

background-color: $secondary-color;

}

CSS Output

p{

color: #d2d2d2;

background-color: #322332;

}

Split variables to new SCSS files

File name: _variables.scss

$primary-color: #d2d2d2;

$secondary-color: #322332;

$accent-color: #435434;

$text-color: #0000;

File name: main.scss

@import './variables'; 

p{

color:$primary-color;

background-color: $secondary-color;

}

Please note: No need to call the filename with an extension scss, calling just the name of the file is sufficient

CSS Output

p{

color: #d2d2d2;

background-color: #322332;

}

In the next tutorials, we will learn how to create functions and call functions in SASS.

For more details about various courses, check out Ampersand Academy.

Learn Nesting in SASS with easy guide and working examples

Nesting in SASS / SCSS is easy with the help of “&” to achieve the nesting. In SASS “&” behaves uniquely and it denotes the current selector.  The selector changes as we nest down.  If we want to define a division with a width of 80% and aligning to a centre with margin style, we use the following code.

.main{
    width:80%;
    margin: 0 auto;
}

Now if we want to apply the class inside main and with the name of main_new. The class main_new defines the style inside the main class. We can nest it with the following code.

.main{
    width:80%;
    margin:0 auto;
    &_new{
        font-size: 2em;
    }
}

The above SCSS will compile into the following CSS code. 

.main {
    width:80%;
    margin:0 auto;
}
.main_new{
    font-size: 2em;
}

To copy the SCSS expression string to the subclass, we can use “#{&}” to copy the entire main class expression to the following subclass. If we want to achieve the CSS as mentioned below, we can use the nesting with interpolation.

Desired CSS

.main{
    width:80%;
    margin:0 auto;
}

.main .main_new{
    font-size:2em;
}

Actual SCSS Code

.main{
    width:80%;
    margin:0 auto;
    #{&}_new{
        font-size: 2em;
    }
}

Successfully, you have learned nesting in SASS. In the next tutorial, we will be learning Partials in SASS, how to implement partials in your website project