Lessc command line issues

[alokpant]

Hey, I am facing a really weird problem. Lessc is somehow not working :not selector. Here is my selector:

.main-navigation {
  background-color: #069;
  overflow: hidden;
}

.nav-bar {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}

.nav-bar > li {
  align-self: center;
  list-style-type: none;

  &.main-logo {
    flex: 0 0 auto;
    width: 100%;

    @media screen and (min-width: 700px) {
      width: 50%;
    }

    @media screen and (min-width:900px) {
      width: 70%;
    }
  }
}

.nav-bar > li a {
  display: block;
  color: white;
  text-decoration: none;
  border-bottom: 3px solid #069;
}

.nav-bar > li a:not(.logo) {
  text-align: center;
  padding: 14px 18px;
}

@media all and (max-width: 700px){
  .nav-bar{
	  flex-wrap: wrap;
	  justify-content: flex-start;
  }
}

.nav-bar li a:hover:not(.logo):not(.active) {
  border-bottom: 3px solid #E7403C;
  color: #E7403C;
}

.active {
  border-bottom: 3px solid #E7403C;
}

When i run:

lessc style.less style.css

it results in:

.nav-bar {
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #069;
}
.nav-bar li {
  float: left;
  padding-top: 20px;
  right: 0;
  left: auto;
  list-style-type: none;
}
.nav-bar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 18px;
  text-decoration: none;
  border-bottom: 3px solid #069;
}
.nav-bar li a:hover:not(.active) {
  border-bottom: 3px solid #E7403C;
  color: #E7403C;
}

in terminal.

There are several things wrong in the css:

1. .main-navigation is missing
2. Style.css is empty.
3. :not selector not working as expected.

Steps taken to install Less:

1. Go to website (http://lesscss.org/#)
2. Install with:

npm install -g less

Other observations:
When file is empty, it works fine i.e. it does not compile any CSS. But as soon as I add above CSS, it repeats same thing. If I compile it at, http://lesscss.org/less-preview/ it returns correct result.

[alokpant]

I tried yet couple of days ago. Same behaviour at that time and I had to use online compiler to convert CSS and use it.

[alokpant]

Here are my configurations:

Node: 10.3.0
Npm: 6.1.0
lessc 1.7.0 (LESS Compiler) [Ruby] 2.6.0
rbenv 1.1.1
ruby 2.4.0-dev

macOS Sierra Version 10.12.6

I will try it again today and add a video too

[seven-phases-max]

This seems like you have some weird conflict between node.js-based Less compiler and some Ruby tool also named lessc (probably the one you had installed previously).
Note the lessc developed in this repository should say (lessc -v):

lessc x.x.x (Less Compiler) [JavaScript]

(w/o any Ruby there).

In general the issue is most likely in npm installer is known to not always work in MacOS as expected - I don't have any specific recommendations but you can look at SO: https://stackoverflow.com/search?q=%5Bless%5D+npm+ruby

[seven-phases-max]

(Changing labels since this is not an issue of the project - but something about "macos vs. npm vs. ruby").

[alokpant]

@seven-phases-max I will remove all compilers related to Less, and install it as per recommended in your documents. Feel free to close it now, I will reopen it if cleaning up does not solve the problem with more information.

[seven-phases-max]

Also note that if you're installing with -g option in MacOSX you also need sudo rights - i.e.
sudo npm install -g less
(references).

[matthew-dean]

Also note that if you're installing with -g option in MacOSX you also need sudo rights - i.e.
sudo npm install -g less

You shouldn't, if you've installed NPM / Node correctly (using a tool like homebrew), but that's tangential to this issue.

[alokpant]

It is fixed now. I removed Lessc and all related folders. Then reinstalled it with npm.

% which less
/usr/bin/less
% which lessc
/usr/local/bin/lessc

is it supposed to have two version of Less?

For others who may have similar problems. Here are steps I took:

% npm uninstall less
% which less
<less_path> like /usr/bin/less
% rm -rf <less_path>
% which lessc
<lessc_path> like /usr/local/bin/lessc
% rm -rf <lessc_path>
% npm install -g less

It was giving me rbenv: command not found lessc error, removing folders helped to solve it.