CSS & SCSS

CSS ควบคุมการแสดงผลของ HTML element โดยใช้ selector เลือกว่าจะจัดรูปแบบให้ element ตัวไหน

selector คืออะไร

.myclass {
    font: bold 12px Tahoma;
}

<span class="myclass"></span>

selector จับคู่กับ element ใน HTML แล้วนำ property ที่กำหนดไปใช้

3 selector หลัก

ชนิด	สัญลักษณ์	ใช้ได้กี่ครั้งในหน้า	ตัวอย่าง
Class selector	`.`	ซ้ำได้ และ 1 element ใส่ได้หลาย class	`.myclass { }`
ID selector	`#`	1 หน้า 1 id และ 1 element มีได้ 1 id	`#username { }`
Tag selector	ชื่อ tag	ทุก element ของ tag นั้น	`span { }`

<span class="myclass myclass2"></span>    /* ใส่ได้หลาย class */
<span id="username">abc</span>             /* id ห้ามซ้ำ */

*{ color: red; }                           /* universal selector — ทุก element */

child / descendant / adjacent sibling

> = child (ชั้นเดียว) · เว้นวรรค = descendant (ทุกชั้น)

.container > p { }     /* child — เฉพาะ p ที่เป็นลูกโดยตรง */
.container p   { }     /* descendant — p ทุกตัวที่อยู่ข้างใน ไม่ว่าลึกแค่ไหน */
p + span       { }     /* adjacent sibling — span ที่อยู่ติดถัดจาก p ทันที */

attribute selector

span[title]          { color: green; }   /* มี attribute title */
span[title='ทดสอบ']  { }                  /* title ตรงค่าที่ระบุ */
span[title='']       { }                  /* title เป็นค่าว่าง */

pseudo-class vs pseudo-element

	pseudo-class `:`	pseudo-element `::`
สร้าง element ใหม่ไหม	ไม่สร้าง	สร้าง (CSS3)
ใช้ทำอะไร	เลือกตามสถานะ	เลือก/เพิ่มบางส่วนของ element
ตัวอย่าง	`:link :visited :hover :not()`	`::before ::after`

a:link    { color: red; }
a:visited { color: green; }
a:hover   { color: yellow; }

*:not(p)  { color: blue; }          /* ทุกอย่างยกเว้น p */

.div_before::before { content: "B"; }
.div_after::after   { content: "D"; }

first-child และเพื่อน ๆ

ul li:first-child { }    /* li ตัวแรก */
ul li:last-child  { }
ul li:nth-child(2){ }    /* li ตัวที่ 2 */

animation & keyframes

div {
    background-color: red;
    animation-name: example;
    animation-duration: 4s;
}

@keyframes example {
    from { background-color: red; }
    to   { background-color: yellow; }
}

กำหนดหลายช่วงด้วยเปอร์เซ็นต์:

@keyframes example {
    0%   { background-color: red;    left: 0px;   top: 0px; }
    25%  { background-color: yellow; left: 200px; top: 0px; }
    50%  { background-color: blue;   left: 200px; top: 200px; }
    75%  { background-color: green;  left: 0px;   top: 200px; }
    100% { background-color: red;    left: 0px;   top: 0px; }
}

animation-timing-function	ลักษณะ
`linear`	ความเร็วคงที่ตลอด
`ease`	เริ่มช้า เร็วกลาง จบช้า (ค่าปริยาย)
`ease-in`	เริ่มช้า
`ease-out`	จบช้า
`ease-in-out`	ช้าทั้งเริ่มและจบ

shorthand property

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}
/* เท่ากับเขียนแยก 4 บรรทัด: background-color, background-image,
   background-repeat, background-position */

CSS variable

:root {
    --blue: #1e90ff;
    --white: #ffffff;
}

body   { background-color: var(--blue); }
button {
    background-color: var(--white);
    color: var(--blue);
    border: 1px solid var(--blue);
    padding: 5px;
}

ประกาศที่ :root = ใช้ได้ทั้งเอกสาร — เว็บที่คุณกำลังอ่านอยู่นี้ก็ใช้เทคนิคนี้ทำ dark mode

SASS / SCSS

SCSS เป็นภาษาที่ต้อง compile ออกมาเป็น CSS ก่อนใช้งาน เพิ่มความสามารถที่ CSS ดั้งเดิมไม่มี

1. ตัวแปร

$color-red:   #FF0000;
$color-green: #00FF00;

h1 { color: $color-red; }
p  { color: $color-green; }

2. Nesting

/* CSS ธรรมดา */          /* SCSS */
nav ul  { margin: 0; }         nav {
nav li  { display: block; }        ul { padding: 0; }
                                   li { display: block; }
                               }

3. Mixin

@mixin color($background, $text) {
    background-color: $background;
    color: $text;
}
@mixin font-size($size) {
    font-size: $size;
}

.button {
    @include color(blue, white);
    @include font-size(16px);
}

4. คำนวณ

$margin: 100% - 10px;          /* SCSS คำนวณให้ตอน compile */
.box { margin: calc(100% - 10px); }   /* CSS ปกติใช้ calc() */

CSS สมัยใหม่ได้ความสามารถบางอย่างของ SCSS มาแล้ว เช่น CSS nesting และ custom property (ตัวแปร)