{"componentChunkName":"component---node-modules-rocketseat-gatsby-theme-docs-core-src-templates-docs-query-js","path":"/sass/contents","result":{"data":{"mdx":{"id":"5703f62c-951d-5d22-b24c-c99c36e59103","excerpt":"Contents 01. But first, what is a CSS preprocessor? A  CSS  preprocessor is a program that lets you generate  CSS  from the preprocessor's own unique syntax…","fields":{"slug":"/sass/contents/"},"frontmatter":{"title":"","description":null,"image":null,"disableTableOfContents":null},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", {\n    \"id\": \"contents\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#contents\",\n    \"aria-label\": \"contents permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Contents\"), mdx(\"h2\", {\n    \"id\": \"01-but-first-what-is-a-css-preprocessor\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#01-but-first-what-is-a-css-preprocessor\",\n    \"aria-label\": \"01 but first what is a css preprocessor permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"01. But first, what is a CSS preprocessor?\"), mdx(\"p\", null, \"A \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"CSS\"), \" preprocessor is a program that lets you generate \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"CSS\"), \" from the preprocessor's own unique syntax. There are many \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"CSS\"), \" preprocessors to choose from, however most \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"CSS\"), \" preprocessors will add some features that don't exist in pure \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"CSS\"), \", such as mixins, nesting selector, inheritance selector, and so on. These features make the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"CSS\"), \" structure more readable and easier to maintain.\"), mdx(\"h3\", {\n    \"id\": \"compiling-you-scss\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#compiling-you-scss\",\n    \"aria-label\": \"compiling you scss permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Compiling you SCSS\"), mdx(\"p\", null, \"Preprocessing CSS is becoming an standard in the workflow of web development. Preprocessing is a process in which the code we write in another language (Sass, LESS, Stylus, postCSS...etc) is converted automatically to standard CSS before being executed in our website. Using a CSS preprocessor as Sass will give you everything CSS has and many more things (mixins, conditionals, nesting...etc.). This features are intended to make CSS development faster and more effective\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Sass file ----> preprocessor tool ----> Standard CSS\")), mdx(\"p\", null, \"We will be learning Sass since is the most common CSS preprocessor language but there are more:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://sass-lang.com/\"\n  }, \"Sass: Sintactically awesome Style Sheets\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"http://lesscss.org/\"\n  }, \"LESS\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"http://stylus-lang.com/\"\n  }, \"Stylus\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://postcss.org/\"\n  }, \"PostCSS\"))), mdx(\"h3\", {\n    \"id\": \"sass-vs-scss\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#sass-vs-scss\",\n    \"aria-label\": \"sass vs scss permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"SASS vs SCSS\"), mdx(\"p\", null, \"You will probably hear about \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"SCSS\"), \" instead of \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Sass\"), \". \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"SCSS\"), \" is the new syntax that \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Sass\"), \" uses, which is really similar to plain \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"CSS:\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"SASS Syntax\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-sass\"\n  }, \"$font-stack: Helvetica, sans-serif\\n$primary-color: #333\\n\\nbody\\n  font: 100% $font-stack\\n  color: $primary-color\\n\")), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"SCSS Syntax (The one we will be using)\")), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-scss\"\n  }, \"$font-stack: Helvetica, sans-serif;\\n$primary-color: #333;\\n\\nbody {\\n  font: 100% $font-stack;\\n  color: $primary-color;\\n}\\n\")), mdx(\"p\", null, \"Can you spot the differences?\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"In \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"SASS\"), \" there are no semicolons\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"In \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"SASS\"), \" there are no curly braces\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The spacing in \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"SASS\"), \" is really important\")), mdx(\"h2\", {\n    \"id\": \"exercises\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#exercises\",\n    \"aria-label\": \"exercises permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Exercises\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"To get you ready for what's coming next, you will need to convert the project from the \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"CSS\"), \" section (\", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage\"\n  }, \"https://www.freecodecamp.org/learn/responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage\"), \") into a \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"SCSS\"), \" project.\")), mdx(\"h2\", {\n    \"id\": \"02-what-can-i-do-with-scss\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#02-what-can-i-do-with-scss\",\n    \"aria-label\": \"02 what can i do with scss permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"02. \", mdx(\"strong\", {\n    parentName: \"h2\"\n  }, \"What can I do with SCSS?\")), mdx(\"p\", null, \"SCSS provides a series of tools and utils that will help you to build your site styles in a faster and simpler way:\"), mdx(\"h3\", {\n    \"id\": \"variables\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#variables\",\n    \"aria-label\": \"variables permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Variables\"), mdx(\"p\", null, \"A variable is a way of defining something to be reused. For example, in CSS is very common to use HEX or RGB colors, which are a bit difficult to remember, or to change them all at the same time.\"), mdx(\"p\", null, \"To define variables you only need a name prefixed with the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"$\"), \" symbol and a value:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-scss\"\n  }, \"$name: value;\\n\")), mdx(\"p\", null, \"Then, you can define variables like this:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-scss\"\n  }, \"$myColor: rgba(154, 165, 67, 0.5);\\n$space: 16px;\\n$spaceHalf: 8px;\\n$companyLogoPath: './images/awesomeLogo.jpg';\\n\")), mdx(\"p\", null, \"And then reuse them everywhere:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-scss\"\n  }, \".my-button {\\n    border-color: $myColor;\\n    background-color: $myColor;\\n    padding: $spaceHalf $space;\\n}\\n\\n.my-header {\\n    background-color: $myColor;\\n    margin-bottom: $space;\\n}\\n\\n.my-header-logo {\\n  background-image: url($companyLogoPath);\\n}\\n\\n.my-footer-logo {\\n  background-image: url($companyLogoPath);\\n}\\n\")), mdx(\"p\", null, \"Variables in SCSS can hold every value we want, such as colors, fonts, sizes and any other value we can use as a CSS property.\"), mdx(\"p\", null, \"Although SASS variables are really handy and one of the main features of CSS preprocessors, they are less powerful than Custom Properties, since the latter let you modify their value via Javascript, which can be extremely valuable when creating all sorts of visual effects in your app.\"), mdx(\"p\", null, \"\\u26A0\\uFE0F \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Use custom properties instead of Sass variables if the browser supports it.\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://sass-lang.com/documentation/variables\"\n  }, \"More in depth information about Sass variables\")), mdx(\"h3\", {\n    \"id\": \"exercises-1\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#exercises-1\",\n    \"aria-label\": \"exercises 1 permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Exercises\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/front-end-libraries/sass/store-data-with-sass-variables\"\n  }, \"Learn to store data via SASS variables\"))), mdx(\"h3\", {\n    \"id\": \"nesting\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#nesting\",\n    \"aria-label\": \"nesting permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Nesting\"), mdx(\"p\", null, \"When writing HTML you've probably noticed that it has a clear nested and visual hierarchy. CSS, on the other hand, doesn't.\"), mdx(\"p\", null, \"Nesting selectors will help to keep your styles \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"clean\"), \" and \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"tidy\"), \", following the same visual hierarchy of your HTML. To use nesting you only need to define something like this:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-scss\"\n  }, \".my-header {\\n    a {\\n        color: blue;\\n  }\\n\\n    .my-button {\\n        border: 1px solid red;\\n    }\\n}\\n\")), mdx(\"p\", null, \"Which will be converted to:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-scss\"\n  }, \".my-header a {\\n    color: blue;\\n}\\n\\n.my-header .my-button {\\n    border: 1px solid red;\\n}\\n\")), mdx(\"p\", null, \"Sometimes, you may need to refer to the parent selector when nesting different styles, like when you need to add some selector like :\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"hover\"), \" to update the styles. To do that, you can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"&\"), \" character:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-scss\"\n  }, \".my-button {\\n    color: red;\\n    &:hover {\\n        color: blue\\n    }\\n}\\n\")), mdx(\"p\", null, \"With that selector the color of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".my-button\"), \" will change when the user hovers it.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Execute that code on Sassmeister to see what happens\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://www.sitepoint.com/sass-basics-nesting/\"\n  }, \"Sass nesting basics\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://css-tricks.com/the-sass-ampersand/\"\n  }, \"The Sass ampersand\")), mdx(\"h3\", {\n    \"id\": \"exercises-2\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#exercises-2\",\n    \"aria-label\": \"exercises 2 permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Exercises\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/front-end-libraries/sass/nest-css-with-sass\"\n  }, \"Nest CSS with SASS\"))), mdx(\"h2\", {\n    \"id\": \"03-advanced-sass\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#03-advanced-sass\",\n    \"aria-label\": \"03 advanced sass permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"03. Advanced Sass\"), mdx(\"p\", null, \"Before getting on with the next section, get a CSS file from a previous project and try to convert it (or part of it) to Sass using sassmeister. Remember to include custom properties, nesting selectors and sass variables.\"), mdx(\"p\", null, \"After you've done the above part, follow these steps to install a Sass compiler:\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Download and install \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"http://koala-app.com/\"\n  }, \"KoalaApp\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Create a new folder named \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"04_advanced_ui\"), \" in your classes folder\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Create a file named \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"main.scss\"), \".\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Copy and paste the code from Sassmeister you just created.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Open \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"Koala\"), \" and on the \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"+\"), \" symbol. Search the folder we just created and add it.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"You should see your \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"main.scss\"), \" file. Select it.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Click on \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"compile\"), \" button.\")), mdx(\"p\", null, \"This process should create two files: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"main.css\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"main.map.css\"), \". Forget about the last one for now, its just a \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://blog.teamtreehouse.com/introduction-source-maps\"\n  }, \"sourcemap\")), mdx(\"p\", null, \"Open you \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"main.css\"), \". It should be the CSS compiled as Sassmeister did. Now you are able to compile your own files.\\nRemember that you should modify only on the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"main.scss\"), \" but your HTML should include the automatically generated \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"main.css\"), \" file.\"), mdx(\"p\", null, \"The process is the following:\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Edit \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"main.scss\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Compile using koala.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Link the generated \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"main.css\"), \" to your html \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"head\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Confirm that the CSS works.\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"Modify and compile again \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"main.scss\"))), mdx(\"h3\", {\n    \"id\": \"partials\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#partials\",\n    \"aria-label\": \"partials permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Partials\"), mdx(\"p\", null, \"CSS files on large applications can become difficult to read because\\nthey can become reaaaaaally long. Sass allows to separate the files into\\nsmall chunks of code that can be imported into other files to reduce\\nthe size. Files can be separated by responsibility.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Architecting a CSS project is probably one of the most\\ndifficult things you will have to do in a project\\u2019s life. Keeping the\\narchitecture consistent and meaningful is even harder.\")), mdx(\"p\", null, \"For example, this could be a folder structure according to Sass Guidelines:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"styles/\\n|\\n|\\u2013 abstracts/\\n|   |\\u2013 _variables.scss    # Sass Variables\\n|   |\\u2013 _mixins.scss       # Sass Mixins\\n|\\n|\\u2013 base/\\n|   |\\u2013 _reset.scss        # Reset/normalize\\n|   |\\u2013 _typography.scss   # Typography rules\\n|   \\u2026                     # Etc.\\n|\\n|\\u2013 components/\\n|   |\\u2013 _buttons.scss      # Buttons\\n|   |\\u2013 _carousel.scss     # Carousel\\n|   |\\u2013 _cover.scss        # Cover\\n|   |\\u2013 _dropdown.scss     # Dropdown\\n|   \\u2026                     # Etc.\\n|\\n|\\u2013 layout/\\n|   |\\u2013 _navigation.scss   # Navigation\\n|   |\\u2013 _header.scss       # Header\\n|   |\\u2013 _footer.scss       # Footer\\n|   |\\u2013 _sidebar.scss      # Sidebar\\n|   |\\u2013 _forms.scss        # Forms\\n|   \\u2026                     # Etc.\\n|\\n|\\u2013 pages/\\n|   |\\u2013 _home.scss         # Home specific styles\\n|   |\\u2013 _contact.scss      # Contact specific styles\\n|   \\u2026                     # Etc.\\n|\\n|\\u2013 main.scss              # Main Sass file\\n\")), mdx(\"h3\", {\n    \"id\": \"imports\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#imports\",\n    \"aria-label\": \"imports permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Imports\"), mdx(\"p\", null, \"From the main file, we can import the chunks of CSS into a single file that will be compiled into a CSS file. Magic!\"), mdx(\"p\", null, \"The \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"main.scss\"), \" file could look somethink like this:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-sass\"\n  }, \"@import 'abstracts/variables';\\n@import 'abstracts/mixins';\\n\\n@import 'base/reset';\\n@import 'base/typography';\\n\\n@import 'layout/navigation';\\n@import 'layout/grid';\\n@import 'layout/header';\\n@import 'layout/footer';\\n@import 'layout/sidebar';\\n@import 'layout/forms';\\n\\n@import 'components/buttons';\\n@import 'components/carousel';\\n@import 'components/cover';\\n@import 'components/dropdown';\\n\\n@import 'pages/home';\\n@import 'pages/contact';\\n\\n@import 'themes/theme';\\n@import 'themes/admin';\\n\")), mdx(\"h3\", {\n    \"id\": \"rules-for-import\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#rules-for-import\",\n    \"aria-label\": \"rules for import permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Rules for import\"), mdx(\"p\", null, \"Notice that files that there are chunks that will be imported are preceded by the symbol \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"_\"), \" as in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"_variables.scss\"), \" but, when you import them, you should omit the underscore symbol. This symbol is telling sass that this file is just a part of a larger file and will not try to compile it.\"), mdx(\"p\", null, \"Remember:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"one file per \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"@import\"), \";\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"one \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"@import\"), \" per line;\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"no new line between two imports from the same folder;\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"a new line after the last import from a folder;\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"file extensions and leading underscores omitted.\")), mdx(\"h3\", {\n    \"id\": \"order-of-imports\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#order-of-imports\",\n    \"aria-label\": \"order of imports permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Order of imports\"), mdx(\"p\", null, \"And remember, in CSS the order of the CSS is important. If two rules\\nhave the same name, rules will be merged and the last one will overwrite\\nthe previous one. Be careful with your project naming.\"), mdx(\"p\", null, \"\\u26A0\\uFE0F By the time of this writing, the use of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@import\"), \" is being deprecated in favour of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@use\"), \" . For now you don't need to worry about this. We think it's important that you know first this basic feature to know the differences between one and another and then find out about what \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@use\"), \" has to offer to start using it. For now, you can safely use both of them interchangeably. Read the following articles to know more!\"), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://riptutorial.com/sass/example/14566/partials\"\n  }, \"Sass Partials\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://stefaniefluin.medium.com/the-new-sass-module-system-out-with-import-in-with-use-e1bd8ba032d0\"\n  }, \"The new Sass Module System: Out with \", mdx(\"inlineCode\", {\n    parentName: \"a\"\n  }, \"@import\"), \", in with \", mdx(\"inlineCode\", {\n    parentName: \"a\"\n  }, \"@use\"))), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://css-tricks.com/introducing-sass-modules/\"\n  }, \"Introducing Sass modules\")), mdx(\"h3\", {\n    \"id\": \"exercises-3\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#exercises-3\",\n    \"aria-label\": \"exercises 3 permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Exercises\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/front-end-libraries/sass/split-your-styles-into-smaller-chunks-with-partials\"\n  }, \"Split your styles into smaller chunks with partials\"))), mdx(\"h3\", {\n    \"id\": \"mixins\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#mixins\",\n    \"aria-label\": \"mixins permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Mixins\"), mdx(\"p\", null, \"Mixins are one of the most used features from the whole Sass language. They are the key to reusability and DRY components. And for good reason: mixins allow authors to define styles that can be reused throughout the stylesheet.\"), mdx(\"p\", null, \"They can contain full CSS rules and pretty much everything that is  allowed anywhere in a Sass document. They can even take arguments, just like functions. Needless to say, the possibilities are endless.\"), mdx(\"p\", null, \"This is how a mixin looks like:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-sass\"\n  }, \"/*\\n// Define the mixin\\n// This mixin is named `size` and receives two parameters: width and height\\n// If the height parameter its not set, it will be equal to width\\n// This mixin returns a piece of CSS with width and height.\\n*/\\n@mixin size($width, $height: $width) {\\n  width: $width;\\n  height: $height;\\n}\\n\\n/*\\n// And use it anywhere\\n*/\\n.box {\\n    @include size(1rem);\\n}\\n\\n// Equals\\n/*\\n    width: 1rem;\\n.box {\\n    height: 1rem;\\n*/\\n\")), mdx(\"h3\", {\n    \"id\": \"argument-less-mixins\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#argument-less-mixins\",\n    \"aria-label\": \"argument less mixins permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Argument-less mixins\"), mdx(\"p\", null, \"A mixin might not receive any arguments:\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-sass\"\n  }, \"@mixin large-font {\\n    font-family: 'Roboto', Arial;\\n    font-weight: 600;\\n    font-size: 2rem;\\n}\\n\\n.selector {\\n    @include large-font;\\n}\\n\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://scotch.io/tutorials/how-to-use-sass-mixins\"\n  }, \"How to use Sass Mixins\")), mdx(\"p\", null, \"\\uD83D\\uDCD6 \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://marksheet.io/sass-mixins.html\"\n  }, \"Sass Mixins\")), mdx(\"h3\", {\n    \"id\": \"exercises-4\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#exercises-4\",\n    \"aria-label\": \"exercises 4 permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Exercises\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/front-end-libraries/sass/create-reusable-css-with-mixins\"\n  }, \"Create reusable CSS with mixins\"))), mdx(\"h3\", {\n    \"id\": \"sass-exercises\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#sass-exercises\",\n    \"aria-label\": \"sass exercises permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Sass Exercises\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/front-end-libraries/sass/use-if-and-else-to-add-logic-to-your-styles\"\n  }, \"Use \", mdx(\"inlineCode\", {\n    parentName: \"a\"\n  }, \"@if\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"a\"\n  }, \"@else\"), \" to add logic to your styles\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/front-end-libraries/sass/use-for-to-create-a-sass-loop\"\n  }, \"Use \", mdx(\"inlineCode\", {\n    parentName: \"a\"\n  }, \"@for\"), \" to create a sass loop\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/front-end-libraries/sass/use-each-to-map-over-items-in-a-list\"\n  }, \"Use \", mdx(\"inlineCode\", {\n    parentName: \"a\"\n  }, \"@each\"), \" to map over items in a list\")), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/front-end-libraries/sass/apply-a-style-until-a-condition-is-met-with-while\"\n  }, \"Apply a style until a condition is met with \", mdx(\"inlineCode\", {\n    parentName: \"a\"\n  }, \"@while\"))), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://www.freecodecamp.org/learn/front-end-libraries/sass/extend-one-set-of-css-styles-to-another-element\"\n  }, \"Extend one set of css styles to another element\"))));\n}\n;\nMDXContent.isMDXComponent = true;","headings":[{"depth":2,"value":"Contents"},{"depth":2,"value":"01. But first, what is a CSS preprocessor?"},{"depth":3,"value":"Compiling you SCSS"},{"depth":3,"value":"SASS vs SCSS"},{"depth":2,"value":"Exercises"},{"depth":2,"value":"02. What can I do with SCSS?"},{"depth":3,"value":"Variables"},{"depth":3,"value":"Exercises"},{"depth":3,"value":"Nesting"},{"depth":3,"value":"Exercises"},{"depth":2,"value":"03. Advanced Sass"},{"depth":3,"value":"Partials"},{"depth":3,"value":"Imports"},{"depth":3,"value":"Rules for import"},{"depth":3,"value":"Order of imports"},{"depth":3,"value":"Exercises"},{"depth":3,"value":"Mixins"},{"depth":3,"value":"Argument-less mixins"},{"depth":3,"value":"Exercises"},{"depth":3,"value":"Sass Exercises"}]}},"pageContext":{"slug":"/sass/contents/","prev":{"label":"Introduction","link":"/sass/introduction"},"next":{"label":"Further reading","link":"/sass/further-reading"},"repositoryEditUrl":"https://github.com/rocketseat/gatsby-themes/tree/main/examples/gatsby-theme-docs/src/docs/sass/contents.mdx","repositoryProvider":"GitHub"}},"staticQueryHashes":["1954253342","2328931024","2501019404","973074209"]}