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 {
    @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.


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 add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
Recursive WITH Queries in Postgres (Common Table Expressions)PostgresResponsive Masonry Grid using CSS columns PropertyCSSImplicit and Explicit Joins in Oracle SQLSQL/MySQLHow to Sort (Shuffle) an Array in Random Order in JavaScript?JavaScriptHow to clean up after a plugin uninstall in WordPress?WordPressLearn to make a responsive gallery using CSS Grid and without media queriesCSSHow to add recaptcha version 3 to PHP website?PHPHow destructuring works in React?ReactHow to create a Random Hex Color generator using JavaScript?JavaScriptQuick Introduction to 11 Array Iteration Methods in JavaScriptJavaScriptSome interesting HTML Input Attributes to rememberHTMLA Quick Comparison of JOIN and Subquery in SQLSQL/MySQL