Sass: Syntactically Awesome Style Sheets
.sass
κΈ°μ λ°©μλ€μ¬μ°κΈ°
λ‘ κ΅¬λΆ;
μ μ¬μ©νμ§ μμ$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
.scss
κΈ°μ λ°©μ{}
λ‘ κ΅¬λΆ$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Sassμ SCSSμ μ°¨μ΄μ
Sassμ 3λ²μ μμ μλ‘κ² λ±μ₯ν SCSSλ CSS ꡬ문과 μμ ν νΈνλλλ‘ μλ‘μ΄ κ΅¬λ¬Έμ λμ ν΄ λ§λ Sassμ λͺ¨λ κΈ°λ₯μ μ§μνλ CSSμ μμμ§ν©.
μ¦, SCSSλ CSSμ κ±°μ κ°μ λ¬Έλ²μΌλ‘ SassκΈ°λ₯μ μ§μνλ€
Sass(SCSS)λ μΉμμ μ§μ λμν μ μκ³ , μΉμ κΈ°λ³Έμ μΌλ‘ css νμΌλ‘λ§ λμνκΈ° λλ¬Έμ μ΄ νμΌλ€μ λ³λλ‘ μ»΄νμΌ νλ κ³Όμ μ κ±°μ³ CSS νμΌλ‘ λ³ννμ¬ μ¬μ©
=> λ€μν λ°©λ²μΌλ‘ μ»΄νμΌ κ°λ₯
Live Sass Compiler
Extensionμ μ¬μ©Ctrl
+ ` ) μ΄κΈ°npm -v
: npm λ²μ μ΄ μΆλ ₯λλ©΄ μ€μΉλμ΄ μμμ μλ―Έnpm init -y
: -y
λ₯Ό μ¨μ μ§λ¬Έμμ΄ κΈ°λ³Έ μΈν
μ§ν (μ£Όμ! ν΄λλͺ
μ΄ νκΈμΈ κ²½μ° μλ¬κ° λ°μν μ μλ€)package.json
νμΌμ΄ μμ±λ¨npm i node-sass
: node-sass μ€μΉnode_modules
, package-lock.json
νμΌμ΄ μμ±λ¨.gitignore
νμΌ μμ μμ±νμ¬ commit
μ μ μΈ μν€κΈ°)package.json
μμ "scripts" λΆλΆμ μ»΄νμΌ ν νμΌκ³Ό μ»΄νμΌ λ νμΌλͺ
μμ±input.scss
κ° λ°μνκ³ ν΄λΉ νμΌμ΄ output.css
λ‘ μ»΄νμΌ λλ€.npm run sass
: SassνμΌμ CSSνμΌλ‘ μ»΄νμΌ μ€ν-options
μ¬μ©-w
, -r
μ μΆκ°-w, --watch
// Wahch a directory or file
-r, -recursive
// Recursively watch directories or files
-w
: μ΅μ
μ΄ μμ λ Sass νμΌμ μμ ν λλ§λ€ μ»΄νμΌλ¬λ₯Ό μ€νμμΌμΌνλ€. -w
μ΅μ
μ μΆκ°νλ©΄ Sassκ° κΊΌμ§μ§ μκ³ μ§μμ μΌλ‘ Sass νμΌμ λ³κ²½μ¬νμ κ°μνλ©΄μ μ μ₯ν λλ§λ€ μλμΌλ‘ μ»΄νμΌμ ν΄μ€λ€.-r
: -w
μ λΉμ·νλ -w
λ§ μΆκ°νμ κ²½μ°, λ©μΈ νμΌλ§ κ°μνκ³ κ·Έ μΈμ νμΌλ€μ κ°μνμ§ μλλ€. -r
μ μΆκ°ν κ²½μ°, λ©μΈ νμΌμ importν λ€λ₯Έ νμΌλ ν¨κ» κ°μνλ€.μ°Έκ³ λ§ν¬
νλ‘μ νΈλ₯Ό μ§νν λ νμΌμ λΆλ¦¬νμ¬ μ½λ κ΄λ¦¬
_header.scss
, _home.scss
) CSSλ₯Ό λΆλ¦¬_variable.scss
, _mixin.scss
λΆλ¦¬style.scss
μ λΆλ¦¬νλ νμΌλ€μ @import
_
)μ μλ―Έ : Scss νμΌ μ΄λ¦ μμ μΈλλ°(_
)λ₯Ό λΆμΈλ€λ©΄, Sassμκ² μ΄ νμΌμ΄ λ©μΈ νμΌμ μΌλΆμμ μλ €μ€μ ν΄λΉ νμΌμ CSSνμΌλ‘ μ»΄νμΌ νμ§ μκ³ λ΄λΆμμ @import
ννλ‘ μλ@import
ν λ, νμ₯λͺ
μ μ μΈνκ³ νμΌλͺ
λ§ μ¬μ© κ°λ₯@import
ν λλ νμΌμ URLμ μμ±ν΄μΌνλ€./* μ¬λ¬μ€ μ£ΌμμΈ μ΄λ κ² μμ±ν©λλ€ */
// ν μ€ μ£Όμμ μ΄λ κ² μμ±ν©λλ€.
// ν μ€ μ£Όμμ CSSλ‘ μ»΄νμΌ λλ©΄ 보μ΄μ§ μμ΅λλ€.
<nav>
<!--navμμ ul μ€μ²©-->
<ul>
<!--ulμμ μΈ κ°μ liκ° μ€μ²©-->
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
</ul>
</nav>
// Scss
// Scssμμλ HTMLμ²λΌ κ³μΈ΅κ΅¬μ‘°λ‘ μ€νμΌμ μ μ©ν μ μλ€.
// μ€μ²©μΌλ‘ λΆλͺ¨ μ νμλ₯Ό ν λ² μ¬μ©
nav {
background : #C39BD3;
padding : 10px;
height: 50px;
ul {
display: flex;
list-style : none;
justify-content: flex-end;
li {
color: white;
margin-right: 10px;
}
}
}
/* CSS */
/* μμ Sass μ½λμ λμΌ */
nav {
background : #C39BD3;
padding : 10px;
height: 50px;
}
nav ul {
display: flex;
list-style : none;
justify-content: flex-end;
}
nav ul li {
color: white;
margin-right: 10px;
}
:
)μ μ¬μ©// Scss
.bg-nesting {
background : {
image: url("../img/bg-main.png");
position: center center;
repeat: no-repeat;
size: auto 450px;
}
}
/* CSS */
.bg-nesting {
background-image: url("../img/bg-main.png");
background-position: center center;
background-repeat: no-repeat;
background-size: auto 450px;
}
&
)&
ν€μλλ μμμ μλ λΆλͺ¨ μ νμλ₯Ό κ°λ¦¬ν΄&
ν€μλλ₯Ό μ΄μ©ν΄ κ°μ μμ, κ°μν΄λμ€ μ°Έμ‘°// Scss
.box {
// κ°μ ν΄λμ€
&:focus{};
&:hover{};
&:active{};
&:first-child{};
&:nth-child(2){};
// κ°μ μμ
&::after{};
&::before{};
}
// Scss μμ
ul {
li {
&:hover {
background: #fff;
color: #333;
}
&:last-child {
margin-bottom: 20px;
}
}
}
/* CSS */
ul li:hover {
background: #fff;
color: #333;
}
ul li:last-child {
margin-bottom: 20px;
}
// Sass
.box {
&-yellow{
background-color: yellow;
}
&-red{
background-color: red;
}
&-green{
background-color: green;
}
}
/* CSS */
.box-yellow {
background-color: yellow;
}
.box-red {
background-color: red;
}
.box-green {
background-color: green;
}
@at-root
@at-root
ν€μλλ₯Ό μ¬μ©νλ©΄ μ€μ²©μμ λ²μ΄λ μ μλ€.@at-root
λ₯Ό μμ±// Scss
.article {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
.article-content {
font-size: 14px;
opacity: 0.7;
@at-root i {
opacity: 0.5;
}
}
}
/* CSS */
.article {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
}
.article .article-content {
font-size: 14px;
opacity: 0.7;
}
/* μ€μ²©μ λΉ μ Έλμ΄! */
i {
opacity: 0.5;
}
$
κΈ°νΈλ₯Ό μ¬μ©νμ¬ μ€νμΌμ μ μ©ν κ°μ μ μ₯// $λ³μλͺ
: κ°
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Numbers
: λ¨μλ₯Ό ν¬ν¨νκ±°λ ν¬ν¨νμ§ μμ μ μλ€.Strings
: λ°μ΄νλ₯Ό ν¬ν¨νκ±°λ ν¬ν¨νμ§ μμ μ μλ€.Colors
: μΌλ°μ μΈ red, green κ³Ό κ°μ μμμ΄λ #f0f0f0 λ±μ Hex ννμΌλ‘λ μμ±ν μ μλ€.Lists
: μΌνλ 곡백μΌλ‘ List λ₯Ό ꡬλΆνμ¬ μμ±νλ€.Boolean
: true, falseNull
: μλ°μ€ν¬λ¦½νΈμ nullκ³Ό λ§μ°¬κ°μ§λ‘ μ무κ²λ μλ κ°μ λνλΈλ€.Maps
: κ°μ²΄μ μ μ¬νκ² keyκ°κ³Ό value κ°μ μμ±νλ€.Function
: Sassμμ μ 곡νλ λ΄μ₯ν¨μμ μμλ‘ μμ±ν μ μλ ν¨μκ° μλ€. (@function)Lists
lists
μμμ κ΅¬λΆ : μΌν(,
), 곡백(
), μ¬λμ(/
)λ‘ μΌκ΄μ± μκ² κ΅¬λΆlists
λ‘ μΈμlists
λλ lists
μ κ°μ΄ νλμΈ κ²½μ°, []
λ ()
λ₯Ό μ¬μ©lists
μ μΈλ±μ€λ 1
λΆν° μμ0
λΆν° μμνμ§ μμ)$sizes: 40px, 50px, 80px;
$valid-sides: top, bottom, left, right;
lists
κ΄λ ¨ λ΄μ₯ ν¨μappend($list, $value)
: lists
μ κ°μ μΆκ°index($list, $value)
: lists
μ κ°μ λν μΈλ±μ€ 리ν΄nth($list, n)
: lists
μ μΈλ±μ€μ ν΄λΉνλ κ°μ 리ν΄// append
@debug append(10px 12px 16px, 25px); // 10px 12px 16px 25px
@debug append([col1-line1], col1-line2); // [col1-line1, col1-line2]
// index
@debug list.index(1px solid red, 1px); // 1
@debug list.index(1px solid red, solid); // 2
@debug list.index(1px solid red, dashed); // null
// nth
$valid-sides: left, center, right;
.screen-box {
text-align : nth($valid-sides, 1); // left
}
Maps
()
μμ ν€: κ°
μ νλλ‘ μ μ₯νμ¬ μ¬μ©Maps
λ‘ λ§λ€μ΄μ μ¬μ©ν μ μλ€.Maps
κ΄λ ¨ λ΄μ₯ ν¨μget($map, $key)
: ν€μ ν΄λΉνλ κ°μ 리ν΄$font-weights: ("regular": 400, "medium": 500, "bold": 700);
@debug map.get($font-weights, "medium"); // 500
@debug map.get($font-weights, "extra-bold"); // null
{}
μμμ μ¬μ©{}
μμλ μ¬μ© κ°λ₯$global-variable: global value;
.content {
$local-variable: local value;
global: $global-variable;
local: $local-variable;
}
.sidebar {
global: $global-variable;
local: $local-variable; // This would fail, because $local-variable isn't in scope.
}
!global
: μ§μλ³μλ₯Ό μ μλ²μμ ν λΉνμ¬ μ μλ³μλ‘ μ¬μ© κ°λ₯// scss
$variable: first global value;
.content {
$variable: second global value !global;
value: $variable;
}
.sidebar {
value: $variable;
}
/* css */
.content {
value: second global value;
}
.sidebar {
value: second global value;
}