https://github.com/nomadicgopher/less_to_css_ui

A web page that interprets LESS to minified CSS. Includes Save-As & Copy-to-Clipboard features. Easily run in VS Code (via Microsoft's Live Preview extension) or with any web browser.
https://github.com/nomadicgopher/less_to_css_ui

css interpreter less single-page-app vscode

Last synced: 12 months ago
JSON representation

A web page that interprets LESS to minified CSS. Includes Save-As & Copy-to-Clipboard features. Easily run in VS Code (via Microsoft's Live Preview extension) or with any web browser.

• Host: GitHub
• URL: https://github.com/nomadicgopher/less_to_css_ui
• Owner: nomadicGopher
• License: agpl-3.0
• Created: 2024-12-11T02:06:40.000Z (about 1 year ago)
• Default Branch: main
• Last Pushed: 2025-03-05T04:44:41.000Z (12 months ago)
• Last Synced: 2025-03-07T11:21:07.135Z (12 months ago)
• Topics: css, interpreter, less, single-page-app, vscode
• Language: JavaScript
• Homepage:
• Size: 330 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

          


  



## Instrucions with VS Code

* Clone this repo or download the index.html file

* Install and activate the live preview extension by Microsoft

* Add .less code in styles.less (in the same directory as index.html) & save

* Right click on the index.html file and select live preview

## Instructions without VS Code

* Clone this repo or download the index.html file

* Add .less code in styles.less (in the same directory as index.html) & save

* Start an HTTP server from the current directory. You can simply use `python -m http.server`

* Open `localhost:8080` in a web browser

## Sample LESS content

```less

// Variables

@primary-color: #4CAF50;

@font-size: 16px;

// Mixins

.border-radius(@radius) {

  -webkit-border-radius: @radius;

     -moz-border-radius: @radius;

      -ms-border-radius: @radius;

          border-radius: @radius;

}

// Styles

body {

  font-size: @font-size;

  color: @primary-color;

}

.button {

  .border-radius(5px);

  background-color: @primary-color;

  color: white;

  padding: 10px 20px;

  border: none;

  cursor: pointer;

  &:hover {

    background-color: darken(@primary-color, 10%);

  }

}

```