mirror of
https://github.com/adambard/learnxinyminutes-docs.git
synced 2024-12-23 17:41:41 +00:00
[SASS] Add control directives, and misc. fixes (#1805)
* [SASS] Add control directives, other selector uses, and variables in selector names * sass: add contributor credit
This commit is contained in:
parent
0484537a1c
commit
bf32d58d75
@ -5,6 +5,7 @@ contributors:
|
|||||||
- ["Laura Kyle", "https://github.com/LauraNK"]
|
- ["Laura Kyle", "https://github.com/LauraNK"]
|
||||||
- ["Sean Corrales", "https://github.com/droidenator"]
|
- ["Sean Corrales", "https://github.com/droidenator"]
|
||||||
- ["Kyle Mendes", "https://github.com/pink401k"]
|
- ["Kyle Mendes", "https://github.com/pink401k"]
|
||||||
|
- ["Keith Miyake", "https://github.com/kaymmm"]
|
||||||
---
|
---
|
||||||
|
|
||||||
Sass is a CSS extension language that adds features such as variables, nesting, mixins and more.
|
Sass is a CSS extension language that adds features such as variables, nesting, mixins and more.
|
||||||
@ -52,16 +53,161 @@ body {
|
|||||||
font-family: 'Roboto', sans-serif;
|
font-family: 'Roboto', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* This is much more maintainable than having to change the color
|
/* This is much more maintainable than having to change the color
|
||||||
each time it appears throughout your stylesheet. */
|
each time it appears throughout your stylesheet. */
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Mixins
|
/* Control Directives
|
||||||
============================== */
|
============================== */
|
||||||
|
|
||||||
|
/* Sass lets you use @if, @else, @for, @while, and @each to control the
|
||||||
|
compilation of your code to CSS. */
|
||||||
|
|
||||||
|
/* @if/@else blocks behave exactly as you might expect */
|
||||||
|
|
||||||
|
$debug: true !default;
|
||||||
|
|
||||||
|
@mixin debugmode {
|
||||||
|
@if $debug {
|
||||||
|
@debug "Debug mode enabled";
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.info {
|
||||||
|
@include debugmode;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* If $debug is set to true, .info is displayed; if it's set to false then
|
||||||
|
.info is not displayed.
|
||||||
|
|
||||||
|
Note: @debug will output debugging information to the command line.
|
||||||
|
Useful for checking variables while debugging your SCSS. */
|
||||||
|
|
||||||
|
.info {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* @for is a control loop that iterates through a range of values.
|
||||||
|
Particularly useful for setting styles on a collection of items.
|
||||||
|
There are two forms, "through" and "to." The former includes the last value,
|
||||||
|
the latter stops at the last value. */
|
||||||
|
|
||||||
|
@for $c from 1 to 4 {
|
||||||
|
div:nth-of-type(#{$c}) {
|
||||||
|
left: ($c - 1) * 900 / 3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@for $c from 1 through 3 {
|
||||||
|
.myclass-#{$c} {
|
||||||
|
color: rgb($c * 255 / 3, $c * 255 / 3, $c * 255 / 3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Will compile to: */
|
||||||
|
|
||||||
|
div:nth-of-type(1) {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
div:nth-of-type(2) {
|
||||||
|
left: 300;
|
||||||
|
}
|
||||||
|
|
||||||
|
div:nth-of-type(3) {
|
||||||
|
left: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.myclass-1 {
|
||||||
|
color: #555555;
|
||||||
|
}
|
||||||
|
|
||||||
|
.myclass-2 {
|
||||||
|
color: #aaaaaa;
|
||||||
|
}
|
||||||
|
|
||||||
|
.myclass-3 {
|
||||||
|
color: white;
|
||||||
|
// SASS automatically converts #FFFFFF to white
|
||||||
|
}
|
||||||
|
|
||||||
|
/* @while is very straightforward: */
|
||||||
|
|
||||||
|
$columns: 4;
|
||||||
|
$column-width: 80px;
|
||||||
|
|
||||||
|
@while $columns > 0 {
|
||||||
|
.col-#{$columns} {
|
||||||
|
width: $column-width;
|
||||||
|
left: $column-width * ($columns - 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
$columns: $columns - 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Will output the following CSS: */
|
||||||
|
|
||||||
|
.col-4 {
|
||||||
|
width: 80px;
|
||||||
|
left: 240px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-3 {
|
||||||
|
width: 80px;
|
||||||
|
left: 160px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-2 {
|
||||||
|
width: 80px;
|
||||||
|
left: 80px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.col-1 {
|
||||||
|
width: 80px;
|
||||||
|
left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* @each functions like @for, except using a list instead of ordinal values
|
||||||
|
Note: you specify lists just like other variables, with spaces as
|
||||||
|
delimiters. */
|
||||||
|
|
||||||
|
$social-links: facebook twitter linkedin reddit;
|
||||||
|
|
||||||
|
.social-links {
|
||||||
|
@each $sm in $social-links {
|
||||||
|
.icon-#{$sm} {
|
||||||
|
background-image: url("images/#{$sm}.png");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Which will output: */
|
||||||
|
|
||||||
|
.social-links .icon-facebook {
|
||||||
|
background-image: url("images/facebook.png");
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-links .icon-twitter {
|
||||||
|
background-image: url("images/twitter.png");
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-links .icon-linkedin {
|
||||||
|
background-image: url("images/linkedin.png");
|
||||||
|
}
|
||||||
|
|
||||||
|
.social-links .icon-reddit {
|
||||||
|
background-image: url("images/reddit.png");
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/*Mixins
|
||||||
|
==============================*/
|
||||||
|
|
||||||
/* If you find you are writing the same code for more than one
|
/* If you find you are writing the same code for more than one
|
||||||
element, you might want to store that code in a mixin.
|
element, you might want to store that code in a mixin.
|
||||||
@ -93,7 +239,6 @@ div {
|
|||||||
background-color: #A3A4FF;
|
background-color: #A3A4FF;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* You can use mixins to create a shorthand property. */
|
/* You can use mixins to create a shorthand property. */
|
||||||
|
|
||||||
@mixin size($width, $height) {
|
@mixin size($width, $height) {
|
||||||
@ -139,7 +284,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
.footer {
|
||||||
background-color: fade_out(#000000, 0.25)
|
background-color: fade_out(#000000, 0.25);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Compiles to: */
|
/* Compiles to: */
|
||||||
|
Loading…
Reference in New Issue
Block a user