mirror of
https://github.com/danog/sass-site.git
synced 2025-01-21 21:31:34 +01:00
fix syntax errors
This commit is contained in:
Jina Anne
parent
97c5ac21af
commit
936bc03a6c
15
Gemfile.lock
15
Gemfile.lock
@ -11,9 +11,6 @@ GEM
|
||||
autoprefixer-rails (6.2.3)
|
||||
execjs
|
||||
json
|
||||
breakpoint (2.5.0)
|
||||
sass (~> 3.3)
|
||||
sassy-maps (< 1.0.0)
|
||||
builder (3.2.3)
|
||||
capybara (2.4.4)
|
||||
mime-types (>= 1.16)
|
||||
@ -124,7 +121,6 @@ GEM
|
||||
multi_json (1.13.1)
|
||||
nokogiri (1.8.2)
|
||||
mini_portile2 (~> 2.3.0)
|
||||
normalize-rails (3.0.3)
|
||||
padrino-helpers (0.12.9)
|
||||
i18n (~> 0.6, >= 0.6.7)
|
||||
padrino-support (= 0.12.9)
|
||||
@ -151,8 +147,6 @@ GEM
|
||||
rouge (1.11.1)
|
||||
rubypants (0.7.0)
|
||||
sass (3.4.25)
|
||||
sassy-maps (0.4.0)
|
||||
sass (~> 3.3)
|
||||
semantic (1.6.1)
|
||||
sprockets (2.12.4)
|
||||
hike (~> 1.2)
|
||||
@ -164,8 +158,6 @@ GEM
|
||||
sprockets-sass (1.3.1)
|
||||
sprockets (~> 2.0)
|
||||
tilt (~> 1.1)
|
||||
susy (2.2.12)
|
||||
sass (>= 3.3.0, < 3.5)
|
||||
temple (0.8.0)
|
||||
therubyracer (0.12.3)
|
||||
libv8 (~> 3.16.14.15)
|
||||
@ -192,7 +184,6 @@ PLATFORMS
|
||||
ruby
|
||||
|
||||
DEPENDENCIES
|
||||
breakpoint (~> 2.5.0)
|
||||
builder (~> 3.2.2)
|
||||
html-proofer (~> 3.9)
|
||||
middleman (~> 3.4.1)
|
||||
@ -202,7 +193,6 @@ DEPENDENCIES
|
||||
middleman-syntax (~> 2.0.0)
|
||||
modular-scale (~> 2.1.1)
|
||||
nokogiri (~> 1.6)
|
||||
normalize-rails (~> 3.0.3)
|
||||
puma
|
||||
rack
|
||||
rack-contrib
|
||||
@ -210,7 +200,6 @@ DEPENDENCIES
|
||||
rake
|
||||
redcarpet (~> 3.3.3)
|
||||
semantic (~> 1.6)
|
||||
susy (~> 2.2.9)
|
||||
therubyracer (~> 0.12.3)
|
||||
typogruby (~> 1.0.18)
|
||||
tzinfo-data (~> 1.2015.7)
|
||||
@ -218,7 +207,7 @@ DEPENDENCIES
|
||||
yard (~> 0.9)
|
||||
|
||||
RUBY VERSION
|
||||
ruby 2.4.1p111
|
||||
ruby 2.5.3p105
|
||||
|
||||
BUNDLED WITH
|
||||
1.16.2
|
||||
1.16.6
|
||||
|
||||
@ -1,66 +1,5 @@
|
||||
.ui-helper-reset { line-height: inherit; }
|
||||
.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;
|
||||
a:focus {
|
||||
outline: 0px !important;
|
||||
border:none !important;
|
||||
box-shadow:none !important;
|
||||
}
|
||||
.ui-tabs-active {
|
||||
&:after, &:before {
|
||||
bottom: -1px;
|
||||
left: 50%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
&:after {
|
||||
border-color: transparent;
|
||||
border-bottom-color: #f8f8f8;
|
||||
border-width: 10px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
&:before {
|
||||
border-color: transparent;
|
||||
border-bottom-color: #ebebeb;
|
||||
border-width: 11px;
|
||||
margin-left: -11px;
|
||||
}
|
||||
}
|
||||
li {
|
||||
float: right;
|
||||
|
||||
&,
|
||||
&.ui-tabs-active { margin: 0; }
|
||||
|
||||
|
||||
&.css-tab {
|
||||
&,
|
||||
&.ui-tabs-active { margin-left: 2em; }
|
||||
|
||||
a::before {
|
||||
color: $color-text-weak;
|
||||
content: "\21d2";
|
||||
font-size: 1.3em;
|
||||
font-weight: bold;
|
||||
left: -1.2em;
|
||||
position: absolute;
|
||||
}
|
||||
}
|
||||
}
|
||||
.ui-tabs {
|
||||
&,
|
||||
.ui-tabs-nav,
|
||||
@ -71,35 +10,42 @@
|
||||
position: relative;
|
||||
top: 4.78rem;
|
||||
margin-right: -1em;
|
||||
|
||||
a:focus {
|
||||
outline: 0px !important;
|
||||
border:none !important;
|
||||
box-shadow:none !important;
|
||||
}
|
||||
|
||||
.ui-tabs-active {
|
||||
&:after, &:before {
|
||||
bottom: -3px;
|
||||
left: 50%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
&:after {
|
||||
border-color: transparent;
|
||||
border-bottom-color: #f8f8f8;
|
||||
border-width: 10px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
&:before {
|
||||
border-color: transparent;
|
||||
border-bottom-color: #ebebeb;
|
||||
border-width: 11px;
|
||||
margin-left: -11px;
|
||||
}
|
||||
|
||||
&:after,
|
||||
&:before {
|
||||
bottom: -3px;
|
||||
left: 50%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&:after {
|
||||
border-color: transparent;
|
||||
border-bottom-color: #f8f8f8;
|
||||
border-width: 10px;
|
||||
margin-left: -10px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
border-color: transparent;
|
||||
border-bottom-color: #ebebeb;
|
||||
border-width: 11px;
|
||||
margin-left: -11px;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
float: right;
|
||||
|
||||
@ -108,6 +54,7 @@
|
||||
|
||||
|
||||
&.css-tab {
|
||||
|
||||
&,
|
||||
&.ui-tabs-active { margin-left: 2em; }
|
||||
|
||||
|
||||
@ -168,53 +168,53 @@ introduction: >
|
||||
We want to import `_reset.scss` into `base.scss`.
|
||||
|
||||
- example do
|
||||
:plain
|
||||
// _reset.scss
|
||||
html,
|
||||
body,
|
||||
ul,
|
||||
ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
---
|
||||
// base.scss
|
||||
@import 'reset';
|
||||
body {
|
||||
font: 100% Helvetica, sans-serif;
|
||||
background-color: #efefef;
|
||||
}
|
||||
===
|
||||
// _reset.sass
|
||||
html,
|
||||
body,
|
||||
ul,
|
||||
ol
|
||||
margin: 0
|
||||
padding: 0
|
||||
---
|
||||
// base.sass
|
||||
@import reset
|
||||
body
|
||||
font: 100% Helvetica, sans-serif
|
||||
background-color: #efefef
|
||||
===
|
||||
html,
|
||||
body,
|
||||
ul,
|
||||
ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body {
|
||||
font: 100% Helvetica, sans-serif;
|
||||
background-color: #efefef;
|
||||
}
|
||||
:plain
|
||||
// _reset.scss
|
||||
html,
|
||||
body,
|
||||
ul,
|
||||
ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
---
|
||||
// base.scss
|
||||
@import 'reset';
|
||||
body {
|
||||
font: 100% Helvetica, sans-serif;
|
||||
background-color: #efefef;
|
||||
}
|
||||
===
|
||||
// _reset.sass
|
||||
html,
|
||||
body,
|
||||
ul,
|
||||
ol
|
||||
margin: 0
|
||||
padding: 0
|
||||
---
|
||||
// base.sass
|
||||
@import reset
|
||||
body
|
||||
font: 100% Helvetica, sans-serif
|
||||
background-color: #efefef
|
||||
===
|
||||
html,
|
||||
body,
|
||||
ul,
|
||||
ol {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body {
|
||||
font: 100% Helvetica, sans-serif;
|
||||
background-color: #efefef;
|
||||
}
|
||||
|
||||
:markdown
|
||||
Notice we're using `@import 'reset';` in the `base.scss` file. When you
|
||||
import a file you don't need to include the file extension `.scss`. Sass
|
||||
is smart and will figure it out for you.
|
||||
:markdown
|
||||
Notice we're using `@import 'reset';` in the `base.scss` file. When you
|
||||
import a file you don't need to include the file extension `.scss`. Sass
|
||||
is smart and will figure it out for you.
|
||||
|
||||
%section.sl-l-section.sl-l-section--small#topic-6
|
||||
:markdown
|
||||
@ -384,40 +384,40 @@ introduction: >
|
||||
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>.
|
||||
## Mixins
|
||||
|
||||
- example do
|
||||
:plain
|
||||
@mixin transform($property) {
|
||||
-webkit-transform: $property;
|
||||
-ms-transform: $property;
|
||||
transform: $property;
|
||||
}
|
||||
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>.
|
||||
|
||||
.box { @include transform(rotate(30deg)); }
|
||||
===
|
||||
=transform($property)
|
||||
-webkit-transform: $property
|
||||
-ms-transform: $property
|
||||
transform: $property
|
||||
- example do
|
||||
:plain
|
||||
@mixin transform($property) {
|
||||
-webkit-transform: $property;
|
||||
-ms-transform: $property;
|
||||
transform: $property;
|
||||
}
|
||||
|
||||
.box
|
||||
+transform(rotate(30deg))
|
||||
.box { @include transform(rotate(30deg)); }
|
||||
===
|
||||
=transform($property)
|
||||
-webkit-transform: $property
|
||||
-ms-transform: $property
|
||||
transform: $property
|
||||
|
||||
: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.
|
||||
.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.
|
||||
|
||||
%hr/
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user