Responsive
This commit is contained in:
Rico Sta. Cruz
parent
503dedf2c2
commit
9b875bb30d
|
|
@ -11,6 +11,7 @@ html, body {
|
|||
}
|
||||
|
||||
body {
|
||||
@include font-size(0);
|
||||
padding: 8px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
@ -24,6 +25,11 @@ body {
|
|||
|
||||
pre, code {
|
||||
font-family: $monospace-font;
|
||||
letter-spacing: -0.03em;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 0.92em;
|
||||
}
|
||||
|
||||
* {
|
||||
|
|
|
|||
|
|
@ -4,10 +4,6 @@
|
|||
|
||||
/* Hide the first h2 heading */
|
||||
.h2-section {
|
||||
& > h2 {
|
||||
margin-top: 64px;
|
||||
}
|
||||
|
||||
&:first-child > h2 {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,16 +6,27 @@
|
|||
& > pre {
|
||||
margin: 0;
|
||||
padding: 16px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
& {
|
||||
background: white;
|
||||
box-shadow:
|
||||
0 6px 8px rgba(80, 100, 150, 0.07),
|
||||
0 2px 3px rgba(80, 100, 150, 0.15);
|
||||
0 6px 8px rgba(80, 100, 150, 0.06),
|
||||
0 1px 2px rgba(80, 100, 150, 0.30);
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
margin: 0 -16px;
|
||||
box-shadow:
|
||||
0 1px 1px rgba(80, 100, 150, 0.30);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Children
|
||||
*/
|
||||
|
||||
.h3-section > .body {
|
||||
/* Lists */
|
||||
& > ul {
|
||||
margin: 0;
|
||||
|
|
@ -24,7 +35,7 @@
|
|||
}
|
||||
|
||||
& > ul > li {
|
||||
padding: 16px;
|
||||
padding: 8px;
|
||||
padding-left: 32px + 4px;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -38,7 +49,7 @@
|
|||
background: $gray-text;
|
||||
border-radius: 50%;
|
||||
left: 16px;
|
||||
top: 24px + 2px;
|
||||
top: 16px + 2px;
|
||||
}
|
||||
|
||||
& > ul > li + li {
|
||||
|
|
@ -78,6 +89,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Prime
|
||||
*/
|
||||
|
||||
.h3-section.-prime > .body {
|
||||
border-radius: 2px;
|
||||
box-shadow:
|
||||
|
|
|
|||
|
|
@ -11,16 +11,32 @@
|
|||
padding: 0;
|
||||
margin-bottom: 16px;
|
||||
padding-bottom: 16px;
|
||||
margin-top: 64px;
|
||||
border-bottom: solid 1px $line-color;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin: $gutter / 2;
|
||||
margin-bottom: 8px;
|
||||
margin-top: 32px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
margin: $gutter / 4;
|
||||
margin-bottom: 8px;
|
||||
margin-top: 32px;
|
||||
padding-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.main-heading,
|
||||
.MarkdownBody h1 {
|
||||
font-size: 3.2em;
|
||||
@include font-size(6);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.MarkdownBody h2 {
|
||||
font-size: 2.4em;
|
||||
@include font-size(5);
|
||||
}
|
||||
|
||||
.MarkdownBody h3 {
|
||||
|
|
@ -28,7 +44,7 @@
|
|||
padding: 0;
|
||||
margin-bottom: 16px;
|
||||
font-family: $body-font;
|
||||
font-size: 1.66em;
|
||||
@include font-size(2);
|
||||
font-weight: 300;
|
||||
color: $baseA-400;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,12 +11,21 @@ $text-color: #333;
|
|||
$baseA-400: #53a;
|
||||
$baseB-400: #35a;
|
||||
$baseB-600: adjust-color($baseB-400, $lightness: 20%, $hue: -20deg);
|
||||
$line-color: rgba(50, 80, 150, 0.1);
|
||||
$line-color: rgba(50, 80, 150, 0.07);
|
||||
$dark-line-color: rgba(50, 80, 150, 0.2);
|
||||
|
||||
$modularscale: (
|
||||
base: 14px, ratio: 1.2,
|
||||
480px: (base: 13px, ratio: 1.15),
|
||||
768px: (base: 14px, ratio: 1.17),
|
||||
1280px: (base: 14px, ratio: 1.2)
|
||||
);
|
||||
|
||||
@import url('https://unpkg.com/sanitize.css@5.0.0/sanitize.css');
|
||||
@import url('https://fonts.googleapis.com/css?family=Fira+Mono:400');
|
||||
|
||||
@import './utils/modularscale';
|
||||
@import './utils/font-size';
|
||||
@import './base/base';
|
||||
@import './markdown/headings';
|
||||
@import './markdown/table';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
@mixin font-size ($n) {
|
||||
@include ms-respond(font-size, $n);
|
||||
}
|
||||
|
|
@ -0,0 +1,312 @@
|
|||
// https://github.com/modularscale/modularscale-sass v3.0.3
|
||||
|
||||
// Ratios
|
||||
$double-octave : 4 ;
|
||||
$pi : 3.14159265359 ;
|
||||
$major-twelfth : 3 ;
|
||||
$major-eleventh : 2.666666667 ;
|
||||
$major-tenth : 2.5 ;
|
||||
$octave : 2 ;
|
||||
$major-seventh : 1.875 ;
|
||||
$minor-seventh : 1.777777778 ;
|
||||
$major-sixth : 1.666666667 ;
|
||||
$phi : 1.618034 ;
|
||||
$golden : $phi ;
|
||||
$minor-sixth : 1.6 ;
|
||||
$fifth : 1.5 ;
|
||||
$augmented-fourth : 1.41421 ;
|
||||
$fourth : 1.333333333 ;
|
||||
$major-third : 1.25 ;
|
||||
$minor-third : 1.2 ;
|
||||
$major-second : 1.125 ;
|
||||
$minor-second : 1.066666667 ;
|
||||
|
||||
// Base config
|
||||
$ms-base : 1em !default;
|
||||
$ms-ratio : $fifth !default;
|
||||
$modularscale : () !default;// Parse settings starting with defaults.
|
||||
// Settings should cascade down like you would expect in CSS.
|
||||
// More specific overrides previous settings.
|
||||
|
||||
@function ms-settings($b: false, $r: false, $t: false, $m: $modularscale) {
|
||||
$base: $ms-base;
|
||||
$ratio: $ms-ratio;
|
||||
$thread: map-get($m, $t);
|
||||
|
||||
// Override with user settings
|
||||
@if map-get($m, base) {
|
||||
$base: map-get($m, base);
|
||||
}
|
||||
@if map-get($m, ratio) {
|
||||
$ratio: map-get($m, ratio);
|
||||
}
|
||||
|
||||
// Override with thread settings
|
||||
@if $thread {
|
||||
@if map-get($thread, base) {
|
||||
$base: map-get($thread, base);
|
||||
}
|
||||
@if map-get($thread, ratio) {
|
||||
$ratio: map-get($thread, ratio);
|
||||
}
|
||||
}
|
||||
|
||||
// Override with inline settings
|
||||
@if $b {
|
||||
$base: $b;
|
||||
}
|
||||
@if $r {
|
||||
$ratio: $r;
|
||||
}
|
||||
|
||||
@return $base $ratio;
|
||||
}// Sass does not have native pow() support so this needs to be added.
|
||||
// Compass and other libs implement this more extensively.
|
||||
// In order to keep this simple, use those when they are avalible.
|
||||
// Issue for pow() support in Sass: https://github.com/sass/sass/issues/684
|
||||
|
||||
@function ms-pow($b,$e) {
|
||||
|
||||
// Return 1 if exponent is 0
|
||||
@if $e == 0 {
|
||||
@return 1;
|
||||
}
|
||||
|
||||
// If pow() exists (compass or mathsass) use that.
|
||||
@if function-exists('pow') {
|
||||
@return pow($b,$e);
|
||||
}
|
||||
|
||||
// This does not support non-integer exponents,
|
||||
// Check and return an error if a non-integer exponent is passed.
|
||||
@if (floor($e) != $e) {
|
||||
@error '
|
||||
======================================================================
|
||||
Non-integer values are not supported in modularscale by default.
|
||||
|
||||
Try using mathsass in your project to add non-integer scale support.
|
||||
https://github.com/terkel/mathsass
|
||||
======================================================================
|
||||
'
|
||||
}
|
||||
|
||||
// Seed the return.
|
||||
$ms-return: $b;
|
||||
|
||||
// Multiply or divide by the specified number of times.
|
||||
@if $e > 0 {
|
||||
@for $i from 1 to $e {
|
||||
$ms-return: $ms-return * $b;
|
||||
}
|
||||
}
|
||||
@if $e < 0 {
|
||||
@for $i from $e through 0 {
|
||||
$ms-return: $ms-return / $b;
|
||||
}
|
||||
}
|
||||
@return $ms-return;
|
||||
}// Stripping units is not a best practice
|
||||
// This function should not be used elsewhere
|
||||
// It is used here because calc() doesn't do unit logic
|
||||
// AND target ratios use units as a hack to get a number.
|
||||
@function ms-unitless($val) {
|
||||
@return ($val / ($val - $val + 1));
|
||||
}// Basic list sorting
|
||||
// Would like to replace with http://sassmeister.com/gist/30e4863bd03ce0e1617c
|
||||
// Unfortunately libsass has a bug with passing arguments into the min() funciton.
|
||||
|
||||
@function ms-sort($l) {
|
||||
|
||||
// loop until the list is confirmed to be sorted
|
||||
$sorted: false;
|
||||
@while $sorted == false {
|
||||
|
||||
// Start with the assumption that the lists are sorted.
|
||||
$sorted: true;
|
||||
|
||||
// Loop through the list, checking each value with the one next to it.
|
||||
// Swap the values if they need to be swapped.
|
||||
// Not super fast but simple and modular scale doesn't lean hard on sorting.
|
||||
@for $i from 2 through length($l) {
|
||||
$n1: nth($l,$i - 1);
|
||||
$n2: nth($l,$i);
|
||||
|
||||
// If the first value is greater than the 2nd, swap them.
|
||||
@if $n1 > $n2 {
|
||||
$l: set-nth($l, $i, $n1);
|
||||
$l: set-nth($l, $i - 1, $n2);
|
||||
|
||||
// The list isn't sorted and needs to be looped through again.
|
||||
$sorted: false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Return the sorted list.
|
||||
@return $l;
|
||||
}// No reason to have decimal pixel values,
|
||||
// normalize them to whole numbers.
|
||||
|
||||
@function ms-round-px($r) {
|
||||
@if unit($r) == 'px' {
|
||||
@return round($r);
|
||||
}
|
||||
@return $r;
|
||||
}// Convert number string to number
|
||||
@function ms-to-num($n) {
|
||||
$l: str-length($n);
|
||||
$r: 0;
|
||||
$m: str-index($n,'.');
|
||||
@if $m == null {
|
||||
$m: $l + 1;
|
||||
}
|
||||
// Loop through digits and convert to numbers
|
||||
@for $i from 1 through $l {
|
||||
$v: str-slice($n,$i,$i);
|
||||
@if $v == '1' { $v: 1; }
|
||||
@elseif $v == '2' { $v: 2; }
|
||||
@elseif $v == '3' { $v: 3; }
|
||||
@elseif $v == '4' { $v: 4; }
|
||||
@elseif $v == '5' { $v: 5; }
|
||||
@elseif $v == '6' { $v: 6; }
|
||||
@elseif $v == '7' { $v: 7; }
|
||||
@elseif $v == '8' { $v: 8; }
|
||||
@elseif $v == '9' { $v: 9; }
|
||||
@elseif $v == '0' { $v: 0; }
|
||||
@else { $v: null; }
|
||||
@if $v != null {
|
||||
$m: $m - 1;
|
||||
$r: $r + ms-pow(10,$m - 1) * $v;
|
||||
} @else {
|
||||
$l: $l - 1;
|
||||
}
|
||||
}
|
||||
@return $r;
|
||||
}
|
||||
|
||||
// Find a ratio based on a target value
|
||||
@function ms-target($t,$b) {
|
||||
// Convert to string
|
||||
$t: $t + '';
|
||||
// Remove base units to calulate ratio
|
||||
$b: ms-unitless(nth($b,1));
|
||||
// Find where 'at' is in the string
|
||||
$at: str-index($t,'at');
|
||||
|
||||
// Slice the value and target out
|
||||
// and convert strings to numbers
|
||||
$v: ms-to-num(str-slice($t,0,$at - 1));
|
||||
$t: ms-to-num(str-slice($t,$at + 2));
|
||||
|
||||
// Solve the modular scale function for the ratio.
|
||||
@return ms-pow(($v/$b),(1/$t));
|
||||
}@function ms-function($v: 0, $base: false, $ratio: false, $thread: false, $settings: $modularscale) {
|
||||
|
||||
// Parse settings
|
||||
$ms-settings: ms-settings($base,$ratio,$thread,$settings);
|
||||
$base: nth($ms-settings, 1);
|
||||
$ratio: nth($ms-settings, 2);
|
||||
|
||||
// Render target values from settings.
|
||||
@if unit($ratio) != '' {
|
||||
$ratio: ms-target($ratio,$base)
|
||||
}
|
||||
|
||||
// Fast calc if not multi stranded
|
||||
@if(length($base) == 1) {
|
||||
@return ms-round-px(ms-pow($ratio, $v) * $base);
|
||||
}
|
||||
|
||||
// Create new base array
|
||||
$ms-bases: nth($base,1);
|
||||
|
||||
// Normalize base values
|
||||
@for $i from 2 through length($base) {
|
||||
// initial base value
|
||||
$ms-base: nth($base,$i);
|
||||
// If the base is bigger than the main base
|
||||
@if($ms-base > nth($base,1)) {
|
||||
// divide the value until it aligns with main base.
|
||||
@while($ms-base > nth($base,1)) {
|
||||
$ms-base: $ms-base / $ratio;
|
||||
}
|
||||
$ms-base: $ms-base * $ratio;
|
||||
}
|
||||
// If the base is smaller than the main base.
|
||||
@elseif ($ms-base < nth($base,1)) {
|
||||
// pump up the value until it aligns with main base.
|
||||
@while $ms-base < nth($base,1) {
|
||||
$ms-base: $ms-base * $ratio;
|
||||
}
|
||||
}
|
||||
// Push into new array
|
||||
$ms-bases: append($ms-bases,$ms-base);
|
||||
}
|
||||
|
||||
// Sort array from smallest to largest.
|
||||
$ms-bases: ms-sort($ms-bases);
|
||||
|
||||
// Find step to use in calculation
|
||||
$vtep: floor($v / length($ms-bases));
|
||||
// Find base to use in calculation
|
||||
$ms-base: round(($v / length($ms-bases) - $vtep) * length($ms-bases)) + 1;
|
||||
|
||||
@return ms-round-px(ms-pow($ratio, $vtep) * nth($ms-bases,$ms-base));
|
||||
}// Generate calc() function
|
||||
// based on Mike Riethmuller's Precise control over responsive typography
|
||||
// http://madebymike.com.au/writing/precise-control-responsive-typography/
|
||||
@function ms-fluid($val1: 1em, $val2: 1em, $break1: 0, $break2: 0) {
|
||||
$diff: ms-unitless($val2) - ms-unitless($val1);
|
||||
|
||||
// v1 + (v2 - v1) * ( (100vw - b1) / b2 - b1 )
|
||||
@return calc( #{$val1} + #{ms-unitless($val2) - ms-unitless($val1)} * ( ( 100vw - #{$break1}) / #{ms-unitless($break2) - ms-unitless($break1)} ) );
|
||||
}
|
||||
|
||||
// Main responsive mixin
|
||||
@mixin ms-respond($prop, $val, $map: $modularscale) {
|
||||
$base: $ms-base;
|
||||
$ratio: $ms-ratio;
|
||||
|
||||
$first-write: true;
|
||||
$last-break: null;
|
||||
|
||||
// loop through all settings with a breakpoint type value
|
||||
@each $v, $s in $map {
|
||||
@if type-of($v) == number {
|
||||
@if unit($v) != '' {
|
||||
|
||||
// Write out the first value without a media query.
|
||||
@if $first-write {
|
||||
#{$prop}: ms-function($val, $thread: $v, $settings: $map);
|
||||
|
||||
// Not the first write anymore, reset to false to move on.
|
||||
$first-write: false;
|
||||
$last-break: $v;
|
||||
}
|
||||
|
||||
// Write intermediate breakpoints.
|
||||
@else {
|
||||
@media (min-width: $last-break) and (max-width: $v) {
|
||||
$val1: ms-function($val, $thread: $last-break, $settings: $map);
|
||||
$val2: ms-function($val, $thread: $v, $settings: $map);
|
||||
#{$prop}: ms-fluid($val1,$val2,$last-break,$v);
|
||||
}
|
||||
$last-break: $v;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Write the last breakpoint.
|
||||
@if $last-break {
|
||||
@media (min-width: $last-break) {
|
||||
#{$prop}: ms-function($val, $thread: $last-break, $settings: $map);
|
||||
}
|
||||
}
|
||||
}// To attempt to avoid conflicts with other libraries
|
||||
// all funcitons are namespaced with `ms-`.
|
||||
// However, to increase usability, a shorthand function is included here.
|
||||
|
||||
@function ms($v: 0, $base: false, $ratio: false, $thread: false, $settings: $modularscale) {
|
||||
@return ms-function($v, $base, $ratio, $thread, $settings);
|
||||
}
|
||||
79
sass.md
79
sass.md
|
|
@ -11,7 +11,9 @@ layout: 2017/sheet
|
|||
|
||||
```scss
|
||||
$red: #833;
|
||||
```
|
||||
|
||||
```scss
|
||||
body {
|
||||
color: $red;
|
||||
}
|
||||
|
|
@ -31,6 +33,13 @@ body {
|
|||
}
|
||||
```
|
||||
|
||||
### Comments
|
||||
|
||||
```scss
|
||||
/* Block comments */
|
||||
// Line comments
|
||||
```
|
||||
|
||||
### Mixins
|
||||
|
||||
```scss
|
||||
|
|
@ -38,7 +47,9 @@ body {
|
|||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
}
|
||||
```
|
||||
|
||||
```scss
|
||||
h1 {
|
||||
@include heading-font;
|
||||
}
|
||||
|
|
@ -52,18 +63,34 @@ h1 {
|
|||
}
|
||||
```
|
||||
|
||||
```scss
|
||||
body {
|
||||
@include font-size(2);
|
||||
}
|
||||
```
|
||||
|
||||
### Extend
|
||||
|
||||
```scss
|
||||
.button {
|
||||
···
|
||||
}
|
||||
```
|
||||
|
||||
```scss
|
||||
.push-button {
|
||||
@extend .button;
|
||||
}
|
||||
```
|
||||
|
||||
### Composing
|
||||
|
||||
```scss
|
||||
@import './other_sass_file`;
|
||||
```
|
||||
|
||||
The `.scss` or `.sass` extension is optional.
|
||||
|
||||
## Color functions
|
||||
|
||||
### rgba
|
||||
|
|
@ -77,7 +104,7 @@ rgba($color, .5)
|
|||
### Mixing
|
||||
|
||||
```scss
|
||||
mix($a, $b, 10%) /* 10% a, 90% b */
|
||||
mix($a, $b, 10%) // 10% a, 90% b
|
||||
```
|
||||
|
||||
### Modifying HSLA
|
||||
|
|
@ -95,20 +122,20 @@ grayscale($color)
|
|||
|
||||
```scss
|
||||
adjust-hue($color, 15deg)
|
||||
compliment($color) /* like adjust-hue(_, 180deg) */
|
||||
compliment($color) // like adjust-hue(_, 180deg)
|
||||
invert($color)
|
||||
```
|
||||
|
||||
```scss
|
||||
adjust-hue($color, 15deg)
|
||||
compliment($color) /* like adjust-hue(_, 180deg) */
|
||||
compliment($color) // like adjust-hue(_, 180deg)
|
||||
invert($color)
|
||||
```
|
||||
|
||||
```scss
|
||||
fade-in($color, .5) /* aka opacify() */
|
||||
fade-out($color, .5) /* aka transparentize() - halves the opacity */
|
||||
rgba($color, .5) /* sets alpha to .5 */
|
||||
fade-in($color, .5) // aka opacify()
|
||||
fade-out($color, .5) // aka transparentize() - halves the opacity
|
||||
rgba($color, .5) // sets alpha to .5
|
||||
```
|
||||
|
||||
### Getting HSL values
|
||||
|
|
@ -117,26 +144,26 @@ rgba($color, .5) /* sets alpha to .5 */
|
|||
hue($color)
|
||||
saturation($color)
|
||||
lightness($color)
|
||||
alpha($color) /* aka opacity() */
|
||||
alpha($color) // aka opacity()
|
||||
```
|
||||
|
||||
### Adjustments
|
||||
|
||||
```scss
|
||||
/* Changes by fixed amounts */
|
||||
// Changes by fixed amounts
|
||||
adjust-color($color, $blue: 5)
|
||||
adjust-color($color, $lightness: -30%) /* like darken(_, 30%) */
|
||||
adjust-color($color, $alpha: -0.4) /* like fade-out(_, .4) */
|
||||
adjust-color($color, $hue: 30deg) /* like adjust-hue(_, 15deg) */
|
||||
adjust-color($color, $lightness: -30%) // like darken(_, 30%)
|
||||
adjust-color($color, $alpha: -0.4) // like fade-out(_, .4)
|
||||
adjust-color($color, $hue: 30deg) // like adjust-hue(_, 15deg)
|
||||
```
|
||||
|
||||
```scss
|
||||
/* Changes via percentage */
|
||||
// Changes via percentage
|
||||
scale-color($color, $lightness: 50%)
|
||||
```
|
||||
|
||||
```scss
|
||||
/* Changes one property completely */
|
||||
// Changes one property completely
|
||||
change-color($color, $hue: 180deg)
|
||||
change-color($color, $blue: 250)
|
||||
```
|
||||
|
|
@ -159,15 +186,15 @@ to-lower-case(hello)
|
|||
|
||||
```scss
|
||||
str-length(hello world)
|
||||
str-slice(hello, 2, 5) /* "ello" - it's 1-based, not 0-based */
|
||||
str-insert("abcd", "X", 1) /* "Xabcd" */
|
||||
str-slice(hello, 2, 5) // "ello" - it's 1-based, not 0-based
|
||||
str-insert("abcd", "X", 1) // "Xabcd"
|
||||
```
|
||||
|
||||
### Units
|
||||
|
||||
```scss
|
||||
unit(3em) /* 'em' */
|
||||
unitless(100px) /* false */
|
||||
unit(3em) // 'em'
|
||||
unitless(100px) // false
|
||||
```
|
||||
|
||||
### Numbers
|
||||
|
|
@ -185,15 +212,15 @@ max(1, 2, 3)
|
|||
```
|
||||
|
||||
```scss
|
||||
percentage(.5) /* 50% */
|
||||
random(3) /* 0..3 */
|
||||
percentage(.5) // 50%
|
||||
random(3) // 0..3
|
||||
```
|
||||
|
||||
### Misc
|
||||
|
||||
```scss
|
||||
variable-exists(red) /* checks for $red */
|
||||
mixin-exists(red-text) /* checks for @mixin red-text */
|
||||
variable-exists(red) // checks for $red
|
||||
mixin-exists(red-text) // checks for @mixin red-text
|
||||
function-exists(redify)
|
||||
```
|
||||
|
||||
|
|
@ -202,8 +229,8 @@ global-variable-exists(red)
|
|||
```
|
||||
|
||||
```scss
|
||||
selector-append('.menu', 'li', 'a') /* .menu li a */
|
||||
selector-nest('.menu', '&:hover li') /* .menu:hover li */
|
||||
selector-append('.menu', 'li', 'a') // .menu li a
|
||||
selector-nest('.menu', '&:hover li') // .menu:hover li
|
||||
selector-extend(...)
|
||||
selector-parse(...)
|
||||
selector-replace(...)
|
||||
|
|
@ -285,8 +312,8 @@ $i: 6;
|
|||
### Interpolation
|
||||
|
||||
```scss
|
||||
.#{$klass} { ... } /* Class */
|
||||
call($function-name) /* Functions */
|
||||
.#{$klass} { ... } // Class
|
||||
call($function-name) // Functions
|
||||
|
||||
@media #{$tablet}
|
||||
font: #{$size}/#{$line-height}
|
||||
|
|
@ -298,7 +325,7 @@ url("#{$background}.jpg")
|
|||
```scss
|
||||
$list: (a b c);
|
||||
|
||||
nth($list, 1) /* starts with 1 */
|
||||
nth($list, 1) // starts with 1
|
||||
length($list)
|
||||
|
||||
@each $item in $list { ... }
|
||||
|
|
|
|||
Loading…
Reference in New Issue