YogeshChauhan . com

Content Blocks in SCSS (Sass)

in SCSS on April 25, 2021

As we saw in the animation example, we can pass the whole block of style in the @mixin rules.

The block of style called a “content block” in SassScript.

How to pass the content block?

Just include @content at-rule in @mixin body to pass the entire content block.

Just like this:


@mixin hover {
  &:not([disabled]):hover {
    @content;
  }
}

Examples: pass the content block

Checkout the working example:

@include multiple @content

A Content Block can only see (has access to) the local variables, only where the @mixin is included. In other words, a Content Block is lexically scoped.

How to pass arguments to Content Blocks?

Passing arguments in content blocks is same as passing arguments to any function.

Just add arguments to @content() when you include it in @mixin.

How to accept the arguments?

Just write the @include using ().

Examples: pass arguments to Content Blocks

Here’s the example above with passing arguments and taking it to apply style.

If you pass arguments to content blocks using mixin then the content blocks must accept the arguments.

amazon

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to uninstall Cocoapods from the Mac OS? #4 How to add Read More Read Less Button using JavaScript? #5 How to Use SQL MAX() Function with Dates? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

May 7 How to disable right click and drag and drop of images using jQuery? May 7 How to render Lists in React? May 7 What’s the difference between variables in CSS and SCSS (Sass)? May 7 How to define variables in SCSS (Sass)? May 7 How to show and hide an element on click in React? May 5 Use inline if to make a shorter conditional syntax in React

You might also like these

Is Software Really Eating The World? I don’t think soMiscHow to change HTML content on click using JavaScript?JavaScriptClean Form Input With These PHP Functions Before Inserting into DatabasePHPSQL Right JoinSQL/MySQLSome SQL LIKE Operators We Need to Keep in MindSQL/MySQLSorting Arrays in JavaScriptJavaScriptHow to Use SQL MAX() Function with Dates?SQL/MySQLHow to obfuscate JavaScript code to hide it from View Source?JavaScriptWhat are components in Angular?AngularMake sure your links have descriptive textUI/UXForcing the domain to serve securely using HTTPSMiscIs there a difference between SCSS and Sass?SCSS