mirror of
https://github.com/danog/sass-site.git
synced 2024-11-27 04:24:50 +01:00
Switching from markdown file to liquid template
This commit is contained in:
Sana Javed
parent
6d4540f9ae
commit
562da1d8dc
@ -43,7 +43,6 @@
|
||||
|
||||
gtag('config', 'UA-535380-14');
|
||||
</script>
|
||||
<script src="/assets/dist/js/sass.js"></script>
|
||||
</head>
|
||||
|
||||
{%- assign classes = page.filePathStem | replace: "/", " " | strip -%}
|
||||
@ -133,6 +132,7 @@
|
||||
}
|
||||
}(document, 'script', 'twitter-wjs');
|
||||
</script>
|
||||
<script src="/assets/dist/js/sass.js"></script>
|
||||
<!-- Current page: {{ page.url }} -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
481
source/_layouts/guide.liquid
Normal file
481
source/_layouts/guide.liquid
Normal file
@ -0,0 +1,481 @@
|
||||
---
|
||||
layout: has_no_sidebars
|
||||
title: Sass Basics
|
||||
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. [Go
|
||||
here](/install) if you want to learn how to get everything set up.
|
||||
---
|
||||
|
||||
<section id="topic-1">
|
||||
{% markdown %}## Preprocessing
|
||||
|
||||
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 `sass` command.
|
||||
You'll need to tell Sass which file to build from, and where to output CSS
|
||||
to. For example, running `sass input.scss output.css` from your terminal
|
||||
would take a single Sass file, `input.scss`, and compile that file to
|
||||
`output.css`.
|
||||
|
||||
You can also watch individual files or directories with the `--watch`
|
||||
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 `input.scss` file, you'd just add the
|
||||
watch flag to your command, like so:
|
||||
|
||||
```
|
||||
sass --watch input.scss output.css
|
||||
```
|
||||
|
||||
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:
|
||||
|
||||
|
||||
{% renderFile 'source/code-snippets/_homepage-sass-watch.md' %}
|
||||
|
||||
Sass would watch all files in the `app/sass` folder for changes, and
|
||||
compile CSS to the `public/stylesheets` folder.
|
||||
{% endmarkdown %}
|
||||
<div class="sl-c-callout sl-c-callout--fun-fact">
|
||||
{% markdown %}### 💡 Fun fact:
|
||||
Sass has two syntaxes! The SCSS syntax (`.scss`) is used most commonly. It's
|
||||
a superset of CSS, which means all valid CSS is also valid SCSS. The
|
||||
indented syntax (`.sass`) 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.
|
||||
{% endmarkdown %}
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<section id="topic-2">
|
||||
{% markdown %}## Variables
|
||||
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 `$` symbol
|
||||
to make something a variable. Here's an example:
|
||||
{% endmarkdown %}
|
||||
|
||||
{%- capture captureCode -%}
|
||||
$font-stack: Helvetica, sans-serif;
|
||||
$primary-color: #333;
|
||||
|
||||
body {
|
||||
font: 100% $font-stack;
|
||||
color: $primary-color;
|
||||
}
|
||||
===
|
||||
$font-stack: Helvetica, sans-serif
|
||||
$primary-color: #333
|
||||
|
||||
body
|
||||
font: 100% $font-stack
|
||||
color: $primary-color
|
||||
{%- endcapture -%}
|
||||
|
||||
{%- assign parsedExample = captureCode | codeExample: true, 'scss' -%}
|
||||
|
||||
{% assign example_id = 1 %}
|
||||
{% assign ui_id = 1 %}
|
||||
{% render 'code_example', code: parsedExample,example_id: example_id, ui_id: ui_id %}
|
||||
|
||||
{% markdown %}
|
||||
When the Sass is processed, it takes the variables we define for the
|
||||
`$font-stack` and `$primary-color` 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.
|
||||
{% endmarkdown %}
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<section id="topic-3">
|
||||
{% markdown %}## Nesting
|
||||
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:
|
||||
{% endmarkdown %}
|
||||
|
||||
{%- capture captureCode -%}
|
||||
nav {
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li { display: inline-block; }
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 6px 12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
===
|
||||
nav
|
||||
ul
|
||||
margin: 0
|
||||
padding: 0
|
||||
list-style: none
|
||||
|
||||
li
|
||||
display: inline-block
|
||||
|
||||
a
|
||||
display: block
|
||||
padding: 6px 12px
|
||||
text-decoration: none
|
||||
{%- endcapture -%}
|
||||
|
||||
{% capture example_id %}
|
||||
{{ example_id | plus: 1 }}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture ui_id %}
|
||||
{{ ui_id | plus: 3 }}
|
||||
{% endcapture %}
|
||||
|
||||
{%- assign parsedExample = captureCode | codeExample: true, 'scss' -%}
|
||||
{% render 'code_example', code: parsedExample, example_id: example_id, ui_id: ui_id %}
|
||||
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<section id="topic-4">
|
||||
{% markdown %}## Partials
|
||||
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 `_partial.scss`. 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 `@use` rule.
|
||||
{% endmarkdown %}
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<section id="topic-5">
|
||||
{% markdown %}## Modules
|
||||
<!-- TODO compatibility snippet -->
|
||||
You don't have to write all your Sass in a single file. You can split it up however you want with the `@use` rule. This rule loads another Sass file as
|
||||
a _module_, which means you can refer to its variables, [mixins][], and [functions][] 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!
|
||||
|
||||
[mixins]: #topic-6
|
||||
[functions]: documentation/at-rules/function
|
||||
{% endmarkdown %}
|
||||
|
||||
{%- capture captureCode -%}
|
||||
// _base.scss
|
||||
$font-stack: Helvetica, sans-serif;
|
||||
$primary-color: #333;
|
||||
|
||||
body {
|
||||
font: 100% $font-stack;
|
||||
color: $primary-color;
|
||||
}
|
||||
---
|
||||
|
||||
// styles.scss
|
||||
@use 'base';
|
||||
|
||||
.inverse {
|
||||
background-color: base.$primary-color;
|
||||
color: white;
|
||||
}
|
||||
|
||||
===
|
||||
// _base.sass
|
||||
$font-stack: Helvetica, sans-serif
|
||||
$primary-color: #333
|
||||
|
||||
body
|
||||
font: 100% $font-stack
|
||||
color: $primary-color
|
||||
---
|
||||
|
||||
// styles.sass
|
||||
@use 'base'
|
||||
|
||||
.inverse
|
||||
background-color: base.$primary-color
|
||||
color: white
|
||||
===
|
||||
|
||||
body {
|
||||
font: 100% Helvetica, sans-serif;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.inverse {
|
||||
background-color: #333;
|
||||
color: white;
|
||||
}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture example_id %}
|
||||
{{ example_id | plus: 1 }}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture ui_id %}
|
||||
{{ ui_id | plus: 3 }}
|
||||
{% endcapture %}
|
||||
|
||||
{%- assign parsedExample = captureCode | codeExample: true, 'scss' -%}
|
||||
{% render 'code_example', code: parsedExample, example_id: example_id, ui_id: ui_id %}
|
||||
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<section id="topic-6">
|
||||
{% markdown %}## Mixins
|
||||
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 `theme`.
|
||||
{% endmarkdown %}
|
||||
|
||||
{% capture example_id %}
|
||||
{{ example_id | plus: 1 }}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture ui_id %}
|
||||
{{ ui_id | plus: 3 }}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture captureCode %}
|
||||
@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);
|
||||
}
|
||||
|
||||
===
|
||||
|
||||
@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)
|
||||
|
||||
{% endcapture %}
|
||||
|
||||
{% capture example_id %}
|
||||
{{ example_id | plus: 1 }}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture ui_id %}
|
||||
{{ ui_id | plus: 3 }}
|
||||
{% endcapture %}
|
||||
|
||||
{%- assign parsedExample = captureCode | codeExample: true, 'scss' -%}
|
||||
{% render 'code_example', code: parsedExample, example_id: example_id, ui_id: ui_id %}
|
||||
|
||||
{% markdown %}
|
||||
To create a mixin you use the `@mixin` directive and give it a name. We've named our mixin `theme`. We're also using the variable `$theme` inside the parentheses so we can pass in a `theme` of whatever we want.
|
||||
After you create your mixin, you can then use it as a CSS declaration starting with `@include` followed by the name of the mixin.
|
||||
{% endmarkdown %}
|
||||
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<section id="topic-7">
|
||||
|
||||
{% markdown %}## Extend/Inheritance
|
||||
Using `@extend` 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.
|
||||
{% endmarkdown %}
|
||||
|
||||
{%- capture captureCode -%}
|
||||
// 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;
|
||||
}
|
||||
===
|
||||
|
||||
// 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" | codeExample: true, 'scss' %}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture example_id %}
|
||||
{{ example_id | plus: 1 }}
|
||||
{% endcapture %}
|
||||
{% capture ui_id %}
|
||||
{{ ui_id | plus: 3 }}
|
||||
{% endcapture %}
|
||||
|
||||
{%- assign parsedExample = captureCode | codeExample: true, 'scss' -%}
|
||||
{% render 'code_example', code: parsedExample, example_id: example_id, ui_id: ui_id %}
|
||||
|
||||
{% markdown %}
|
||||
What the above code does is tells `.message`, `.success`, `.error`, and `.warning` to behave just like `%message-shared`. That means anywhere that `%message-shared` shows up, `.message`, `.success`, `.error`, & `.warning` will too. The magic happens in the generated CSS, where each of these classes will get the same CSS properties as `%message-shared`. 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 `%equal-heights` isn't generated, because `%equal-heights` is never extended.
|
||||
{% endmarkdown %}
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<section id="topic-8">
|
||||
{% markdown%}## Operators
|
||||
Doing math in your CSS is very helpful. Sass has a handful of standard math operators like `+`, `-`, `*`, `math.div()`, and `%`. In our example we're going to do some simple math to calculate widths for an `article` and `aside`.
|
||||
{% endmarkdown %}
|
||||
|
||||
{% capture example_id %}
|
||||
{{ example_id | plus: 1 }}
|
||||
{% endcapture %}
|
||||
{% capture ui_id %}
|
||||
{{ ui_id | plus: 3 }}
|
||||
{% endcapture %}
|
||||
|
||||
{%- capture captureCode -%}
|
||||
@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;
|
||||
}
|
||||
|
||||
===
|
||||
@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
|
||||
|
||||
===
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
article[role="main"] {
|
||||
width: 62.5%;
|
||||
}
|
||||
|
||||
aside[role="complementary"] {
|
||||
width: 31.25%;
|
||||
margin-left: auto;
|
||||
}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture example_id %}
|
||||
{{ example_id | plus: 1 }}
|
||||
{% endcapture %}
|
||||
|
||||
{% capture ui_id %}
|
||||
{{ ui_id | plus: 3 }}
|
||||
{% endcapture %}
|
||||
|
||||
{%- assign parsedExample = captureCode | codeExample: true, 'scss' -%}
|
||||
{% render 'code_example', code: parsedExample, example_id: example_id, ui_id: ui_id %}
|
||||
|
||||
{% markdown %}
|
||||
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.
|
||||
{% endmarkdown %}
|
||||
</section>
|
||||
<hr>
|
||||
437
source/guide.md
437
source/guide.md
@ -1,441 +1,8 @@
|
||||
---
|
||||
layout: has_no_sidebars
|
||||
layout: guide
|
||||
title: Sass Basics
|
||||
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. [Go
|
||||
here](/install) if you want to learn how to get everything set up.
|
||||
---
|
||||
|
||||
<!-- TODO anchor links <nav class="sl-c-list-navigation-wrapper">
|
||||
|
||||
[Preprocessing](#topic-1)
|
||||
[Variables](#topic-2)
|
||||
[Nesting](#topic-3)
|
||||
[Partials](#topic-4)
|
||||
[Modules](#topic-5)
|
||||
[Mixins](#topic-6)
|
||||
[Inheritance](#topic-7)
|
||||
[Operators](#topic-8)
|
||||
[Lists](#topic-9)
|
||||
|
||||
</nav> -->
|
||||
|
||||
## Preprocessing
|
||||
|
||||
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 `sass` command.
|
||||
You'll need to tell Sass which file to build from, and where to output CSS
|
||||
to. For example, running `sass input.scss output.css` from your terminal
|
||||
would take a single Sass file, `input.scss`, and compile that file to
|
||||
`output.css`.
|
||||
|
||||
You can also watch individual files or directories with the `--watch`
|
||||
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 `input.scss` file, you'd just add the
|
||||
watch flag to your command, like so:
|
||||
|
||||
```
|
||||
sass --watch input.scss output.css
|
||||
```
|
||||
|
||||
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:
|
||||
|
||||
{% renderFile 'source/code-snippets/_homepage-sass-watch.md' %}
|
||||
|
||||
Sass would watch all files in the `app/sass` folder for changes, and
|
||||
compile CSS to the `public/stylesheets` folder.
|
||||
|
||||
<div class="sl-c-callout sl-c-callout--fun-fact">
|
||||
|
||||
### 💡 Fun fact:
|
||||
|
||||
Sass has two syntaxes! The SCSS syntax (`.scss`) is used most commonly. It's
|
||||
a superset of CSS, which means all valid CSS is also valid SCSS. The
|
||||
indented syntax (`.sass`) 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>
|
||||
|
||||
---
|
||||
|
||||
## Variables
|
||||
|
||||
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 `$` symbol
|
||||
to make something a variable. Here's an example:
|
||||
|
||||
{% assign code = "$font-stack: Helvetica, sans-serif;
|
||||
$primary-color: #333;
|
||||
|
||||
body {
|
||||
font: 100% $font-stack;
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
===
|
||||
|
||||
$font-stack: Helvetica, sans-serif
|
||||
$primary-color: #333
|
||||
|
||||
body
|
||||
font: 100% $font-stack
|
||||
color: $primary-color" | codeExample: true, 'scss' -%}
|
||||
|
||||
{% assign example_id = 1 %}
|
||||
{% assign ui_id = 1 %}
|
||||
{% render 'code_example',
|
||||
code: code,
|
||||
example_id: example_id,
|
||||
ui_id: ui_id %}
|
||||
|
||||
When the Sass is processed, it takes the variables we define for the
|
||||
`$font-stack` and `$primary-color` 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.
|
||||
|
||||
---
|
||||
|
||||
## Nesting
|
||||
|
||||
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:
|
||||
|
||||
{% capture example_id %}
|
||||
{{ example_id | plus: 1 }}
|
||||
{% endcapture %}
|
||||
{% capture ui_id %}
|
||||
{{ ui_id | plus: 3 }}
|
||||
{% endcapture %}
|
||||
|
||||
{% assign code =
|
||||
"nav {
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
li { display: inline-block; }
|
||||
|
||||
a {
|
||||
display: block;
|
||||
padding: 6px 12px;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
===
|
||||
nav
|
||||
ul
|
||||
margin: 0
|
||||
padding: 0
|
||||
list-style: none
|
||||
|
||||
li
|
||||
display: inline-block
|
||||
|
||||
a
|
||||
display: block
|
||||
padding: 6px 12px
|
||||
text-decoration: none" | codeExample: true, 'scss' %}
|
||||
|
||||
{% render 'code_example',
|
||||
code: code,
|
||||
example_id: example_id,
|
||||
ui_id: ui_id %}
|
||||
|
||||
---
|
||||
|
||||
## Partials
|
||||
|
||||
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 `_partial.scss`. 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 `@use` rule.
|
||||
|
||||
---
|
||||
|
||||
## Modules
|
||||
|
||||
<!-- TODO compatibility snippet -->
|
||||
|
||||
You don't have to write all your Sass in a single file. You can split it up however you want with the `@use` rule. This rule loads another Sass file as
|
||||
a _module_, which means you can refer to its variables, [mixins][], and [functions][] 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!
|
||||
|
||||
[mixins]: #topic-6
|
||||
[functions]: documentation/at-rules/function
|
||||
|
||||
{% capture example_id %}
|
||||
{{ example_id | plus: 1 }}
|
||||
{% endcapture %}
|
||||
{% capture ui_id %}
|
||||
{{ ui_id | plus: 3 }}
|
||||
{% endcapture %}
|
||||
|
||||
{% assign code =
|
||||
"// \_base.scss
|
||||
$font-stack: Helvetica, sans-serif;
|
||||
$primary-color: #333;
|
||||
|
||||
body {
|
||||
font: 100% $font-stack;
|
||||
color: $primary-color;
|
||||
}
|
||||
---
|
||||
// styles.scss
|
||||
@use 'base';
|
||||
|
||||
.inverse {
|
||||
background-color: base.$primary-color;
|
||||
color: white;
|
||||
}
|
||||
===
|
||||
// _base.sass
|
||||
$font-stack: Helvetica, sans-serif
|
||||
$primary-color: #333
|
||||
|
||||
body
|
||||
font: 100% $font-stack
|
||||
color: $primary-color
|
||||
---
|
||||
// styles.sass
|
||||
@use 'base'
|
||||
|
||||
.inverse
|
||||
background-color: base.$primary-color
|
||||
color: white
|
||||
===
|
||||
body {
|
||||
font: 100% Helvetica, sans-serif;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.inverse {
|
||||
background-color: #333;
|
||||
color: white;
|
||||
}"
|
||||
|
||||
| codeExample: true, 'scss' %}
|
||||
|
||||
{% render 'code_example',
|
||||
code: code,
|
||||
example_id: example_id,
|
||||
ui_id: ui_id %}
|
||||
|
||||
---
|
||||
|
||||
## Mixins
|
||||
|
||||
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 `theme`.
|
||||
|
||||
{% capture example_id %}
|
||||
{{ example_id | plus: 1 }}
|
||||
{% endcapture %}
|
||||
{% capture ui_id %}
|
||||
{{ ui_id | plus: 3 }}
|
||||
{% endcapture %}
|
||||
|
||||
{% assign code =
|
||||
"@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);
|
||||
}
|
||||
===
|
||||
@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)"
|
||||
| codeExample: true, 'scss' %}
|
||||
|
||||
{% render 'code_example',
|
||||
code: code,
|
||||
example_id: example_id,
|
||||
ui_id: ui_id %}
|
||||
|
||||
To create a mixin you use the `@mixin` directive and give it a name. We've named our mixin `theme`. We're also using the variable `$theme` inside the parentheses so we can pass in a `theme` of whatever we want.
|
||||
After you create your mixin, you can then use it as a CSS declaration starting with `@include` followed by the name of the mixin.
|
||||
|
||||
---
|
||||
|
||||
## Extend/Inheritance
|
||||
|
||||
Using `@extend` 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.
|
||||
|
||||
{% capture example_id %}
|
||||
{{ example_id | plus: 1 }}
|
||||
{% endcapture %}
|
||||
{% capture ui_id %}
|
||||
{{ ui_id | plus: 3 }}
|
||||
{% endcapture %}
|
||||
|
||||
{% assign code =
|
||||
"// 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;
|
||||
}
|
||||
===
|
||||
// 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"| codeExample: true, 'scss' %}
|
||||
|
||||
{% render 'code_example',
|
||||
code: code,
|
||||
example_id: example_id,
|
||||
ui_id: ui_id %}
|
||||
|
||||
What the above code does is tells `.message`, `.success`, `.error`, and `.warning` to behave just like `%message-shared`. That means anywhere that `%message-shared` shows up, `.message`, `.success`, `.error`, & `.warning` will too. The magic happens in the generated CSS, where each of these classes will get the same CSS properties as `%message-shared`. 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 `%equal-heights` isn't generated, because `%equal-heights` is never extended.
|
||||
|
||||
---
|
||||
|
||||
## Operators
|
||||
|
||||
Doing math in your CSS is very helpful. Sass has a handful of standard math operators like `+`, `-`, `*`, `math.div()`, and `%`. In our example we're going to do some simple math to calculate widths for an `article` and `aside`.
|
||||
|
||||
{% capture example_id %}
|
||||
{{ example_id | plus: 1 }}
|
||||
{% endcapture %}
|
||||
{% capture ui_id %}
|
||||
{{ ui_id | plus: 3 }}
|
||||
{% endcapture %}
|
||||
|
||||
{% assign code =
|
||||
'@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;
|
||||
}
|
||||
===
|
||||
@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
|
||||
===
|
||||
.container {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
article[role="main"] {
|
||||
width: 62.5%;
|
||||
}
|
||||
|
||||
aside[role="complementary"] {
|
||||
width: 31.25%;
|
||||
margin-left: auto;
|
||||
}'| codeExample: true, 'scss' %}
|
||||
|
||||
{% render 'code_example',
|
||||
code: code,
|
||||
example_id: example_id,
|
||||
ui_id: ui_id %}
|
||||
---
|
||||
Loading…
Reference in New Issue
Block a user