Issue with decreasing the opacity in Sublime Text 2

I encountered an issue while compiling my less file with ST2. I have configured the following plugins:

LESS
LESS build
SublimeOnSaveBuild
less2css

The code I am attempting to compile is as follows:

.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}

However, I encountered this error:

Expected ')' but found ' ' on line 8 in file '......\public\css\prueba.less':
  [7]:   }
  [8]:   .generate-columns(@n, (@i + 1));
       ----------------------------^
  [9]: }
[Done - Failed]
[Finished in 0.2s with exit code -5]

You can find the original example from Less official website here:

If anyone could provide assistance, it would be greatly appreciated. Could this be a bug with the plugin?

Thank you very much, kind regards.

Answer №1

Thanks to the helpful advice from seven-phases-max, I was able to identify that the issue I was experiencing was due to using an outdated version of a plugin. Thankfully, after updating my plugins, everything is now functioning correctly.

LESS
Less2Css

I also enabled automatic building. In case you encounter the error "error: less2css error: [WinError 2]" when saving, you can resolve it by installing node.js and running the command "npm install less -g" in the terminal. If you prefer not to install node.js, an alternative is to download LESS.js for Windows (https://github.com/duncansmart/less.js-windows) and adding it to the system path.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Centering an item using Bootstrap

I am using bootstrap in reactjs and attempting to center a text in the middle of the screen, but it seems to not be working. Can someone please point out what I am doing wrong? <div className="h-100 d-flex align-self-center justify-content-center&q ...

Is there a way to position the menu above the button?

I need some help with my menu. Currently, it is showing up below the button and within my footer instead of above the content like I want it to. If anyone can assist me in understanding what I am doing wrong, I would greatly appreciate it. Thank you for ta ...

"Creating a fixed header with jQuery by manipulating the offset and scrollTop

My goal is to create a smooth scrolling website that scrolls vertically using jQuery. I found a helpful tutorial called Smooth Scrolling Website and have been following it closely to build my site. However, I'm facing an issue with a fixed header - t ...

Tips for achieving a slanted div design

Is there a way to create a slanted div similar to the red div shown on this website? Below is the CSS I have attempted: #parallelogram { width: 150px; height: 100px; -webkit-transform: skew(20deg); -moz-transform: skew(20deg); ...

Compiling 'react-scripts' to include a few images as data URIs within the CSS file

I have recently inherited a sizable React project, even though my experience with React is limited. Nonetheless, I am attempting to make improvements in areas where I feel confident. An ongoing issue we are facing is the excessive size of our main CSS fil ...

The error detected in the W3Schools validator pertains to CSS for audio elements that do not contain

Could somebody kindly explain why this code is being flagged as an error on w3schools? audio:not([controls]) { display: none; height: 0; } ...

Issue with JavaScript function loading website homepage solely is functioning only for the first time

I am in the process of creating my own personal website. To ensure seamless navigation, I added a "home" button that, when clicked, triggers a JavaScript function called loadhomepage() to load the homepage. While this function works perfectly upon initial ...

What is the solution for addressing the size problem of the image within the modal?

img1 img2 Upon clicking on the modal, it displays the image similar to a lightbox, but the issue arises when the image becomes scrollable and does not fit the screen properly. Take a look at the code below: HTML <div class='row'> ...

I'm having trouble setting my CSS focus outline without using !important, which is not recommended. How can I troubleshoot this issue?

I understand the importance of having an outline, so why does the following code not work as expected? *:focus { outline: none; } Even though there are no other CSS rules defining the outline, adding !important makes it work perfectly. However, using ...

Is there a way to use a media query on a div element to check for the presence of a scroll bar?

A div has been styled with overflow-y: auto, triggering the appearance of a vertical scroll bar when the content exceeds the height of the div. This causes the content to shift horizontally to accommodate the scroll bar, resulting in misalignment with the ...

Tips for spinning the background of a button without rotating the button itself

I'm encountering an issue while trying to rotate the background-image within my button. Instead of showing the specified background image, only the background color is visible. The photo includes a transparent section to achieve an arch-like appearanc ...

Issue "Invalid UTF-8" encountered while compiling sass using @import

Here is the structure of my project: project assets scripts styles app.scss bower_components node_modules public css app.css js bower.json gulpfile.js package.json I am using gulp-sass to compile app.scss into ap ...

Adjusting Column Order in Bootstrap 4 for Mobile Screens

I have a unique challenge regarding changing the order of columns in Bootstrap for mobile devices. While I have come across many Stack Overflow questions on this topic, none seem to address changing the order of columns that are on different rows. <d ...

How can the style of a div's :after pseudo-element be modified when hovering over its :before pseudo-element?

Here is some CSS code: .myDiv:before{ content:''; width:15px; height:15px; display:block; } .myDiv:after{ ... ... display:none; } And here is the corresponding HTML code: <div class='myDiv'></div> ...

How can I fix the issue with Parallax scrolling not functioning properly? (Using Next.js Image + Tailwind)

What am I missing to get parallax scrolling to work? <div className="h-screen"> <div className="relative h-full w-full bg-cover bg-fixed bg-center bg-no-repeat"> <Image src="https://images.unsplash.com/photo-1454496522488-7a8e488e86 ...

Purchase Masonry Supplies for Optimal Arrangement

I've been using a neat little tool called jquery-isotope to create a masonry style layout for the blog posts on my website. It's set up with two columns, showcasing two different post types - long form articles and image-only posts. The masonry ...

The two divs are positioned on top of one another, with the link in the bottom div being unclickable

I am trying to create a unique effect where a tile divides into two on hover, with each tile acting as an individual link. Additionally, I want the background color of the tiles to change on hover. To achieve this, I have stacked two divs (toptile and bot ...

My div is set to a specific width, but the content continues to overflow beyond its boundaries

Having trouble with my HTML code here - I can't seem to get my div to adjust its height automatically when the content exceeds the width. When I set the width to 70px, the content still overflows. Any suggestions? Here's my code. Thanks in advan ...

Control the line height in DataTables

Is there a way to adjust the line height for a tr using either DataTables settings or CSS? I've attempted different methods, but nothing seems to change the line-height. https://i.sstatic.net/GwFaD.png Table CSS ...

The appearance of the website varies across different web browsers

My current project involves creating a portfolio showcasing my work, but I've encountered an issue: When you visit my website and click on the "About" link, the text at the bottom of the tab is displayed differently in Chrome compared to IE and Firef ...