ใช้ Sass ใน Angular

โดยปกติโปรเจคที่สร้างขึ้นด้วย angular cli มันจะใช้ css เป็น default format สำหรับการกำหนด stylesheet ของโปรเจค ซึ่งถ้าเราอยากจะใช้เป็นอย่างอื่น เราก็สามารถกำหนดได้ตั้งแต่ตอนสั่ง ng new ว่าจะเอาตัวไหน จนกระทั่ง angular 7 ออกมา ตัว cli จะถามว่าเราอยากได้ format ไหนสำหรับทำ stylesheet และเราก็สามารถเลือกได้เลยว่าจะใช้ตัวไหนระหว่าง CSS, SASS, SCSS, LESS, Stylus

เลือก stylesheet format ตั้งแต่ตอนสร้าง project

อย่างที่บอกไว้ข้างต้น ว่าจริง ๆ เราสามารถกำหนด format ที่จะใช้ตั้งแต่ตอนสั่ง ng new เลยว่าจะใช้ตัวไหน โดยการใส่ option --style=<format> ลงไป โดย format จะหมายถึงนามสกุลของ stylesheet format ที่ต้องการ (css, sass, scss, less, styl) เราก็ใช้เป็น sass

angular 7

ใน angular 7 ตอนสั่ง ng new ถ้าเราไม่ได้ระบุ stylesheet format ตั้งแต่ต้นด้วย option --style มันจะ prompt ถามว่าเราจะเลือก format ไหน เราก็แค่เลือก format ที่เป็น SASS เท่านั้นเลย ง่าย ๆ

แก้ project เดิมให้ใช้ sass

ทีนี้ถ้าเรามีโปรเจคเดิมที่เป็น css อยู่แล้ว แล้วอยากเปลี่ยนมาใช้ sass จะทำไงดี

สำหรับ angular ก่อน 6

ก่อนอื่นเราต้องบอก angular ว่าต่อไปนี้นะ เราจะใช้ทุกอย่างเป็น sass แล้ว ด้วยคำสั่ง ng set defaults.styleExt sass คำสั่งนี้จะไปเพิ่มสิ่งนี้ลงไปด้านล่างสุดของไฟล์ .angular-cli.json

   "defaults": {
      "styleExt": "sass",
      "component": {
      }
   }

สำหรับ angular 6 ขึ้นไป

เราเข้าไปแก้ไฟล์ angular.json โดยการเพิ่มสิ่งนี้ลงไปใน schematics ใต้โปรเจคของเราได้เลย

   "schematics": {
     "@schematics/angular:component": {
       "styleext": "sass"
     }
   },

หลังจาก angular รู้แล้วว่าจะต้องใช้ sass ที่เหลือก็ไปตามแก้ css ไฟล์ ให้เป็น sass ไฟล์ด้วยวิธี manual ทีละไฟล์

component ของเดิม

ไฟล์ app.component.css

h1 {
    color: #ff0000;
}

ไฟล์ app.component.html

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    title = 'ng-sass';
}

component ของที่แก้แล้ว

ไฟล์ app.component.sass

$title-color: #ff0000

h1
    color: $title-color

ไฟล์ app.component.html

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.sass']
})
export class AppComponent {
    title = 'ng-sass';
}

global configuration ของเดิม

angular.json

    "styles": [
        "src/styles.css"
    ],

styles.css

body {
    background-color: #00ffff;
}

global configuration ของที่แก้แล้ว

angular.json

    "styles": [
        "src/styles.sass"
    ],

**styles.sass*

$background-color: #00ffff

body
    background-color: $background-color

แล้วไงต่อ

พอเราเปลี่ยนมาใช้ sass แล้ว เราก็สามารถใช้ feature ต่าง ๆ ของ sass ได้ทั้งหมด ไม่ว่าจะเป็น sass import, mixins หรืออื่น ๆ ตามที่ sass มีให้

สะดวกขึ้นเยอะ

อ้างอิง

Leave a Reply

Your email address will not be published. Required fields are marked *