mirror of
https://github.com/danog/sass-site.git
synced 2024-11-27 12:35:03 +01:00
Natalie Weizenbaum
GitHub
commit
8c62ec4ccc
@ -435,350 +435,3 @@ introduction: >
|
||||
by the name of the mixin.
|
||||
|
||||
---
|
||||
|
||||
%li#topic-7
|
||||
:markdown
|
||||
## Extend/Inheritance
|
||||
|
||||
This is one of the most useful features of Sass. Using
|
||||
<code>@extend</code> lets you share a set of CSS properties from one
|
||||
selector to another. It helps keep your Sass very DRY. 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.
|
||||
|
||||
- example do
|
||||
:plain
|
||||
/* 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
|
||||
|
||||
:markdown
|
||||
What the above code does is tells <code>.message</code>,
|
||||
<code>.success</code>, <code>.error</code>, & <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.
|
||||
|
||||
---
|
||||
|
||||
%li#topic-8
|
||||
:markdown
|
||||
## Operators
|
||||
|
||||
Doing math in your CSS is very helpful. Sass has a handful of standard
|
||||
math operators like `+`, `-`, `*`, `/`, and `%`. In our example we're
|
||||
going to do some simple math to calculate widths for an `aside` &
|
||||
`article`.
|
||||
|
||||
- example do
|
||||
:plain
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
article[role="main"] {
|
||||
float: left;
|
||||
width: 600px / 960px * 100%;
|
||||
}
|
||||
|
||||
aside[role="complementary"] {
|
||||
float: right;
|
||||
width: 300px / 960px * 100%;
|
||||
}
|
||||
===
|
||||
.container
|
||||
width: 100%
|
||||
|
||||
|
||||
article[role="main"]
|
||||
float: left
|
||||
width: 600px / 960px * 100%
|
||||
|
||||
|
||||
aside[role="complementary"]
|
||||
float: right
|
||||
width: 300px / 960px * 100%
|
||||
|
||||
: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.
|
||||
|
||||
---
|
||||
|
||||
%section#topic-8
|
||||
:markdown
|
||||
## Operators
|
||||
|
||||
Doing math in your CSS is very helpful. Sass has a handful of standard
|
||||
math operators like `+`, `-`, `*`, `/`, and `%`. In our example we're
|
||||
going to do some simple math to calculate widths for an `aside` &
|
||||
`article`.
|
||||
|
||||
- example do
|
||||
:plain
|
||||
.container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
article[role="main"] {
|
||||
float: left;
|
||||
width: 600px / 960px * 100%;
|
||||
}
|
||||
|
||||
aside[role="complementary"] {
|
||||
float: right;
|
||||
width: 300px / 960px * 100%;
|
||||
}
|
||||
===
|
||||
.container
|
||||
width: 100%
|
||||
|
||||
|
||||
article[role="main"]
|
||||
float: left
|
||||
width: 600px / 960px * 100%
|
||||
|
||||
|
||||
aside[role="complementary"]
|
||||
float: right
|
||||
width: 300px / 960px * 100%
|
||||
|
||||
: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.
|
||||
|
||||
## 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. You can even
|
||||
pass in values to make your mixin more flexible. A good use of a mixin is
|
||||
for vendor prefixes. Here's an example for <code>transform</code>.
|
||||
|
||||
- example do
|
||||
:plain
|
||||
@mixin transform($property) {
|
||||
-webkit-transform: $property;
|
||||
-ms-transform: $property;
|
||||
transform: $property;
|
||||
}
|
||||
|
||||
.box { @include transform(rotate(30deg)); }
|
||||
===
|
||||
=transform($property)
|
||||
-webkit-transform: $property
|
||||
-ms-transform: $property
|
||||
transform: $property
|
||||
|
||||
.box
|
||||
+transform(rotate(30deg))
|
||||
|
||||
:markdown
|
||||
To create a mixin you use the <code>@mixin</code> directive and give it a
|
||||
name. We've named our mixin <code>transform</code>. We're also using
|
||||
the variable <code>$property</code> inside the parentheses so we can pass in
|
||||
a transform 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.
|
||||
|
||||
---
|
||||
|
||||
%li#topic-7
|
||||
:markdown
|
||||
## Extend/Inheritance
|
||||
|
||||
This is one of the most useful features of Sass. Using
|
||||
<code>@extend</code> lets you share a set of CSS properties from one
|
||||
selector to another. It helps keep your Sass very DRY. 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.
|
||||
|
||||
- example do
|
||||
:plain
|
||||
/* 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
|
||||
|
||||
:markdown
|
||||
What the above code does is tells <code>.message</code>,
|
||||
<code>.success</code>, <code>.error</code>, & <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.
|
||||
|
||||
---
|
||||
|
||||
%li#topic-9
|
||||
:markdown
|
||||
## Lists
|
||||
|
||||
You can define a sequence of values as a list. These values can be
|
||||
separated by commas, a space, parentheses, or square brackets. These can
|
||||
be great for looping over. For example, you can loop over a list of colors
|
||||
to generate class names for them.
|
||||
|
||||
- example do
|
||||
:plain
|
||||
$colors: red yellow blue;
|
||||
|
||||
@each $color in $colors {
|
||||
.swatch--\#{$color} {
|
||||
background: $color;
|
||||
}
|
||||
}
|
||||
===
|
||||
$colors: red orange yellow green blue indigo violet
|
||||
|
||||
@each $color in $colors
|
||||
.swatch--\#{$color}
|
||||
background: $color
|
||||
|
||||
Loading…
Reference in New Issue
Block a user