Meadows of wild horses

Blog...

Sass

| Comments

CSS의 확장 Sass

Nested Rules

.scss 중첩 규칙 - 1

example-01.scss
1
2
3
4
5
6
7
8
9

#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    boackground-color: #ff0000;
    color: #0000;
  }
}

컴파일된 .css #main p를 .redbox가 상속 받으면 2칸 들여 쓰기 됩니다.

example-01.css
1
2
3
4
5
6

#main p {
  color: #00ff00;
  wdth: 97%; }
  #main p .redbox {
    background-color: #ff0000;
    color: #000000; }

.scss 중첩 규칙 - 2

모든 selector에 #main이 상속 됩니다.

example-02.scss
1
2
3
4
5
6
7
8
9

#main {
  width: 97%;

  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }
  pre { font-size: 3em; }
}
example-02.css
1
2
3
4
5
6
7
8

#mian {
  width: 97%; }
  #mian p, #main div {
    font-size: 2em; }
    #mian p a, #main div a {
      font-weight: bold; }
  #main pre {
    font-size: 3em; }

부모 셀렉터의 상속자: &

&를 사용함으로서 부모 셀렉터를 상속 받을수 있습니다.

example-03.scss
1
2
3
4
5
6

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

&은 부모 a를 상속 받습니다.

example-03.css
1
2
3
4
5
6
7

a {
  font-weight: bold;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }
  body.firefox a {
    font-weight: normal; }

상속자의 상위 상속자도 포함 됩니다.

example-04.scss
1
2
3
4
5
6
7

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

최상의 부모인 #main을 포함 합니다.

example-04.css
1
2
3
4
5
6

#main {
  color: black; }
  #main a {
    font-weight: bold; }
      #main a:hover {
  color: red; }

Nested Properties

태그의 속성도 상속 합니다.

example-05.scss
1
2
3
4
5
6
7

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

font의 속성들이 상속 됩니다.

example-05.css
1
2
3
4

.funky {
  font-family: fantasy;
  font-szie: 30em;
  font-weight: bold; }

개별 태그와 속성 상속 예 입니다.

example-06.scss
1
2
3
4
5
6
7

.funky {
  font: 2px/3px {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

태그는 따로 선언 되었습니다.

example-06.css
1
2
3
4
5

.funky {
  font: 2px/3px;
    font-family: fantasy;
    font-size: 30em;
    font-weight: bold; }

주석: /* */ and //

//한줄 주석으로 변환시 .css에 표시 되지않습니다. /* */ 다중 주석 문으로 .css변환시에도 남아 있습니다.

example-07.scss
1
2
3
4
5

/* multiple line
    is not delete in css */
body { color: black; }
// one line is delete in css
a { color: green; }
example-07.css
1
2
3
4

/* multiple line
    is not delete in css */
body { color: black; }
a { color: green; }

변수: $

변수 선언 기호는 $입니다.

example-08.scss
1
2
3
4

$width: 5em;
#main {
  width: $width;
}

선언된 $width: 5em값이 적용 됩니다.

example-08.css
1
2
3

#main {
  width: 5em;
}

문자열

변수 선언후 문자열에 #{$string}을 통해서 사용 할수 있습니다.

example-09.scss
1
2
3
4
5
6

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}
@include firefox-message(".header");

$selector에 인자로 .header을 받고 #{$selector}값에 대입 합니다.

example-09.css
1
2

body.firefox .header:before {
  content: "Hi, Firefox users!"; }

숫자 연산

in와 pt를 같이 사용하면 in로 변환되어 계산 됩니다.

example-10.scss
1
2
3

p {
  width: 1in + 8pt;
}
example-10.css
1
2

p {
  width: 1.111in }

나누기 와 /

margin-left 처럼 다른 인수와 연산을 하지 않으면 .css변환시 표기대로 변환 됩니다.

example-11.scss
1
2
3
4
5
6
7

p {
  font: 10px/8px;
  $width: 1000px;
  width: $width/2;
  height: (500px/2);
  margin-left: 5px + 8px/2px;
}

font의 값은 연산하지 않습니다.

example-11.css
1
2
3
4
5
6

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px;
}

변수에 할당하여 연산할수도 있습니다.

example-12.scss
1
2
3
4
5

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}
example-12.css
1
2

p {
  font: 12px/30px; }

Color 연산

Color의 덧셈 입니다.

example-13.scss
1
2
3

p {
  color: #010203 + #040506;
}
example-13.css
1
2

p {
  color: #050709; }

Color의 곱셈 입니다.

example-14.scss
1
2
3

p {
  color: #010203 * 2;
}
example-14.css
1
2

p {
  color: #020406; }

rgba 덧셈

최소 값은 0이며 양측 덧셈 최대값은 255 입니다. 투명도가 동일값(0.75) 이어야 계산이 됩니다.

example-15.scss
1
2
3

p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}
example-15.css
1
2

p {
  color: rgba(255, 255, 0, 0.75); }

opacify 투명도값인 0.5 + 0.3 으로 계산 합니다. transparentize는 0.5의 값을 0.25로 변경합니다.

example-16.scss
1
2
3
4
5

$translucent-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
}
example-16.css
1
2
3

p {
  color: rgba(255, 0, 0, 0.8);
  background-color: rgba(255, 0, 0, 0.25); }

문자열 연산

문자열의 덧셈

일반적인 문자열 덧셈

example-17.scss
1
2
3

p {
  cursor: e + -resize;
}
example-17.css
1
2

p {
  cursor: e-resize; }

공백을 포함한 문자열의 덧셈 ""로 감싸주게 됩니다.

example-18.scss
1
2
3
4

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}
example-18.css
1
2
3

p:before {
  content: "Foo Bar";
  font-family: sans-serif; }

px값과 auto 인자가 있을시 ( ) 없이도 px값 만 계산 합니다.

example-19.scss
1
2
3

p {
  margin: 3px + 4px auto;
}
example-19.css
1
2

p {
  margin: 7px auto; }

문자열 내에서 덧셈이 가능합니다.

example-20.scss
1
2
3

p:before {
  content: "I ate #{5 + 10} pies!";
}
example-20.css
1
2

p:before {
  content: "I ate 15 pies!"; }

변수 값이 null일시 무시 합니다.

example-21.scss
1
2
3
4

$value: null;
  p:before {
  content: "I ate #{$value} pies!";
}
example-21.css
1
2

p:before {
  content: "I ate pies!"; }

Parentheses(괄호)

( )우선 순위로 계산 합니다.

example-22.scss
1
2
3

p {
  width: 1em + (2em * 3);
}
example-22.css
1
2
3

p {
  width: 7em;
}

Functions(함수)

hsl ($hue, $saturation, $lightness) 괄호의 값은 (색깔, 채도, 밝기)을 뜻합니다.

example-23.scss
1
2
3

p {
  color: hsl(0, 100%, 50%);
}
example-23.css
1
2

p {
  color: red; }

Interpolation: #{} (보간법)

문자 보간 하는 방법 입니다. $name값 foo와 $attr값 border을 #{$name}, #{$attr}을 사용해 보간 합니다.

example-24.scss
1
2
3
4
5

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}
example-24.css
1
2
3

p.foo {
  border-color: blue;
}

px값도 보간할수 있습니다.

example-25.scss
1
2
3
4
5

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size} / #{$line-height};
}
example-25.css
1

p { font: 12px / 30px; }

Variable Defaults: !default (기본 변수)

$content값이 참인지 분별하여 거짓이면 Second content?값을 부여 합니다. 참이므로 $content는 First..가 됩니다. $new_content는 거짓 이므로 First time…을 출력 합니다.

example-26.scss
1
2
3
4
5
6
7
8

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  ccontent: $content;
  new-content: $new_content;
}
example-26.css
1
2
3
4

#main {
  content: "First content";
  new-content: "First time reference";
}

$content의 값이 null이므로 !default가 동작 합니다.

example-27.scss
1
2
3
4
5
6

$content: null;
$content: "Non-null content" !default;

#main {
  content: $content;
}
example-27.css
1
2
3

#main {
  content: "Non-null content";
}

@-Rules and Directives

import

.sass, .scss 파일을 @import해서 작업 할수 있고 .css파일에 출력이 가능 합니다.

example-28.scss
1
2

@import "foo.scss";  //  아래와 같은 의미 입니다.
@import "foo";       //  위와 같은 의미 입니다.

.scss, .sass외에도 @import 가능합니다.

example-28-01.scss
1
2
3
4

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
example-28-01.css
1
2
3
4

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

multiple import(다중 호출)

여러개의 파일을 한번에 @import할수 있습니다.

example.scss
1

@import "rounded-corners", "text-shadow";

@import interpolation #{}

interpolation is only for CSS imports. As such, it only works with url() imports.

example.scss
1
2

$family: unquote("Droid-Sans");
@import url("http://fonts.googleapis.com/css?family=\#{$family}");

Partials

colors로 @import를 하게 되면 기본적으로 .css 파일이 없는 상태에서 _color.scss파일을 @import하게 되고 이도 없으면 비슷한 color.scss파일을 import합니다.

example.scss
1

@import "colors";

Nested @import

{ }에서 @import를 하게 되면 .example을 불러 옵니다.

\_example.scss
1
2
3

.example {
  color: red;
}
example-29-01.scss
1
2
3

#main {
  @import: "example";
}
example-29-01.css
1
2
3

#main .example {
  color: red;
}

@media

상단의 .sidebar를 상속 해서 손쉽게 @media옵션과 아닌 옵션을 따로 선언 할수 있습니다.

example.scss
1
2
3
4
5
6

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}
example.css
1
2
3
4
5

.sidebar {
  width: 300px; }
  @media screen and (orientation: landscape) {
    .sidebar {
    width: 500px; } }

@media안에 @media를 합칠수 있습니다.

example.scss
1
2
3
4
5
6
7

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}
example.css
1
2
3
4

@media screen and (orientation: landscape) {
  .sidebar {
    width: 500px; } }
}

@media에 SassScript 문법인 #{}를 사용 할수있습니다.

example.scss
1
2
3
4
5
6
7
8

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px; } }
}
example.css
1
2
3
4

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {
  .sidebar {
    width: 500px; } }
}

@extend

markup.html
1
2
3

<div class="error seriousError">
  Oh no! You've been hacked!
</div>

.error, .seriousError이 개별적으로 선언 되어 있고 두개의 속성을 모두 가지기 위해서는 클래스명을 두개다 선언해 주어야 합니다.

error.css
1
2
3
4
5
6
7

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  border-width: 3px;
}

다음은 .seriousError만 선언 하여도 .error가지 같이 적용 될수 있도록 수정한 코드 입니다.

error.scss
1
2
3
4
5
6
7
8

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
markup.html
1
2
3
4

<div class="error seriousError">
  Oh no! You've been hacked!
</div>
<div class="seriousError intrusion"></div>

다른 스타일 추가

example.scss
1
2
3

.error.intrusion {
  background-image: url("/image/hacked.png");
}

사용법

error.intrusion을 정의해 주면 @extend .error에 같이 적용되어 .css안에 .seriousError또한 생성 됩니다.

example.scss
1
2
3
4
5
6
7
8
9
10
11

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
example.css
1
2
3
4
5
6
7
8
9
10

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  border-width: 3px;
}

Extending Complex Selectors

Class selectors aren’t the only things that can be extended. It’s possible to extend any selector involving only a single element, such as .special.cool, a:hover, or a.user[href=”http://”]

속성을 한곳에만 정의 하고 @extend를 사용하여 같이 사용 할수 있습니다.

example.scss
1
2
3
4
5
6

.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}
example.css
1
2
3

a:hover, .hoverlink {
  text-decoration: underline;
}

@extend a:hover을 사용 하면 선택자에 a.user:hover에서 a:hover를 제외한 문자만을 적용 합니다.

example.scss
1
2
3
4
5
6

.hoverlink {
  @extend a:hover;
}
.comment a.user:hover {
  font-weight: bold;
}
example.css
1
2
3

.comment a.user:hover, .comment .user.hoverlink {
  font-weight: bold;
}

Multiple Extends

.seriousError이 .error,.attention 두가지 속성 모두에 포함 됩니다.

example.scss
1
2
3
4
5
6
7
8
9
10
11
12
13

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}
example.css
1
2
3
4
5
6
7
8
9
10
11

.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd;
}
.attention, .seriousError {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  border-width: 3px;
}

Chanining Extends(확장 연결)

criticalError에서 @extend .seriousError함으로써 .seriousError에서 확장한 @extend error 까지 연결되서 확장 할수 있습니다.

example.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}
example.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14

.error, .seriousError, .criticalEroor {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError, .criticalError {
  border-width: 3px;
}
.criticalError {
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

Selector Sequences

&상속은 a와 #fake-links .link 모두 상속을 받습니다.

example.scss
1
2
3
4
5
6
7
8
9
10

#fake-links .link {
  @extend a;
}

a {
  color: blue;
  &:hover {
    text-decoration: underline;
  }
}
example.css
1
2
3
4
5
6

a, #fake-links .link {
  color: blue;
}
  a:hover, #fakelinks .link:hover {
    text-decoration: underline;
  }

Merging Selector Sequences

두개의 다른 시퀀스를 @extend 할때는 첫번재 시퀀스, 첫번재 + 두번째 시퀀스, 두번째 시퀀스 + 첫번째 시퀀스를 한다. 마지막 셀렉터 .fakelink는 두번재 + 첫번재 시퀀스 뒤에 오게 됩니다.(왜?)

example.scss
1
2
3
4
5
6

#admin .tabbar a {
  font-weight: bold;
}
#demo .overview .fakelink {
  @extend a;
}
example.css
1
2
3
4
5

#admin .tabbar a,
#admin .tabbar #demo .overview .fakelink,
#demo .overview #admin .tabbar .fakelink {
  font-weight: bold;
}

두개의 시퀀스에 같은 셀렉터가 있을때.

example.scss
1
2
3
4
5
6

#admin .tabbar a {
  font-weight: bold;
}
#admin .overview .fakelink {
  @extend a;
}
example.css
1
2
3
4
5

#admin tabbar a,
#admin .tabbar .overview fakelink,
#admin .overview .tabbar .fakelink {
  font-weight: bold;
}

@extend-Only Selectors

selector 이름만 확장 할수 있습니다.

example.scss
1
2
3
4
5
6
7
8

#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}
.notice {
  @extend %extreme;
}
example.css
1
2
3
4
5

#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2ex;
}

The !optional Flag

에러 발생시키는건데 왜 쓰는지 잘 모르겠습니다.

Normally when you extend a selector, it’s an error if that @extend doesn’t work. For example, if you write a.important {@extend .notice}, it’s an error if there are no selectors that contain .notice. It’s also an error if the only selector containing .notice is h1.notice, since h1 conflicts with a and so no new selector would be generated.

Sometimes, though, you want to allow an @extend not to produce any new selectors. To do so, just add the !optional flag after the selector.
example.scss
1
2
3

a.important {
  @extend .notice !optional;
}

@extend in Directives

There are some restrictions on the use of @extend within directives such as @media. Sass is unable to make CSS rules outside of the @media block apply to selectors inside it without creating a huge amount of stylesheet bloat by copying styles all over the place. This means that if you use @extend within @media (or other CSS directives), you may only extend selectors that appear within the same directive block
example.scss
1
2
3
4
5
6
7
8
9
10

@media print {
  .error {
    border: 1px #f00;
    background-color: #fdd;
  }
  .seriousError {
    @extend .error;
    border-width: 3px;
  }
}

But this is an error:

example.css
1
2
3
4
5
6
7
8
9
10
11

.error {
  border: 1px #f00;
  backgorund-color: #fdd;
}
@media print {
  .seriousError {
    // INVALID EXTEND: .error is used outside of the "@media print" directive
    @extend .error;
    border-width: 3px;
  }
}

@debug

debug.scss
1

@debug 10em + 12em;

1

Line 1 DEBUG: 22em

@warn

.css 컴파일시 조건에 해당 하면 경고문 출력

warn.scss
1
2
3
4
5
6
7
8
9
10
11

@mixin adjust-location($x, $y) {
  @if unitless($x) {
    @warn "Assuming #{$x} to be in pixels";
      $x: 1px * $x;
  }
  @if unitless($y) {
    @warn "Assuming #{$y} to be in pixels";
      $y: 1px * $y;
  }
  position: relative; left: $x; top: $y;
}

Control Directives

@if

if.scss
1
2
3
4
5

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3      { border: 2px dotted; }
  @if nul        { border: 3px double; }
}
if.css
1
2
3
4

p {
  border: 1px solid;
  border: 3px double;
}

@if @else

if-else.scss
1
2
3
4
5
6
7
8
9
10
11
12

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
if-else.css
1
2
3

p {
  color: green;
}

@for

from은 시작값 through는 최종 값입니다. $i값은 시작값 - 최종값 까지 1씩 더해 집니다.

for.scss
1
2
3

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
for.css
1
2
3
4
5
6
7
8
9

.item-1 {
  width: 2em;
}
.item-2 {
  width: 4em;
}
.item-3 {
  width: 6em;
}

@each

puma, sea-slug, egret, salamander값들을 순서대로 #{$animal}값에 보간 합니다.

each.scss
1
2
3
4
5

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
each.css
1
2
3
4
5
6
7
8
9
10
11
12

.puma-icon {
  background-image: url('/images/puma.png');
}
.sea-slug {
  background-image: url('/images/sea-slug.png');
}
.egret {
  background-image: url('/images/egret.png');
}
.salamander {
  background-image: url('/images/salamander.png');
}

@while

조건에 충족할때가지 반복 합니다.

while.scss
1
2
3
4
5

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}
while.css
1
2
3
4
5
6
7
8
9

.item-6 {
  width: 12em;
}
.item-4 {
  width: 8em;
}
.item-2 {
  width: 4em;
}

Mixin Directives

Defining a Mixin: @mixin

@mixin을 정의 합니다. @mixin 이름을 large-text로 정희 하고 large-text로 호출 할수 있습니다.

mixin.scss
1
2
3
4
5
6
7
8

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

Mixins 부모 속성 포함

mixin-parent.scss
1
2
3
4
5
6
7
8
9
10
11

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
}

Mixin 호출: @include

선언된 Mixin은 @include로 불러 올수 있습니다.

include.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}
include.css
1
2
3
4
5
6
7
8

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px;
}
mixin-02.scss
1
2
3
4
5
6
7
8

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}

@include silly-links;
mixin-02.css
1
2
3
4

a {
  color: blue;
  background-color: red;
}

Mixin 안에 Mixin @include

mixin 호출도 연계가 됩니다 compound를 호출 하면 heighlighted-background, header-text가 불립니다.

mixin-in-mixin.scss
1
2
3
4
5
6
7
8
9
10
11

@mixin compound {
  @include highlighted-background;
  @include header-text;
}

@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }

a {
  @inlucde compound;
}
mixin-in-mixin.css
1
2
3

a {
  background-color: #fc0;
  font-size: 20px }

Arguments

@mixin 호출시 인자 전달이 가능 합니다.

argument.scss
1
2
3
4
5
6
7
8
9

@mixin sexy-border($color, $witdh) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

p { @include secy-border(blue, 1in); }
argument.css
1
2
3
4
5

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed;
}

Mixin default value

기본값을 선언해줄수 있고 인자 전달이 없으면 기본 인자를 사용합니다.

mixin-default-value.scss
1
2
3
4
5
6
7
8
9

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }
mixin-default-value.css
1
2
3
4
5
6
7
8
9
10

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed;
}
h1 {
  border-color: blue;
  border-width: 2in;
  border-style: dashed;
}

Keyword Arguments

변수에 정의 하여 명시적으로 값을 전달 할수도 있습니다.

keyword.scss
1
2

p { @include sexy-border($color: blue); }
h1 { @include sexy-border($color: blue, $width: 2in); }

Varialbe Arguments

다수의 인자를 전달 받을때는 ...을 사용 해야 합니다.

variable-argument.scss
1
2
3
4
5
6
7
8

@mixin box-shadow($shadows…) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
variable-argument.css
1
2
3
4
5

.shadowed {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

Variable arguments calling a mixin

@mixin 호출시 인자 목록을 전달 할수있습니다.

call-mixin.scss
1
2
3
4
5
6
7
8
9
10

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}

$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values…);
}
call-mixin.css
1
2
3
4
5

.primary {
  color: #ff0000;
  background-color: #00ff00;
  border-color: #0000ff;
}

wrap mixin and add styles change argument

@mixin에 전달 되는 인자를 또다르 @mixin에 전달 할수 있습니다. 다음의 코드는 컴파일은 되지 않습니다. 컴파일을 하려면 @mixin stylist-mixin을 선언해 주어야 합니다.

warp-mixin.scss
1
2
3
4
5
6
7

@mixin wrapped-stylish-mixin($args…) {
    font-weight: bold;
    @include stylish-mixin($args…);
}
.stylish {
  @include wrapped-stylish-mixin(#00ff00, $width: 100px);
}

Passing Content Blocks to a Mixin

@content html에 집어 널수도 있습니다.

mixin-content.scss
1
2
3
4
5
6
7
8
9
10

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}
mixin-content.scss
1
2
3

* html #logo {
  background-image: url(/logo.gif);
}

Variable Scope and Content Blocks

변수는 {}안에서 지역적으로 사용 됩니다.

scope.scss
1
2
3
4
5
6
7
8
9

$color: white;
  @mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
.colors {
  @include colors { color: $color; }
}
scope.css
1
2
3
4
5

.colors {
  background-color: blue;
  color: white;
  border-color: blue;
}
scope-02.scss
1
2
3
4
5
6
7

#sidebar {
  $sidebar-width: 300px;
  width: $sidebar-width;
  @include smartphone {
    width: $sidebar-width / 3;
  }
}

Function Directives

function.scss
1
2
3
4
5
6
7
8

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }
function.css
1
2

#sidebar {
  width: 240px; }

Comments