Numerous Panicky Mimes

    less-plugin-sass2less-fork

    0.0.5 • Public • Published

    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.

    Install

    npm i less-plugin-sass2less-fork

    DownloadsWeekly Downloads

    0

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    26.4 kB

    Total Files

    64

    Last publish

    Collaborators

    • wanglei05151208