Chuyển js sang css trực tuyến

Chuyển đổi CSS sang JS bằng sân chơi trực tuyến. Một sân chơi trực quan để chuyển CSS sang JS. Sao chép-dán CSS của bạn và chỉ trong vài giây, bạn có thể chuyển đổi CSS của mình sang JS. Công cụ này rất dễ sử dụng và có thể chuyển đổi mã CSS của bạn thành JS trong vài giây. Đây là sân chơi trực tuyến để convert CSS sang JS Objects. Trình chuyển đổi này là mã nguồn mở Tìm liên kết

Công cụ liên quan

Thẻ. trình biên dịchchuyển đổi CSS sang JavaScript

LESS to CSS Converter Online giúp chuyển đổi LESS đơn giản sang CSS và giúp lưu và chia sẻ LESS với CSS

LESS là ngôn ngữ tiền xử lý biểu định kiểu động giúp chuyển đổi ít mã hơn thành CSS. Để biết thêm về LESS LESS Wikipedia Page

Bạn có thể làm gì với LESS to CSS Converter?

• Công cụ này giúp bạn chuyển đổi LESS [Leaner Style Sheets] sang CSS [Cascading Style Sheets] một cách dễ dàng
• Công cụ này cho phép tải LESS URL chuyển đổi sang CSS. Nhấp vào nút URL, Nhập URL và Gửi
• Công cụ này hỗ trợ tải LESS File để chuyển đổi sang CSS. Nhấp vào nút Tải lên và chọn Tệp
• LESS to CSS Online hoạt động tốt trên Windows, MAC, Linux, Chrome, Firefox, Edge và Safari

Ví dụ về LESS sang CSS

ÍT Hãy thử nó

.combo {
	border: 1px solid red;
	color: #333333;
	.marked {
		font-weight: bold;
	}
}

CSS đã chuyển đổi

.combo {
  border: 1px solid red;
  color: #333333;
}
.combo .marked {
  font-weight: bold;
}

Dành cho người dùng nâng cao

Tải LESS URL bên ngoài trong URL trình duyệt như thế này https. // làm đẹp mã. org/less-to-css-converter?url=external-url

Trong một tiếp theo. dự án dựa trên js Tôi đang làm việc Tôi nhận thấy tệp theme.js này chứa đối tượng JavaScript chứa mã thông báo thiết kế, xác định màu sắc sẽ sử dụng và những thứ tương tự. Vì chúng tôi chỉ sử dụng các giá trị này trong CSS [thông qua Thành phần được tạo kiểu], chúng tôi quyết định di chuyển khỏi nó và thay thế nó bằng Thuộc tính tùy chỉnh CSS. Đối với điều này, tôi đã tạo ra một công cụ trợ giúp nhỏ

Nội dung của theme.js trông giống như thế này [đơn giản hóa]

const theme = {
    borderRadius: '15px',
    cardSpacing: {
        horizontal: '20px',
        vertical: '85px',
    },
    colors: {
        primaryBackground: '#FAFAF2',
        primaryButton: '#FFFFFF',
        primaryCard: '#FFFFFF',

        accent: '#2ea7a4',
        text: '#2f2f2f',
        textSecondary: '#707070',
        placeholder: '##959595',

        title: '#000',
        subTitle: 'rgba[255, 255, 244, 0.5]',
    },
};

export default theme;

Đã chuyển đổi thành Thuộc tính tùy chỉnh, tôi muốn cái này

--border-radius: 15px;
--card-spacing-horizontal: 20px;
--card-spacing-vertical: 85px;
--colors-primary-background: #FAFAF2;
--colors-primary-button: #FFFFFF;
--colors-primary-card: #FFFFFF;
--colors-accent: #2ea7a4;
--colors-text: #2f2f2f;
--colors-text-secondary: #707070;
--colors-placeholder: ##959595;
--colors-title: #000;
--colors-sub-title: rgba[255, 255, 244, 0.5];

~

Để dịch các mục như theme.colors.primaryCard sang --colors-primary-card, tôi quyết định tạo một công cụ trợ giúp nhỏ. Nó tự động thêm tiền tố -- cần thiết, điều chỉnh tất cả các lần xuất hiện của camelCase thành trường hợp kebab và hoạt động tốt với các đối tượng lồng nhau và mảng [đơn giản]

Có lẽ công cụ này cũng có thể hữu ích cho bạn 🙂

~

Điều này có giúp ích gì cho bạn không? .
Thank me with a coffee.

Tôi không làm điều này vì lợi nhuận nhưng một khoản quyên góp nhỏ một lần chắc chắn sẽ khiến tôi mỉm cười. Cảm ơn

Bạn có thể chuyển đổi JavaScript sang CSS không?

SCSS có thể được chuyển đổi thành CSS không?