Blog

Kết hợp giữa WordPress và Sass trong việc tổ chức code phục vụ cho thiết kế chủ đề trong thiết kế web trong tất cả các lĩnh vực như thiết kế web bất động sản, thiết kế web bán hàng… là vấn đề rất nhiều web designer quan tâm. Trong bài viết này thiết kế web giá rẻ OTVINA sẽ cùng các bạn tìm hiểu về vấn đề này.

Như chúng ta đã biết, một nhà thiết kế hay phát triển web tốt sẽ có những cách thông minh để tối thiểu hóa những công việc có tính lặp lại, điều này thể hiện qua các dòng code và các sử dụng các công cụ hỗ trợ, việc chuyển từ CSS sang Sass cũng vậy.

Thiết kế theme wordpress bằng sass thay vì css

Sass luôn phát huy thế mạnh của mình trong thiết kế web WordPress.

Ví dụ: Với CSS, muốn sửa đổi chúng ta phải thực hiện lệnh find and replace trên tệp có đuôi .css để định nghĩa lại một thuộc tính nào đó. Còn với Sass, sự khác biệt của Sass là được sử dụng các biến, thay vì find and replace thì chỉ cần thay đổi các định nghĩa biến.

Tính năng của Sass:

Sass cho phép chúng ta viết các chức năng để tạo ra các đoạn mã lặp đi lặp lại.

Ví dụ: Khi thiết kế một Button chỉ cần sử dụng một hàm có đầy đủ màu sắc (color), phong cách (style) dưới dạng tham số và có thể tạo ra các định nghĩa CSS chuẩn: Border Radius, Gradient, Color, Text… Có thể không cần sử dụng CSS vào tổ chức các module, trong mô hình CMS, plugin và web application đều sử dụng các folder và partials để bảo trì, Sass cho phép thực hiện điều tương tự.

Các kỹ thuật sử dụng cú pháp SCSS.

Đầu tiên, converting theme stylesheets.

Nếu theme WordPress đang sử dụng có sẵn file Sass, thì việc converting sẽ dễ dàng thực hiện. Bắt đầu sẽ là các Underscores tự động (undercores.me), khi tạo ra một theme của website, sẽ có một cú pháp ‘_sassify!’ để bạn lựa chọn, hãy chọn Advance Options để tải về các thư viện Sass mặc định.

Nếu theme WordPress đang xây dựng hoặc chỉnh sửa không có sẵn file Sass, điều đầu tiên cần làm là chuyển đổi từ file CSS sang file Sass. Lợi thế của việc chuyển đổi chính là các IDE đọc được Sass cũng đọc được CSS, bạn chỉ cần đổi đuôi mở rộng từ file style.css thành file style.scss.

Thứ hai là thiết lập các phần của Sass ( partials Sass).

Như đã nêu trên, Sass sẽ rút gọn quá trình làm việc của các nhà thiết kế web chuyên nghiệp bằng cách thu gọn các dòng css lại tạo nên một module được gọi là partials. Sau khi thực hiện chuyển đổi file css sang file scss bạn hãy bắt đầu việc sử dụng các biến và viết các hàm (functions).

Bạn hoàn toàn có thể đặt các file css vào một nhóm để phục vụ cho một công việc riêng nào đó, hoặc một số module code độc lập để điều hướng riêng cho một số phần tử đặc biệt nào đó như topographic, widget, sidebar, footer … Hãy copy và paste từng phần của module này vào một file Sass riêng, chú ý là file Sass luôn bắt đầu bằng dấu gạch dưới giúp IDE có thể nhận ra một tập tin CSS độc đáo dựa trên tập tin Sass.

Một IDE có một thư mục riêng của Sass sẽ có chức năng tự động tạo ra style.css dựa trên style.scss nhưng sẽ không tạo ra navigation.css dựa trên _navigation.scss. Để biên dịch tất cả các phần tử css (partials) vừa tạo ra chúng ta cần sử dụng lệnh @import trong tập tin Sass.

Muốn sao chép một code block vào một partial, thay thế trong tệp .css thì sử dụng cú pháp @import’name partial’, ví dụ nếu muốn sao chép _footer.scss,  thì thực hiện như sau: @import ‘footer’; không cần sử dụng _ và .css trong cú pháp, chỉ cần tên tập tin.

Nếu sao chép các tệp có đường dẫn hãy làm như sau:

Ví dụ: 

@import 'navigation/header-nav'; // imports /navigation/_header-nav.scss
@import 'navigation/footer-nav'; // imports /navigation/_footer-nav.scss

Chú ý:  Bản chất của việc sử dụng này chính là sử dụng css thông qua scss bằng cách ghi đè.

Thứ ba là WordPress Comments – Lời chú thích.

Các nhà thiết kế website công ty đều hiểu WordPress style.css yêu cầu rằng bảo tồn các comments WordPress ở đầy file style.css. Ta sử dụng đoạn code sau:

/*!
Theme Name: Sassy WordPress Theme
Theme URI: http://jamessteinbach.com/sass/
Author: James Steinbach
Author URI: http://jamessteinbach.com
Description: From CSS to Sass Sample Theme Code
*/
// Import all your .scss partials below

 Thứ tư, cấu trúc lại CSS thành Sass.

Để các CSS ban đầu tương thích với các mã Sass, bạn cần phải sử dụng đến các variables, nesting, functions và mixins.

  • Thay đổi một số màu sắc, hãy tạo ra một tệp tin _varialbles.scss với các đoạn mã sau.
$red: #FF4136;
$blue: #0074D9;
$blue-dark: #001F3F;
$orange: #FF851B
$type-small: 12px;
$type-medium: 16px;
$type-large: 21px;
$type-hero: 44px;

Hãy thay thế các giá trị trong thuộc tính ban đầu của css bằng các biến.

body {
    color: $blue-dark;
}
.page-title {
    font-size: $type-large;
}

Có thể sử dụng tính năng ‘nesting’ của Sass để giúp các selectors dễ đọc hơn, có hai cách sử dụng là đơn và lồng nhau.

.sidebar h1 {
  //styles
}
.sidebar p {
  //styles
}
.sidebar ul {
  //styles
}

 

.sidebar {
  h1 {
    //styles
  }
  p {
    //styles
  }
  ul {
    //styles
  }
}

(Còn tiếp….)

Trên đây là một số sơ lược về Sass trong việc thiết kế giao diện web, mời các bạn đón đọc phần sau với các ví dụ cụ thể hơn.

Cảm ơn và trân trọng!