Chỉnh sửa thiết kế CSS của bạn trong trình duyệt với CSS George
Bạn đã bao giờ muốn chỉnh sửa trực tiếp trong trình duyệt của bạn mà không chuyển trở lại các tệp CSS của bạn? Một giải pháp là Chrome Developer Tools nhưng một số nhà phát triển thích một quy trình làm việc đơn giản hơn.
Đó là nơi CSS George đến đây. Miễn phí công cụ chỉnh sửa trong trình duyệt công trinh trên đầu bài và nó được bắt đầu bởi một tệp JavaScript đơn giản.
Hầu hết các nhà phát triển thích một trình soạn thảo dựa trên trình duyệt vì không phải ai cũng sử dụng bộ biên dịch LESS. Nhưng CSS George không chạy trên môi trường LESS có thể được cài đặt nhanh chóng qua npm.
Nếu bạn đã cài đặt npm thì bạn có thể chạy mã đơn giản này để thêm các tập tin nguồn cho dự án hiện tại của bạn:
cài đặt npm --save-dev css-george
Hoặc bạn có thể kéo George.js tập tin từ GitHub nơi nó được lưu trữ cùng với tất cả các tệp nguồn khác. Toàn bộ dự án là miễn phí và nguồn mở để bạn có thể tải về một bản sao đầy đủ từ GitHub nếu bạn không muốn sử dụng npm.
Với .js tập tin được thêm vào tiêu đề trang web của bạn, bạn có thể bắt đầu thực thi các chức năng của George ngay từ trình duyệt. Đến mở cửa sổ soạn thảo, nhấp vào phím dấu ngã có thể truy cập từ Shift + 'nằm ở góc trên cùng bên trái của hầu hết các bàn phím. Một cửa sổ mới sẽ xuất hiện trông giống như thế này:
Từ màn hình này, bạn có thể chỉnh sửa các biến LESS được sử dụng cho tất cả mọi thứ, từ màu sắc đến kích thước phông chữ hoặc họ phông chữ.
Đây là nơi plugin LESS trở thành một điều cần thiết bởi vì bạn phải nói với CSS George bao gồm các biến. Khi chúng được thiết lập, bạn có thể chỉ cần mở trình soạn thảo trình duyệt CSS George và đi đến thị trấn.
Tôi hy vọng rõ ràng là công cụ này không nên được bao gồm trong thời gian chạy. Trừ khi bạn đặc biệt muốn cho phép khách truy cập chỉnh sửa màu sắc và kiểu trang, mà nói chung không phải là một ý tưởng tốt. Nhưng cho thử nghiệm địa phương, CSS George là một công cụ hiếm hoi cung cấp tiện ích cho tất cả các nhà phát triển lối vào.
Bạn có thể xem nó sống trên trang demo CSS George, hoặc tải về một bản sao đầy đủ thông qua npm hoặc từ repo GitHub.
