mirror of
https://github.com/danog/sass-site.git
synced 2024-11-26 20:14:53 +01:00
Fixes #39 — Adds SCSS/Sass syntax switcher to Guide.
This commit is contained in:
Jina Bolton
parent
867362ed5e
commit
206880a768
1
.gitignore
vendored
1
.gitignore
vendored
@ -22,6 +22,7 @@
|
||||
/build
|
||||
build/
|
||||
build
|
||||
Gemfile.lock
|
||||
|
||||
# Numerous always-ignore extensions
|
||||
*.diff
|
||||
|
||||
56
Gemfile.lock
56
Gemfile.lock
@ -1,65 +1,65 @@
|
||||
GEM
|
||||
remote: https://rubygems.org/
|
||||
specs:
|
||||
activesupport (3.2.14)
|
||||
activesupport (3.2.17)
|
||||
i18n (~> 0.6, >= 0.6.4)
|
||||
multi_json (~> 1.0)
|
||||
breakpoint (2.0.7)
|
||||
compass (>= 0.12.1)
|
||||
sass (>= 3.2.0)
|
||||
chunky_png (1.2.8)
|
||||
chunky_png (1.3.0)
|
||||
coffee-script (2.2.0)
|
||||
coffee-script-source
|
||||
execjs
|
||||
coffee-script-source (1.6.3)
|
||||
compass (0.12.2)
|
||||
coffee-script-source (1.7.0)
|
||||
compass (0.12.3)
|
||||
chunky_png (~> 1.2)
|
||||
fssm (>= 0.2.7)
|
||||
sass (~> 3.1)
|
||||
sass (= 3.2.14)
|
||||
em-websocket (0.5.0)
|
||||
eventmachine (>= 0.12.9)
|
||||
http_parser.rb (~> 0.5.3)
|
||||
eventmachine (1.0.3)
|
||||
execjs (1.4.0)
|
||||
multi_json (~> 1.0)
|
||||
ffi (1.9.0)
|
||||
ffi (1.9.3)
|
||||
fssm (0.2.10)
|
||||
haml (4.0.3)
|
||||
haml (4.0.5)
|
||||
tilt
|
||||
hike (1.2.3)
|
||||
http_parser.rb (0.5.3)
|
||||
i18n (0.6.5)
|
||||
kramdown (1.1.0)
|
||||
listen (1.2.3)
|
||||
i18n (0.6.9)
|
||||
kramdown (1.3.2)
|
||||
listen (1.3.1)
|
||||
rb-fsevent (>= 0.9.3)
|
||||
rb-inotify (>= 0.9)
|
||||
rb-kqueue (>= 0.2)
|
||||
middleman (3.1.5)
|
||||
middleman (3.1.6)
|
||||
coffee-script (~> 2.2.0)
|
||||
compass (>= 0.12.2)
|
||||
execjs (~> 1.4.0)
|
||||
haml (>= 3.1.6)
|
||||
kramdown (~> 1.1.0)
|
||||
middleman-core (= 3.1.5)
|
||||
middleman-more (= 3.1.5)
|
||||
kramdown (~> 1.2)
|
||||
middleman-core (= 3.1.6)
|
||||
middleman-more (= 3.1.6)
|
||||
middleman-sprockets (>= 3.1.2)
|
||||
sass (>= 3.1.20)
|
||||
uglifier (~> 2.1.0)
|
||||
middleman-core (3.1.5)
|
||||
middleman-core (3.1.6)
|
||||
activesupport (~> 3.2.6)
|
||||
bundler (~> 1.1)
|
||||
i18n (~> 0.6.1)
|
||||
listen (~> 1.2.2)
|
||||
listen (~> 1.1)
|
||||
rack (>= 1.4.5)
|
||||
rack-test (~> 0.6.1)
|
||||
thor (>= 0.15.2, < 2.0)
|
||||
tilt (~> 1.3.6)
|
||||
middleman-livereload (3.1.0)
|
||||
middleman-livereload (3.1.1)
|
||||
em-websocket (>= 0.2.0)
|
||||
middleman-core (>= 3.0.2)
|
||||
multi_json (~> 1.0)
|
||||
rack-livereload
|
||||
middleman-more (3.1.5)
|
||||
middleman-more (3.1.6)
|
||||
middleman-sprockets (3.1.4)
|
||||
middleman-core (>= 3.0.14)
|
||||
middleman-more (>= 3.0.14)
|
||||
@ -69,35 +69,35 @@ GEM
|
||||
middleman-syntax (1.2.1)
|
||||
middleman-core (~> 3.0)
|
||||
rouge (~> 0.3.0)
|
||||
multi_json (1.8.1)
|
||||
multi_json (1.9.0)
|
||||
rack (1.5.2)
|
||||
rack-contrib (1.1.0)
|
||||
rack (>= 0.9.1)
|
||||
rack-livereload (0.3.15)
|
||||
rack
|
||||
rack-rewrite (1.4.01)
|
||||
rack-rewrite (1.5.0)
|
||||
rack-test (0.6.2)
|
||||
rack (>= 1.0)
|
||||
rake (10.1.0)
|
||||
rb-fsevent (0.9.3)
|
||||
rb-inotify (0.9.2)
|
||||
rake (10.1.1)
|
||||
rb-fsevent (0.9.4)
|
||||
rb-inotify (0.9.3)
|
||||
ffi (>= 0.5.0)
|
||||
rb-kqueue (0.2.0)
|
||||
rb-kqueue (0.2.2)
|
||||
ffi (>= 0.5.0)
|
||||
redcarpet (3.0.0)
|
||||
redcarpet (3.1.1)
|
||||
rouge (0.3.10)
|
||||
thor
|
||||
ruby18_source_location (0.2)
|
||||
rubypants (0.2.0)
|
||||
sass (3.2.12)
|
||||
sprockets (2.10.0)
|
||||
sass (3.2.14)
|
||||
sprockets (2.12.0)
|
||||
hike (~> 1.2)
|
||||
multi_json (~> 1.0)
|
||||
rack (~> 1.0)
|
||||
tilt (~> 1.1, != 1.3.0)
|
||||
sprockets-helpers (1.0.1)
|
||||
sprockets (~> 2.0)
|
||||
sprockets-sass (1.0.2)
|
||||
sprockets-sass (1.0.3)
|
||||
sprockets (~> 2.0)
|
||||
tilt (~> 1.1)
|
||||
susy (2.0.0.alpha.4)
|
||||
|
||||
33
source/assets/css/components/_sass-syntax-switcher.scss
Normal file
33
source/assets/css/components/_sass-syntax-switcher.scss
Normal file
@ -0,0 +1,33 @@
|
||||
.slides {
|
||||
.ui-helper-reset { line-height: inherit; }
|
||||
|
||||
.ui-tabs {
|
||||
&,
|
||||
.ui-tabs-nav,
|
||||
.ui-tabs-nav li.ui-tabs-active,
|
||||
.ui-tabs-panel { padding: 0; }
|
||||
|
||||
.ui-tabs-nav {
|
||||
@include trailer(-3);
|
||||
margin-right: -1em;
|
||||
|
||||
li {
|
||||
float: right;
|
||||
|
||||
&,
|
||||
&.ui-tabs-active { margin: 0; }
|
||||
}
|
||||
|
||||
.ui-tabs-active a { color: $color-text-weak; }
|
||||
|
||||
.ui-tabs-anchor {
|
||||
@include padding-leader(.5);
|
||||
@include padding-trailer(.5);
|
||||
padding: {
|
||||
right: 1em;
|
||||
left: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,15 +1,19 @@
|
||||
%code-theme {
|
||||
@include border-radius(4px);
|
||||
border: 1px solid #ebebeb;
|
||||
background: #f8f8f8;
|
||||
color: $color-text-strong;
|
||||
}
|
||||
|
||||
code,
|
||||
pre {
|
||||
@extend %code-theme;
|
||||
@include font-size-small;
|
||||
font: {
|
||||
weight: $font-weight-regular;
|
||||
family: $font-family-code;
|
||||
}
|
||||
white-space: pre-wrap;
|
||||
background: rgba($color-background-shade, .175);
|
||||
color: $color-text-strong;
|
||||
@include border-radius(4px);
|
||||
border: 1px solid #ebebeb;
|
||||
@include box-sizing(border-box);
|
||||
}
|
||||
|
||||
@ -18,11 +22,20 @@ code {
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
%pre-block {
|
||||
@include rhythm(0, .5, .5, 0);
|
||||
padding: {
|
||||
right: 1em;
|
||||
left: 1em;
|
||||
}
|
||||
display: block;
|
||||
}
|
||||
|
||||
pre {
|
||||
@extend %pre-block;
|
||||
@include trailer;
|
||||
@include rhythm(.5, .5, .5, .5);
|
||||
@include bleed(1em);
|
||||
display: block;
|
||||
overflow-y: auto;
|
||||
margin: auto 0 25px;
|
||||
|
||||
@ -34,6 +47,6 @@ pre {
|
||||
line-height: inherit;
|
||||
}
|
||||
&.highlight .err {
|
||||
background: #fcc;
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -28,6 +28,7 @@
|
||||
|
||||
|
||||
|
||||
@import "vendor/jquery-ui-1.10.4.custom";
|
||||
@import "components/pop-stripe";
|
||||
@import "components/type";
|
||||
@import "components/page-header";
|
||||
@ -45,6 +46,7 @@
|
||||
@import "components/slides";
|
||||
@import "components/icons";
|
||||
@import "components/logos";
|
||||
@import "components/sass-syntax-switcher";
|
||||
|
||||
|
||||
|
||||
|
||||
@ -43,7 +43,35 @@
|
||||
iframe { @include box-shadow(0 1px 1px $color-shadow)}
|
||||
}
|
||||
|
||||
.width-only iframe { height: 640px; }
|
||||
|
||||
.styleguide_responsive-test {
|
||||
.toolkit,
|
||||
.pop-stripe,
|
||||
.banner,
|
||||
.page-header,
|
||||
.release,
|
||||
.contentinfo { @extend .visually-hidden; }
|
||||
|
||||
.page {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@import "toolkit";
|
||||
|
||||
[href*="404"],
|
||||
[href*="htaccess"],
|
||||
[href*="humans"],
|
||||
[href*="robots"],
|
||||
[href*="sitemap"] { @extend %hidden; }
|
||||
|
||||
|
||||
|
||||
@include breakpoint($tablet-large) {
|
||||
.content-primary .swatches { max-width: none; }
|
||||
|
||||
.responsive-test-url {
|
||||
@extend %table-layout-tablet-large;
|
||||
text-align: left;
|
||||
@ -82,27 +110,3 @@
|
||||
margin: 0 .5em;
|
||||
}
|
||||
}
|
||||
|
||||
.width-only iframe { height: 640px; }
|
||||
|
||||
.styleguide_responsive-test {
|
||||
.toolkit,
|
||||
.pop-stripe,
|
||||
.banner,
|
||||
.page-header,
|
||||
.release,
|
||||
.contentinfo { @extend .visually-hidden; }
|
||||
|
||||
.page {
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@import "toolkit";
|
||||
|
||||
[href*="404"],
|
||||
[href*="htaccess"],
|
||||
[href*="humans"],
|
||||
[href*="robots"],
|
||||
[href*="sitemap"] { @extend %hidden; }
|
||||
|
||||
128
source/assets/css/vendor/_jquery-ui-1.10.4.custom.scss
vendored
Normal file
128
source/assets/css/vendor/_jquery-ui-1.10.4.custom.scss
vendored
Normal file
@ -0,0 +1,128 @@
|
||||
/*! jQuery UI - v1.10.4 - 2014-03-13
|
||||
* http://jqueryui.com
|
||||
* Includes: jquery.ui.core.css, jquery.ui.tabs.css
|
||||
* Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */
|
||||
|
||||
/* Layout helpers
|
||||
----------------------------------*/
|
||||
.ui-helper-hidden {
|
||||
display: none;
|
||||
}
|
||||
.ui-helper-hidden-accessible {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
.ui-helper-reset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
line-height: 1.3;
|
||||
text-decoration: none;
|
||||
font-size: 100%;
|
||||
list-style: none;
|
||||
}
|
||||
.ui-helper-clearfix:before,
|
||||
.ui-helper-clearfix:after {
|
||||
content: "";
|
||||
display: table;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
.ui-helper-clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
.ui-helper-clearfix {
|
||||
min-height: 0; /* support: IE7 */
|
||||
}
|
||||
.ui-helper-zfix {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
filter:Alpha(Opacity=0);
|
||||
}
|
||||
|
||||
.ui-front {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
|
||||
/* Interaction Cues
|
||||
----------------------------------*/
|
||||
.ui-state-disabled {
|
||||
cursor: default !important;
|
||||
}
|
||||
|
||||
|
||||
/* Icons
|
||||
----------------------------------*/
|
||||
|
||||
/* states and images */
|
||||
.ui-icon {
|
||||
display: block;
|
||||
text-indent: -99999px;
|
||||
overflow: hidden;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
/* Misc visuals
|
||||
----------------------------------*/
|
||||
|
||||
/* Overlays */
|
||||
.ui-widget-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.ui-tabs {
|
||||
position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
|
||||
padding: .2em;
|
||||
}
|
||||
.ui-tabs .ui-tabs-nav {
|
||||
margin: 0;
|
||||
padding: .2em .2em 0;
|
||||
}
|
||||
.ui-tabs .ui-tabs-nav li {
|
||||
list-style: none;
|
||||
float: left;
|
||||
position: relative;
|
||||
top: 0;
|
||||
margin: 1px .2em 0 0;
|
||||
border-bottom-width: 0;
|
||||
padding: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
|
||||
float: left;
|
||||
padding: .5em 1em;
|
||||
text-decoration: none;
|
||||
}
|
||||
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
|
||||
margin-bottom: -1px;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
|
||||
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
|
||||
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
|
||||
cursor: text;
|
||||
}
|
||||
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
|
||||
cursor: pointer;
|
||||
}
|
||||
.ui-tabs .ui-tabs-panel {
|
||||
display: block;
|
||||
border-width: 0;
|
||||
padding: 1em 1.4em;
|
||||
background: none;
|
||||
}
|
||||
18
source/assets/js/components/sass-syntax-switcher.js
Normal file
18
source/assets/js/components/sass-syntax-switcher.js
Normal file
@ -0,0 +1,18 @@
|
||||
$(function() {
|
||||
$( "#topic-2" ).tabs();
|
||||
$( "#topic-3" ).tabs();
|
||||
$( "#topic-5" ).tabs();
|
||||
$( "#topic-6" ).tabs();
|
||||
$( "#topic-7" ).tabs();
|
||||
$( "#topic-8" ).tabs();
|
||||
|
||||
// Hover states on the static widgets
|
||||
$( "#dialog-link, #icons li" ).hover(
|
||||
function() {
|
||||
$( this ).addClass( "ui-state-hover" );
|
||||
},
|
||||
function() {
|
||||
$( this ).removeClass( "ui-state-hover" );
|
||||
}
|
||||
);
|
||||
});
|
||||
@ -1,5 +1,5 @@
|
||||
$(function() {
|
||||
$('a[href*=#]:not([href=#])').click(function() {
|
||||
$('.anchors a[href*=#]:not([href=#])').click(function() {
|
||||
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
|
||||
|| location.hostname == this.hostname) {
|
||||
|
||||
|
||||
1661
source/assets/js/vendor/jquery-ui-1.10.4.custom.js
vendored
Normal file
1661
source/assets/js/vendor/jquery-ui-1.10.4.custom.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
18
source/code-snippets/_homepage-extend-sass.md
Normal file
18
source/code-snippets/_homepage-extend-sass.md
Normal file
@ -0,0 +1,18 @@
|
||||
```sass
|
||||
.message
|
||||
border: 1px solid #ccc
|
||||
padding: 10px
|
||||
color: #333
|
||||
|
||||
.success
|
||||
@extend .message
|
||||
border-color: green
|
||||
|
||||
.error
|
||||
@extend .message
|
||||
border-color: red
|
||||
|
||||
.warning
|
||||
@extend .message
|
||||
border-color: yellow
|
||||
```
|
||||
10
source/code-snippets/_homepage-import-1-sass.md
Normal file
10
source/code-snippets/_homepage-import-1-sass.md
Normal file
@ -0,0 +1,10 @@
|
||||
```sass
|
||||
// _reset.scss
|
||||
|
||||
html,
|
||||
body,
|
||||
ul,
|
||||
ol
|
||||
margin: 0
|
||||
padding: 0
|
||||
```
|
||||
@ -1,5 +1,5 @@
|
||||
```scss
|
||||
/* _reset.scss */
|
||||
// _reset.scss
|
||||
|
||||
html,
|
||||
body,
|
||||
|
||||
9
source/code-snippets/_homepage-import-2-sass.md
Normal file
9
source/code-snippets/_homepage-import-2-sass.md
Normal file
@ -0,0 +1,9 @@
|
||||
```sass
|
||||
// base.sass
|
||||
|
||||
@import reset
|
||||
|
||||
body
|
||||
font-size: 100% Helvetica, sans-serif
|
||||
background-color: #efefef
|
||||
```
|
||||
10
source/code-snippets/_homepage-mixins-sass.md
Normal file
10
source/code-snippets/_homepage-mixins-sass.md
Normal file
@ -0,0 +1,10 @@
|
||||
```sass
|
||||
=border-radius($radius)
|
||||
-webkit-border-radius: $radius
|
||||
-moz-border-radius: $radius
|
||||
-ms-border-radius: $radius
|
||||
border-radius: $radius
|
||||
|
||||
.box
|
||||
+border-radius(10px)
|
||||
```
|
||||
15
source/code-snippets/_homepage-nesting-sass.md
Normal file
15
source/code-snippets/_homepage-nesting-sass.md
Normal file
@ -0,0 +1,15 @@
|
||||
```sass
|
||||
nav
|
||||
ul
|
||||
margin: 0
|
||||
padding: 0
|
||||
list-style: none
|
||||
|
||||
li
|
||||
display: inline-block
|
||||
|
||||
a
|
||||
display: block
|
||||
padding: 6px 12px
|
||||
text-decoration: none
|
||||
```
|
||||
@ -14,3 +14,4 @@ nav {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
12
source/code-snippets/_homepage-operators-sass.md
Normal file
12
source/code-snippets/_homepage-operators-sass.md
Normal file
@ -0,0 +1,12 @@
|
||||
```sass
|
||||
.container
|
||||
width: 100%
|
||||
|
||||
article[role="main"]
|
||||
float: left
|
||||
width: 600px / 960px * 100%
|
||||
|
||||
aside[role="complimentary"]
|
||||
float: right
|
||||
width: 300px / 960px * 100%
|
||||
```
|
||||
8
source/code-snippets/_homepage-variables-sass.md
Normal file
8
source/code-snippets/_homepage-variables-sass.md
Normal file
@ -0,0 +1,8 @@
|
||||
```sass
|
||||
$font-stack: Helvetica, sans-serif
|
||||
$primary-color: #333
|
||||
|
||||
body
|
||||
font: 100% $font-stack
|
||||
color: $primary-color
|
||||
```
|
||||
@ -10,7 +10,7 @@ layout: layout_1_column
|
||||
|
||||
|
||||
|
||||
%ul.list-tiled
|
||||
%ul.list-tiled.anchors
|
||||
%li
|
||||
:markdown
|
||||
Still __getting started__? There are some great [tutorials](#Tutorials)
|
||||
|
||||
@ -10,18 +10,18 @@ title: Sass Basics
|
||||
|
||||
- content_for :complementary do
|
||||
%h3 Topics
|
||||
:markdown
|
||||
* [Preprocessing](#1)
|
||||
* [Variables](#2)
|
||||
* [Nesting](#3)
|
||||
* [Partials](#4)
|
||||
* [Import](#5)
|
||||
* [Mixins](#6)
|
||||
* [Inheritance](#7)
|
||||
* [Operators](#8)
|
||||
%ul.anchors
|
||||
%li= link_to "Preprocessing", "#topic-1"
|
||||
%li= link_to "Variables", "#topic-2"
|
||||
%li= link_to "Nesting", "#topic-3"
|
||||
%li= link_to "Partials", "#topic-4"
|
||||
%li= link_to "Import", "#topic-5"
|
||||
%li= link_to "Mixins", "#topic-6"
|
||||
%li= link_to "Inheritance", "#topic-7"
|
||||
%li= link_to "Operators", "#topic-8"
|
||||
|
||||
%ul.slides
|
||||
%li#1
|
||||
%li#topic-1
|
||||
:markdown
|
||||
## Pre-processing
|
||||
|
||||
@ -31,14 +31,24 @@ title: Sass Basics
|
||||
|
||||
* * *
|
||||
|
||||
%li#2
|
||||
%li#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 <code>$</code> symbol to make something a variable. Here's an example:
|
||||
|
||||
%ul
|
||||
%li= link_to "SCSS", "#topic-2-SCSS"
|
||||
%li= link_to "Sass", "#topic-2-Sass"
|
||||
|
||||
#topic-2-SCSS
|
||||
%h3 SCSS Syntax
|
||||
~ partial "code-snippets/homepage-variables-scss"
|
||||
|
||||
#topic-2-Sass
|
||||
%h3 Sass Syntax
|
||||
~ partial "code-snippets/homepage-variables-sass"
|
||||
|
||||
:markdown
|
||||
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.
|
||||
|
||||
@ -46,14 +56,24 @@ title: Sass Basics
|
||||
|
||||
%hr/
|
||||
|
||||
%li#3
|
||||
%li#topic-3
|
||||
:markdown
|
||||
## Nesting
|
||||
|
||||
When you write HTML you've probably noticed that it has a fairly clear nested, visual hierarchy. CSS, on the other hand, isn't. Sass will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Here's an example of some typical styles for a site's navigation:
|
||||
|
||||
%ul
|
||||
%li= link_to "SCSS", "#topic-3-SCSS"
|
||||
%li= link_to "Sass", "#topic-3-Sass"
|
||||
|
||||
#topic-3-SCSS
|
||||
%h3 SCSS Syntax
|
||||
~ partial "code-snippets/homepage-nesting-scss"
|
||||
|
||||
#topic-3-Sass
|
||||
%h3 Sass Syntax
|
||||
~ partial "code-snippets/homepage-nesting-sass"
|
||||
|
||||
:markdown
|
||||
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. When you generate the CSS you'll get something like this:
|
||||
|
||||
@ -61,7 +81,7 @@ title: Sass Basics
|
||||
|
||||
%hr/
|
||||
|
||||
%li#4
|
||||
%li#topic-4
|
||||
:markdown
|
||||
## Partials
|
||||
|
||||
@ -69,7 +89,7 @@ title: Sass Basics
|
||||
|
||||
***
|
||||
|
||||
%li#5
|
||||
%li#topic-5
|
||||
:markdown
|
||||
## Import
|
||||
|
||||
@ -77,9 +97,20 @@ title: Sass Basics
|
||||
|
||||
Let's say you have a couple of Sass files, <code>\_reset.scss</code> and <code>base.scss</code>. We want to import <code>\_reset.scss</code> into <code>base.scss</code>.
|
||||
|
||||
%ul
|
||||
%li= link_to "SCSS", "#topic-5-SCSS"
|
||||
%li= link_to "Sass", "#topic-5-Sass"
|
||||
|
||||
#topic-5-SCSS
|
||||
%h3 SCSS Syntax
|
||||
~ partial "code-snippets/homepage-import-1-scss"
|
||||
~ partial "code-snippets/homepage-import-2-scss"
|
||||
|
||||
#topic-5-Sass
|
||||
%h3 Sass Syntax
|
||||
~ partial "code-snippets/homepage-import-1-sass"
|
||||
~ partial "code-snippets/homepage-import-2-sass"
|
||||
|
||||
:markdown
|
||||
|
||||
Notice we're using <code>@import 'reset';</code> in the <code>base.scss</code> file. When you import a file you don't need to include the file extension <code>.scss</code> Sass is smart and will figure it out for you. When you generate the CSS you'll get:
|
||||
@ -88,14 +119,24 @@ title: Sass Basics
|
||||
|
||||
%hr/
|
||||
|
||||
%li#6
|
||||
%li#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. 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>border-radius</code>.
|
||||
|
||||
%ul
|
||||
%li= link_to "SCSS", "#topic-6-SCSS"
|
||||
%li= link_to "Sass", "#topic-6-Sass"
|
||||
|
||||
#topic-6-SCSS
|
||||
%h3 SCSS Syntax
|
||||
~ partial "code-snippets/homepage-mixins-scss"
|
||||
|
||||
#topic-6-Sass
|
||||
%h3 Sass Syntax
|
||||
~ partial "code-snippets/homepage-mixins-sass"
|
||||
|
||||
:markdown
|
||||
To create a mixin you use the <code>@mixin</code> directive and give it a name. We've named our mixin <code>border-radius</code>. We're also using the variable <code>$radius</code> inside the parentheses so we can pass in a radius 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. When your CSS is generated it'll look like this:
|
||||
|
||||
@ -103,14 +144,24 @@ title: Sass Basics
|
||||
|
||||
%hr/
|
||||
|
||||
%li#7
|
||||
%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.
|
||||
|
||||
%ul
|
||||
%li= link_to "SCSS", "#topic-7-SCSS"
|
||||
%li= link_to "Sass", "#topic-7-Sass"
|
||||
|
||||
#topic-7-SCSS
|
||||
%h3 SCSS Syntax
|
||||
~ partial "code-snippets/homepage-extend-scss"
|
||||
|
||||
#topic-7-Sass
|
||||
%h3 Sass Syntax
|
||||
~ partial "code-snippets/homepage-extend-sass"
|
||||
|
||||
:markdown
|
||||
What the above code does is allow you to take the CSS properties in <code>.message</code> and apply them to <code>.success</code>, <code>.error</code>, & <code>.warning</code>. The magic happens with the generated CSS, and this helps you avoid having to write multiple class names on HTML elements. This is what it looks like:
|
||||
|
||||
@ -118,14 +169,24 @@ title: Sass Basics
|
||||
|
||||
%hr/
|
||||
|
||||
%li#8
|
||||
%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`.
|
||||
|
||||
%ul
|
||||
%li= link_to "SCSS", "#topic-8-SCSS"
|
||||
%li= link_to "Sass", "#topic-8-Sass"
|
||||
|
||||
#topic-8-SCSS
|
||||
%h3 SCSS Syntax
|
||||
~ partial "code-snippets/homepage-operators-scss"
|
||||
|
||||
#topic-8-Sass
|
||||
%h3 Sass Syntax
|
||||
~ partial "code-snippets/homepage-operators-sass"
|
||||
|
||||
: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. The generated CSS will look like:
|
||||
|
||||
|
||||
@ -2,6 +2,6 @@
|
||||
:javascript
|
||||
window.jQuery || document.write('<script src="/assets/javascripts/vendor/jquery-2.0.3.js"><\/script>')
|
||||
|
||||
= javascript_include_tag "sass"
|
||||
= javascript_include_tag "vendor/jquery-ui-1.10.4.custom", "sass"
|
||||
|
||||
= yield_content :scripts_footer
|
||||
|
||||
Loading…
Reference in New Issue
Block a user