Skip to content

A single file web app that interprets LESS to minified CSS. Includes Save-As & Copy-to-Clipboard features. Easily run in VS Code with Live Preview extension by Microsoft.

License

Notifications You must be signed in to change notification settings

nomadicGopher/less2cssUI

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

less2cssUI

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

// 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%);
  }
}

About

A single file web app that interprets LESS to minified CSS. Includes Save-As & Copy-to-Clipboard features. Easily run in VS Code with Live Preview extension by Microsoft.

Topics

Resources

License

Stars

Watchers

Forks

Sponsor this project

 

Languages