CINXE.COM

<!doctype html> <html lang="en" class="no-js"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="description" content="Syntactically Awesome Style Sheets" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Sass: Sass Basics</title> <link rel="alternate" type="application/atom+xml" href="/feed.xml" /> <link rel="apple-touch-icon" sizes="152x152" type="image/png" href="/icon.png"> <link rel="icon" type="image/png" sizes="152x152" href="/icon.png"> <link rel="icon" type="image/x-icon" href="/favicon.ico" /> <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro::ital,wght@0,400;0,600;1,400|Source+Sans+Pro:300,400,600|Source+Serif+Pro" media="screen" rel="stylesheet" /> <link href="https://cdn.jsdelivr.net/npm/@docsearch/css@alpha" media="screen" rel="stylesheet" /> <link href="/assets/dist/css/sass.css" media="screen" rel="stylesheet" /> <noscript> <link href="/assets/dist/css/noscript.css" media="screen" rel="stylesheet" /> </noscript>  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-535380-14"></script> <script> window.dataLayer = window.dataLayer || []; function gtag() { dataLayer.push(arguments); } gtag('js', new Date()); gtag('config', 'UA-535380-14'); </script> </head><body data-layout="body" class="guide">  <header class="sl-r-banner" itemtype="https://schema.org/WPHeader" itemscope="itemscope" role="banner"> <div class="sl-c-alert" style="--sl-background--alert: black"> <div class="sl-l-container"> Free Palestine </div> </div> <div class="sl-c-pop-stripe"></div> <div class="sl-l-container"> <div class="sl-l-grid sl-l-grid--full sl-l-large-grid--fit sl-l-large-grid--center sl-l-large-grid--gutters"> <a href="/"><img height="48" alt="Sass" src="/assets/img/logos/logo.svg"></a> <nav class="sl-r-banner__navigation sl-l-grid__column sl-l-large-grid sl-l-large-grid__column--auto-size sl-c-list-horizontal-wrapper" itemtype="https://schema.org/SiteNavigationElement" itemscope="itemscope" role="navigation" aria-label="Site navigation"> <ul> <li><a href="/playground">Playground</a></li> <li><a href="/install">Install</a></li> <li><a href="/guide">Learn Sass</a></li> <li><a href="/blog">Blog</a></li> <li><a href="/documentation">Documentation</a></li> <li><a href="/community">Get Involved</a></li> <li> <div id="docsearch"></div> </li> </ul> </nav> </div> </div> </header> <main class="content" id="main-content" itemprop="mainContentOfPage" role="main"> <h1 class="sl-l-container">Sass Basics</h1> <div class="sl-l-container sl-color--white-background sl-l-section"> <div class="sl-l-medium-holy-grail"> <div class="sl-l-medium-holy-grail__body"> <nav class="sl-l-medium-holy-grail__navigation" role="navigation" aria-label="Content navigation"> <h3>Topics</h3> <nav class="sl-c-list-navigation-wrapper"> <ul> <li><a href="#preprocessing">Preprocessing</a></li> <li><a href="#variables">Variables</a></li> <li><a href="#nesting">Nesting</a></li> <li><a href="#partials">Partials</a></li> <li><a href="#modules">Modules</a></li> <li><a href="#mixins">Mixins</a></li> <li><a href="#inheritance">Inheritance</a></li> <li><a href="#operators">Operators</a></li> </ul> </nav> </nav> <div class="sl-l-medium-holy-grail__main"> <div class="sl-l-container sl-l-container--small"> <div class="sl-c-introduction"> Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. <a href="/install">Go here</a> if you want to learn how to get everything set up. </div> <section id="preprocessing"> <h2 id="preprocessing" tabindex="-1">Preprocessing<a class="anchor" href="#preprocessing">Preprocessing permalink</a></h2> CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Sass has features that don’t exist in CSS yet like nesting, mixins, inheritance, and other nifty goodies that help you write robust, maintainable CSS. Once you start tinkering with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use in your website. The most direct way to make this happen is in your terminal. Once Sass is installed, you can compile your Sass to CSS using the <code>sass</code> command. You’ll need to tell Sass which file to build from, and where to output CSS to. For example, running <code>sass input.scss output.css</code> from your terminal would take a single Sass file, <code>input.scss</code>, and compile that file to <code>output.css</code>. You can also watch individual files or directories with the <code>--watch</code> flag. The watch flag tells Sass to watch your source files for changes, and re-compile CSS each time you save your Sass. If you wanted to watch (instead of manually build) your <code>input.scss</code> file, you’d just add the watch flag to your command, like so: <pre class="language-shellsession"><code class="language-shellsession">sass --watch input.scss output.css </code></pre> You can watch and output to directories by using folder paths as your input and output, and separating them with a colon. In this example: <pre class="language-shellsession"><code class="language-shellsession">sass --watch app/sass:public/stylesheets </code></pre> Sass would watch all files in the <code>app/sass</code> folder for changes, and compile CSS to the <code>public/stylesheets</code> folder. <div class="sl-c-callout sl-c-callout--fun-fact"> <h3>💡 Fun fact:</h3> Sass has two syntaxes! The SCSS syntax (<code>.scss</code>) is used most commonly. It’s a superset of CSS, which means all valid CSS is also valid SCSS. The indented syntax (<code>.sass</code>) is more unusual: it uses indentation rather than curly braces to nest statements, and newlines instead of semicolons to separate them. All our examples are available in both syntaxes. </div> </section> <hr> <section id="variables"> <h2 id="variables" tabindex="-1">Variables<a class="anchor" href="#variables">Variables permalink</a></h2> Think of variables as a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font stacks, or any CSS value you think you’ll want to reuse. Sass uses the <code>$</code> symbol to make something a variable. Here’s an example: <div class="code-example ui-tabs can-split" style="--split-location: 50%"> <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix"><li class="ui-tabs-tab ui-tabs-active"> <a href="#example-variables-scss" class="ui-tabs-anchor">SCSS</a> </li> <li class="ui-tabs-tab"> <a href="#example-variables-sass" class="ui-tabs-anchor">Sass</a> </li> <li class="ui-tabs-tab css-tab"> <a href="#example-variables-css" class="ui-tabs-anchor">CSS</a> </li> </ul><div id="example-variables-scss" class="ui-tabs-panel scss sl-c-code-panel"><a href="/playground#eJwzNFRJy88r0S0uSUzOtlLwSM0pSy3JTE7UUShOzCvWLU4tykyz5lIpKMrMTSyq1E3Oz8kvslJQNjY2tubiSspPqVSo5lJQABlhpWBoYKCqgGScNVAGqgHVAGuuWgA2kiah" class="sl-c-to-playground" target="_blank"> <img class="sl-c-to-playground__logo" height="24" alt="Sass" src="/assets/img/logos/logo.svg" > Playground </a><h3 class="visuallyhidden">SCSS Syntax</h3><pre class="language-scss"><code class="language-scss">$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
 font: 100% $font-stack;
 color: $primary-color;
}
</code></pre></div> <div id="example-variables-sass" class="ui-tabs-panel sass ui-tabs-panel-inactive sl-c-code-panel"><a href="/playground#eJwzMFRJy88r0S0uSUzOtlLwSM0pSy3JTE7UUShOzCvWLU4tykzjUikoysxNLKrUTc7PyS+yUlA2Njbm4krKT6nkUlAAabdSMDQwUFVAMgooAVWMqhkAF7Qkkg==" class="sl-c-to-playground" target="_blank"> <img class="sl-c-to-playground__logo" height="24" alt="Sass" src="/assets/img/logos/logo.svg" > Playground </a><h3 class="visuallyhidden">Sass Syntax</h3><pre class="language-sass"><code class="language-sass">$font-stack: Helvetica, sans-serif
$primary-color: #333

body
 font: 100% $font-stack
 color: $primary-color

</code></pre></div> <div id="example-variables-css" class="ui-tabs-panel css ui-tabs-panel-inactive sl-c-code-panel"><h3 class="visuallyhidden">CSS Output</h3><pre class="language-css"><code class="language-css">body {
 font: 100% Helvetica, sans-serif;
 color: #333;
}



</code></pre></div> </div> When the Sass is processed, it takes the variables we define for the <code>$font-stack</code> and <code>$primary-color</code> and outputs normal CSS with our variable values placed in the CSS. This can be extremely powerful when working with brand colors and keeping them consistent throughout the site. </section> <hr> <section id="nesting"> <h2 id="nesting" tabindex="-1">Nesting<a class="anchor" href="#nesting">Nesting permalink</a></h2> When writing HTML you’ve probably noticed that it has a clear nested and visual hierarchy. CSS, on the other hand, doesn’t. Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Be aware that overly nested rules will result in over-qualified CSS that could prove hard to maintain and is generally considered bad practice. With that in mind, here’s an example of some typical styles for a site’s navigation: <div class="code-example ui-tabs can-split" style="--split-location: 50%"> <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix"><li class="ui-tabs-tab ui-tabs-active"> <a href="#example-nesting-scss" class="ui-tabs-anchor">SCSS</a> </li> <li class="ui-tabs-tab"> <a href="#example-nesting-sass" class="ui-tabs-anchor">Sass</a> </li> <li class="ui-tabs-tab css-tab"> <a href="#example-nesting-css" class="ui-tabs-anchor">CSS</a> </li> </ul><div id="example-nesting-scss" class="ui-tabs-panel scss sl-c-code-panel"><a href="/playground#eJxVjUEKwjAURPc5xVwgYFy4SE/zbUL5+P0JTZSU0rtLGym6GmbewHNO6Y3VAC85AnjSPLF6XIajZgqBdTq7cKm21EWihyaN+7oZswOsCFyy0OLBKqzR3iWNj6Ef6Cs4Px3+W265wV1z63ONrdoQxzRT5aS/xu0DeoU2lQ==" class="sl-c-to-playground" target="_blank"> <img class="sl-c-to-playground__logo" height="24" alt="Sass" src="/assets/img/logos/logo.svg" > Playground </a><h3 class="visuallyhidden">SCSS Syntax</h3><pre class="language-scss"><code class="language-scss">nav {
 ul {
 margin: 0;
 padding: 0;
 list-style: none;
 }

 li { display: inline-block; }

 a {
 display: block;
 padding: 6px 12px;
 text-decoration: none;
 }
}
</code></pre></div> <div id="example-nesting-sass" class="ui-tabs-panel sass ui-tabs-panel-inactive sl-c-code-panel"><a href="/playground#eJxVjUEKhDAMRfc9RS5QUBcuepuMDRLMpMVmhnp7teKimw//Pfh/GBX/DuAnVwB8cV9ZAwytZYyRdX2rcDFf7BAKoEnJuZs1FblkwSMAq7CS/0hatttjrx/ebc+5wjjl2qhRNR9pSTsaJ31+TtSwMEM=" class="sl-c-to-playground" target="_blank"> <img class="sl-c-to-playground__logo" height="24" alt="Sass" src="/assets/img/logos/logo.svg" > Playground </a><h3 class="visuallyhidden">Sass Syntax</h3><pre class="language-sass"><code class="language-sass">nav
 ul
 margin: 0
 padding: 0
 list-style: none

 li
 display: inline-block

 a
 display: block
 padding: 6px 12px
 text-decoration: none


</code></pre></div> <div id="example-nesting-css" class="ui-tabs-panel css ui-tabs-panel-inactive sl-c-code-panel"><h3 class="visuallyhidden">CSS Output</h3><pre class="language-css"><code class="language-css">nav ul {
 margin: 0;
 padding: 0;
 list-style: none;
}
nav li {
 display: inline-block;
}
nav a {
 display: block;
 padding: 6px 12px;
 text-decoration: none;
}


</code></pre></div> </div> You’ll notice that the <code>ul</code>, <code>li</code>, and <code>a</code> selectors are nested inside the <code>nav</code> selector. This is a great way to organize your CSS and make it more readable. </section> <hr> <section id="partials"> <h2 id="partials" tabindex="-1">Partials<a class="anchor" href="#partials">Partials permalink</a></h2> You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is a Sass file named with a leading underscore. You might name it something like <code>_partial.scss</code>. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the <code>@use</code> rule. </section> <hr> <section id="modules"> <h2 id="modules" tabindex="-1">Modules<a class="anchor" href="#modules">Modules permalink</a></h2> <dl class="impl-status sl-c-description-list sl-c-description-list--horizontal"> <div class="compatibility"> Compatibility: </div><div> <dt>Dart Sass</dt> <dd>since 1.23.0</dd> </div><div> <dt>LibSass</dt> <dd>✗</dd> </div><div> <dt>Ruby Sass</dt> <dd>✗</dd> </div><div><a href="javascript:;">➤</a></div></dl><div class="sl-c-callout sl-c-callout--impl-status"> Only Dart Sass currently supports <code>@use</code>. Users of other implementations must use the <a href="/documentation/at-rules/import"><code>@import</code> rule</a> instead. </div> You don’t have to write all your Sass in a single file. You can split it up however you want with the <code>@use</code> rule. This rule loads another Sass file as a module, which means you can refer to its variables, <a href="#mixins">mixins</a>, and <a href="/documentation/at-rules/function">functions</a> in your Sass file with a namespace based on the filename. Using a file will also include the CSS it generates in your compiled output! <div class="code-example ui-tabs can-split" style="--split-location: 50%"> <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix"><li class="ui-tabs-tab ui-tabs-active"> <a href="#example-modules-scss" class="ui-tabs-anchor">SCSS</a> </li> <li class="ui-tabs-tab"> <a href="#example-modules-sass" class="ui-tabs-anchor">Sass</a> </li> <li class="ui-tabs-tab css-tab"> <a href="#example-modules-css" class="ui-tabs-anchor">CSS</a> </li> </ul><div id="example-modules-scss" class="ui-tabs-panel scss sl-c-code-panel"><h3 class="visuallyhidden">SCSS Syntax</h3><pre class="language-scss"><code class="language-scss">// _base.scss
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
 font: 100% $font-stack;
 color: $primary-color;
}
</code></pre><pre class="language-scss"><code class="language-scss">// styles.scss
@use 'base';

.inverse {
 background-color: base.$primary-color;
 color: white;
}
</code></pre></div> <div id="example-modules-sass" class="ui-tabs-panel sass ui-tabs-panel-inactive sl-c-code-panel"><h3 class="visuallyhidden">Sass Syntax</h3><pre class="language-sass"><code class="language-sass">// _base.sass
$font-stack: Helvetica, sans-serif
$primary-color: #333

body
 font: 100% $font-stack
 color: $primary-color

</code></pre><pre class="language-sass"><code class="language-sass">// styles.sass
@use 'base'

.inverse
 background-color: base.$primary-color
 color: white

</code></pre></div> <div id="example-modules-css" class="ui-tabs-panel css ui-tabs-panel-inactive sl-c-code-panel"><h3 class="visuallyhidden">CSS Output</h3><pre class="language-css"><code class="language-css">body {
 font: 100% Helvetica, sans-serif;
 color: #333;
}

.inverse {
 background-color: #333;
 color: white;
}








</code></pre></div> </div> Notice we’re using <code>@use 'base';</code> in the <code>styles.scss</code> file. When you use a file you don’t need to include the file extension. Sass is smart and will figure it out for you. </section> <hr> <section id="mixins"> <h2 id="mixins" tabindex="-1">Mixins<a class="anchor" href="#mixins">Mixins permalink</a></h2> Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. It helps keep your Sass very DRY. You can even pass in values to make your mixin more flexible. Here’s an example for <code>theme</code>. <div class="code-example ui-tabs can-split" style="--split-location: 50%"> <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix"><li class="ui-tabs-tab ui-tabs-active"> <a href="#example-mixins-scss" class="ui-tabs-anchor">SCSS</a> </li> <li class="ui-tabs-tab"> <a href="#example-mixins-sass" class="ui-tabs-anchor">Sass</a> </li> <li class="ui-tabs-tab css-tab"> <a href="#example-mixins-css" class="ui-tabs-anchor">CSS</a> </li> </ul><div id="example-mixins-scss" class="ui-tabs-panel scss sl-c-code-panel"><a href="/playground#eJyFjrEKwjAQhvc8xYEOFjRYwSVdOgjdfYM0ubShbSKXBivSd9fGLoIgNxz89/0fl+flYCfrYGxxwN02LQEXSV1F8pHBkwHUUnUN+ei0gA9RLKmfDqGV2t8FHN+T3yagpparZA/8dM4WUPnek4CNMaZgM2PcOuOTuLRO9VEjrNKZcdkjjT+OX69dUWeJDlEpDOEfXxGiWxovNV1Lkw==" class="sl-c-to-playground" target="_blank"> <img class="sl-c-to-playground__logo" height="24" alt="Sass" src="/assets/img/logos/logo.svg" > Playground </a><h3 class="visuallyhidden">SCSS Syntax</h3><pre class="language-scss"><code class="language-scss">@mixin theme($theme: DarkGray) {
 background: $theme;
 box-shadow: 0 0 1px rgba($theme, .25);
 color: #fff;
}

.info {
 @include theme;
}
.alert {
 @include theme($theme: DarkRed);
}
.success {
 @include theme($theme: DarkGreen);
}


</code></pre></div> <div id="example-mixins-sass" class="ui-tabs-panel sass ui-tabs-panel-inactive sl-c-code-panel"><a href="/playground#eJwzMHTIzazIzFMoyUjNTdVQAVNWCi6JRdnuRYmVmlwKCkmJydnpRfmleSlWChB5kGB+hW5xRmJKfrmVggEQGhZUKBSlJyVCTdBR0DMyBWlOzs/JL7JSUE5LS+Pi0svMS8sHCjpk5iXnlKakQiwFiifmpBaVYEiguCYoNUUTqLK4NDk5tbgYv1r3otTUPE0AvxxFvA==" class="sl-c-to-playground" target="_blank"> <img class="sl-c-to-playground__logo" height="24" alt="Sass" src="/assets/img/logos/logo.svg" > Playground </a><h3 class="visuallyhidden">Sass Syntax</h3><pre class="language-sass"><code class="language-sass">@mixin theme($theme: DarkGray)
 background: $theme
 box-shadow: 0 0 1px rgba($theme, .25)
 color: #fff

.info
 @include theme

.alert
 @include theme($theme: DarkRed)

.success
 @include theme($theme: DarkGreen)




</code></pre></div> <div id="example-mixins-css" class="ui-tabs-panel css ui-tabs-panel-inactive sl-c-code-panel"><h3 class="visuallyhidden">CSS Output</h3><pre class="language-css"><code class="language-css">.info {
 background: DarkGray;
 box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
 color: #fff;
}

.alert {
 background: DarkRed;
 box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
 color: #fff;
}

.success {
 background: DarkGreen;
 box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
 color: #fff;
}
</code></pre></div> </div> To create a mixin you use the <code>@mixin</code> directive and give it a name. We’ve named our mixin <code>theme</code>. We’re also using the variable <code>$theme</code> inside the parentheses so we can pass in a <code>theme</code> of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with <code>@include</code> followed by the name of the mixin. </section> <hr> <section id="inheritance"> <h2 id="extend-inheritance" tabindex="-1">Extend/Inheritance<a class="anchor" href="#extend-inheritance">Extend/Inheritance permalink</a></h2> Using <code>@extend</code> lets you share a set of CSS properties from one selector to another. In our example we’re going to create a simple series of messaging for errors, warnings and successes using another feature which goes hand in hand with extend, placeholder classes. A placeholder class is a special type of class that only prints when it is extended, and can help keep your compiled CSS neat and clean. <div class="code-example ui-tabs"> <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix"><li class="ui-tabs-tab ui-tabs-active"> <a href="#example-extend-inheritance-scss" class="ui-tabs-anchor">SCSS</a> </li> <li class="ui-tabs-tab"> <a href="#example-extend-inheritance-sass" class="ui-tabs-anchor">Sass</a> </li> <li class="ui-tabs-tab css-tab"> <a href="#example-extend-inheritance-css" class="ui-tabs-anchor">CSS</a> </li> </ul><div id="example-extend-inheritance-scss" class="ui-tabs-panel scss sl-c-code-panel"><a href="/playground#eJyVUEFqwzAQvOsVC6EUAo5rfHMuhT4h/YAibWzBVlJ37dqh9O+V7KQNPgRykWBnZmdmq6rcwnvnBN4OBxgdEUR2vocjGj0IwtMHiugWC+k0o4XExKlHb9HuYFuqNf6tAI6BLXIDVZxAAjkLG2PMPiFRW+t8m6CXOOWBCRQSc1PX9V79KFWWN2mCf+7XcfBz0FR06Nqul5zG4xfyfya1YuQ81kkkfW7gRDi75r8YWccG8js77y5FZsXrsm/dfiHKYEwa3yder1BcGraM6Bc9Mgd+TP3nPWr26YCPqc9IFMa04BeaM6IW" class="sl-c-to-playground" target="_blank"> <img class="sl-c-to-playground__logo" height="24" alt="Sass" src="/assets/img/logos/logo.svg" > Playground </a><h3 class="visuallyhidden">SCSS Syntax</h3><pre class="language-scss"><code class="language-scss">/* This CSS will print because %message-shared is extended. */
%message-shared {
 border: 1px solid #ccc;
 padding: 10px;
 color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
 display: flex;
 flex-wrap: wrap;
}

.message {
 @extend %message-shared;
}

.success {
 @extend %message-shared;
 border-color: green;
}

.error {
 @extend %message-shared;
 border-color: red;
}

.warning {
 @extend %message-shared;
 border-color: yellow;
}
</code></pre></div> <div id="example-extend-inheritance-sass" class="ui-tabs-panel sass ui-tabs-panel-inactive sl-c-code-panel"><a href="/playground#eJyVUEFqwzAQvOsVCyEUAo4TfPOp0CekH1CkqS3YSsrKrp3fZ01S2vpQyEWLdmZ2Z/ZwrHf03odCb6cTTYGZsoQ40BnOjgW0/UQptkNVeivwpEzMA6KH39OuNivcEJ2TeEhLxzxTSRw8bZxzCmTrfYidIoc8698lTsrbNE1jTF3/spHiy7D2gctoueoRun4oi42IL8iPGfOXofN9KJnttaUPxrJvKdUkNre0vMbsH94Ve73PWcdVThmd094/nO/I1SNQJ0BUJUSSPKG775usRL3SE7ormNN0AxfumIU=" class="sl-c-to-playground" target="_blank"> <img class="sl-c-to-playground__logo" height="24" alt="Sass" src="/assets/img/logos/logo.svg" > Playground </a><h3 class="visuallyhidden">Sass Syntax</h3><pre class="language-sass"><code class="language-sass">/* This CSS will print because %message-shared is extended. */
%message-shared
 border: 1px solid #ccc
 padding: 10px
 color: #333

// This CSS won't print because %equal-heights is never extended.
%equal-heights
 display: flex
 flex-wrap: wrap

.message
 @extend %message-shared

.success
 @extend %message-shared
 border-color: green

.error
 @extend %message-shared
 border-color: red

.warning
 @extend %message-shared
 border-color: yellow






</code></pre></div> <div id="example-extend-inheritance-css" class="ui-tabs-panel css ui-tabs-panel-inactive sl-c-code-panel"><h3 class="visuallyhidden">CSS Output</h3><pre class="language-css"><code class="language-css">/* This CSS will print because %message-shared is extended. */
.warning, .error, .success, .message {
 border: 1px solid #ccc;
 padding: 10px;
 color: #333;
}

.success {
 border-color: green;
}

.error {
 border-color: red;
}

.warning {
 border-color: yellow;
}













</code></pre></div> </div> What the above code does is tells <code>.message</code>, <code>.success</code>, <code>.error</code>, and <code>.warning</code> to behave just like <code>%message-shared</code>. That means anywhere that <code>%message-shared</code> shows up, <code>.message</code>, <code>.success</code>, <code>.error</code>, & <code>.warning</code> will too. The magic happens in the generated CSS, where each of these classes will get the same CSS properties as <code>%message-shared</code>. This helps you avoid having to write multiple class names on HTML elements. You can extend most simple CSS selectors in addition to placeholder classes in Sass, but using placeholders is the easiest way to make sure you aren’t extending a class that’s nested elsewhere in your styles, which can result in unintended selectors in your CSS. Note that the CSS in <code>%equal-heights</code> isn’t generated, because <code>%equal-heights</code> is never extended. </section> <hr> <section id="operators"> <h2 id="operators" tabindex="-1">Operators<a class="anchor" href="#operators">Operators permalink</a></h2> Doing math in your CSS is very helpful. Sass has a handful of standard math operators like <code>+</code>, <code>-</code>, <code>*</code>, <code>math.div()</code>, and <code>%</code>. In our example we’re going to do some simple math to calculate widths for an <code>article</code> and <code>aside</code>. <div class="code-example ui-tabs can-split" style="--split-location: 50%"> <ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix"><li class="ui-tabs-tab ui-tabs-active"> <a href="#example-operators-scss" class="ui-tabs-anchor">SCSS</a> </li> <li class="ui-tabs-tab"> <a href="#example-operators-sass" class="ui-tabs-anchor">Sass</a> </li> <li class="ui-tabs-tab css-tab"> <a href="#example-operators-css" class="ui-tabs-anchor">CSS</a> </li> </ul><div id="example-operators-scss" class="ui-tabs-panel scss sl-c-code-panel"><a href="/playground#eJx1zUEKwjAQheF9TjEEBBUtCULBFMF7iIuQTO1A0pQk1Rbx7kbFna5m88/3pDyOCYEnnZLyOne8Yawyoc+aeoxwZwCW0uD0rKB1ODXswZiOmYzDUwwOD9yXlJ/f6Y1s7hS8oMrSdVkLMUwb2NflrGANUojFR0hkv/8m+MGhx7IZ5z/Q7icEJYgX6rcO26xAjzkU/QnQWUHM" class="sl-c-to-playground" target="_blank"> <img class="sl-c-to-playground__logo" height="24" alt="Sass" src="/assets/img/logos/logo.svg" > Playground </a><h3 class="visuallyhidden">SCSS Syntax</h3><pre class="language-scss"><code class="language-scss">@use "sass:math";

.container {
 display: flex;
}

article[role="main"] {
 width: math.div(600px, 960px) * 100%;
}

aside[role="complementary"] {
 width: math.div(300px, 960px) * 100%;
 margin-left: auto;
}
</code></pre></div> <div id="example-operators-sass" class="ui-tabs-panel sass ui-tabs-panel-inactive sl-c-code-panel"><a href="/playground#eJxtjc0KwjAQhO95iiUgqGhJEQoGBN9DPCzJ1i7kjyTV9u2NB289zWHm+0b197kQyIKlaI91kkJ0JoaKHCgLAMslOVw1jI4WITBXNo4eOTq6Sd9W8tlWH7Z10vATdJbf+0GptJzgOrQ4wBF6pXYNLmz/qIk+OfLUnvK66bhsOaD1+cXh7GisGnCu8QvSOz0+" class="sl-c-to-playground" target="_blank"> <img class="sl-c-to-playground__logo" height="24" alt="Sass" src="/assets/img/logos/logo.svg" > Playground </a><h3 class="visuallyhidden">Sass Syntax</h3><pre class="language-sass"><code class="language-sass">@use "sass:math"

.container
 display: flex

article[role="main"]
 width: math.div(600px, 960px) * 100%

aside[role="complementary"]
 width: math.div(300px, 960px) * 100%
 margin-left: auto



</code></pre></div> <div id="example-operators-css" class="ui-tabs-panel css ui-tabs-panel-inactive sl-c-code-panel"><h3 class="visuallyhidden">CSS Output</h3><pre class="language-css"><code class="language-css">.container {
 display: flex;
}

article[role=main] {
 width: 62.5%;
}

aside[role=complementary] {
 width: 31.25%;
 margin-left: auto;
}


</code></pre></div> </div> We’ve created a very simple fluid grid, based on 960px. Operations in Sass let us do something like take pixel values and convert them to percentages without much hassle. </section> </div> </div> </div> </div> </div> <div class="sl-c-alert"> <div class="sl-l-container sl-c-list-horizontal-wrapper" aria-labelledby="release-nav"> <ul class="sl-l-grid--justify-center"> <li id="release-nav">Current Releases:</li> <li><a href="/dart-sass">Dart Sass</a> <a href="https://github.com/sass/dart-sass/releases/tag/1.81.0">1.81.0</a></li> <li><a href="/libsass">LibSass</a> <a href="https://github.com/sass/libsass/releases/tag/3.6.6">3.6.6</a></li> <li><a href="/ruby-sass">Ruby Sass</a> ⚰</li> <li class="sl-l-grid__column sl-l-large-grid__column--auto-size"><a href="/implementation">Implementation Guide</a></li> </ul> </div> </div> </main> <footer class="site-footer contentinfo" itemtype="https://schema.org/WPFooter" itemscope="itemscope" role="contentinfo"> <div class="sl-l-container"> <div class="sl-l-grid sl-l-grid--full sl-l-large-grid--fit sl-l-large-grid--center sl-l-large-grid--gutters"> <div class="sl-l-grid__column"> Sass © 2006–2024 the Sass team, and numerous contributors. It is available for use and modification under the <a href="https://github.com/sass/dart-sass/blob/main/LICENSE">MIT License</a>. <nav class="sl-c-list-horizontal-wrapper sl-c-list-wrap"> <ul> <li><a href="https://github.com/sass">Sass on GitHub</a></li> <li><a href="https://github.com/sass/sass-site">Website Source Code</a></li> <li><a href="/styleguide">Style Guide</a></li> <li><a href="/community-guidelines">Community Guidelines</a></li> </ul> </nav> </div> <div class="sl-l-grid__column sl-l-large-grid__column--auto-size sl-l-large-grid--justify-right sl-c-footer-link-grid"> <a class="twitter-follow-button" href="https://twitter.com/SassCSS" data-show-count="false" data-size="large">Follow @SassCSS</a> <a class="sl-image-link" href="https://www.netlify.com"><img alt="Deploys by Netlify" src="https://www.netlify.com/v3/img/components/netlify-color-bg.svg"/></a> <a class="sl-image-link mac-stadium-icon" href="https://www.macstadium.com/"><img alt="Powered by MacStadium" class="mac-stadium-icon" src="https://uploads-ssl.webflow.com/5ac3c046c82724970fc60918/5c019d917bba312af7553b49_MacStadium-developerlogo.png"></a> </div> </div> </div> </footer> <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script> <script> docsearch({ container: '#docsearch', appId: 'Q9MULQONSV', indexName: 'sass-lang', apiKey: '2ebc7881b79986f58dc2f424769bf3fc', transformItems: function(hits) { var domain = window.location.origin + "/"; hits.forEach(function(hit) { if (! hit.url.startsWith(domain)) { hit.url = hit.url.replace(/^https?:\/\/[^\/]+\//, domain); } }); return hits; } }); </script> <script> !function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (! d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + '://platform.twitter.com/widgets.js'; fjs.parentNode.insertBefore(js, fjs); } }(document, 'script', 'twitter-wjs'); </script> <script src="/assets/dist/js/sass.js"></script>  </body> </html>