npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

less-plugin-sass2less-fork

v0.0.5

Published

A plugin for less that converts SASS files into LESS. It comes with a cmd utility too.Support for more ScssToLess syntax.

Downloads

4

Readme

The Reason of Fork less-plugin-sass2less

  • for error;
  • mixin includes error;

修改 less-plugin-sass2less 原因

  • scss2less for 函数编译 less 失败, 并且 for 函数是 unique
  • mixin includes 编译 less 失败 ,没有执行 include 引入

Usage

npm i less-plugin-sass2less-fork

original guide

less-plugin-sass2less-fork

Build Status Node version Coverage Status

Want to use a UI library written in SASS, re-use it's mixins and variables but your entire source code is written in LESS? Sass2Less to the rescue! You can either use the sass2less command line utility included in this package or use it as a less-plugin and import .scss files into .less on-the-fly!

Get it

npm install less-plugin-sass2less-fork --save-dev

Usage as a less-plugin

Import any .scss file into your existing LESS project like so:

// main.less
@import (reference) "./node_modules/material-design-lite/src/material-design-lite.scss";

body {
  color: @text-color-primary; // you can now use imported SASS variables as LESS variables
}

.my-button {
  .typo-display-4; // or use mixins from the imported SASS file
}

Then simply specify it as a plugin to your less compiler:

Shell

lessc --sass2less main.less build.css

node.js

let less = require('less')
let sass2less = require('less-plugin-sass2less-fork')
let fs = require('fs')
let file

// get a file
fs.readFile('main.less', 'utf-8', function(err, contents) {
  if(err) return console.log(err)
  file = contents

  less.render(file, {
    plugins: [sass2less]
  }).then(function(output) {
    console.log(output.css)
  }, function (error) {
    console.log(error)
  })
})

@functions

If your sass files contains @function definitions and you want to use them, install less-plugin-functions:

// install additional dependency:
npm install less-plugin-functions --save-dev

// use it as a less-plugin:
lessc --sass2less --functions main.less build.css

Convert SASS files to LESS

To convert all your .scss files at once into .less files, use the command line utility.

sass2less [source] destination-pattern

It supports globs, so you can do:

sass2less path/to/*.scss 'dist/{name}.less'
sass2less path/to/{filea,fileb,filec}.scss 'dist/{name}.less'
sass2less **/*.scss 'dist/{dir}/{name}.less'
sass2less **/*.{scss,sass} 'dist/{dir}/{name}.less'

Available destination-pattern keys includes all the keys returned by path.parse(filename) (ie: root, dir, name, base, ext).

Supported conversions

  • @for
  • @extend
  • @function becomes .function();
  • @if, and @else
  • @import
  • @include
  • @mixin becomes .mixin();
  • adjust-hue()
  • calc()
  • !default
  • !important (for mixins)
  • #{$foo}
  • nth()
  • rgba()
  • unquote()
  • $

There are certain things that work in both compilers and do not need explicit conversion, such as lists.

Known issues

  • @elseif clauses Not supported
  • !default attributes Variables with the same name will not be ignored like in SASS. The most recent takes precedence over the previous one.
  • @import statements Importing a file as @import "file.scss" whereas the physical file is actually named _file.scss is supported, but it comes at a cost. LESS errors in those files will simply result in the file not being compiled.