Yogesh Chauhan's Blog

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 {

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.

Most Read

#1 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #2 How to add Read More Read Less Button using JavaScript? #3 How to check if radio button is checked or not using JavaScript? #4 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to replace HTML lists using CSS Counters?CSSEssential SQL Commands We Need to KnowSQL/MySQLHow to make flexbox items of the same size?CSSHow to convert a number rounding to a specified number of decimals in JavaScript?JavaScriptHow to Install PHP Laravel on MacOS Catalina?PHPSpecificity of attribute selectorsCSSHow to obfuscate JavaScript code to hide it from View Source?JavaScriptWordPress: How to create a folder if it doesn’t already exist?WordPressHow to force your website to load securely with an .htaccess file?MiscellaneousThe difference between isFinite() method and isFinite() function in JavaScriptJavaScriptGap in Flex?CSSHow to use @supports rule in CSS?CSS