Trying to create a gulp task that will pipe a bunch of files from different folders through LESS and then output them to a folder based on the original source. Consider this folder structure:

    Project
    +-- /Module_A
    |   +- /less
    |   |  +- a.less
    |   +- a.css
    |
    +-- /Module_B
        +- /less
        |  +- b.less
        +- b.css

 Here&#39;s my gulpfile:

    var gulp = require(&#39;gulp&#39;);
    var gutil = require(&#39;gulp-util&#39;);
    var less = require(&#39;gulp-less&#39;);

    gulp.task(&#39;compileLess&#39;, function () {
      gulp.src(&#39;./*/less/*.less&#39;)
        .pipe(less())
        .pipe(gulp.dest( ??? ));
    });

    gulp.task(&#39;default&#39;, [&#39;compileLess&#39;]);

I know gulp.dest() expects a path to be passed in but in my example the path will be different based on the source file. So how can I grab the path from source, modify it and then pass it into gulp.dest()?

Or am I going about this the wrong way?

How can I use the path from gulp.src() in gulp.dest()?

In our app, we have a preset list of colors that a user can be choose from and everything related to that user will have that color.

Throughout the app, we will have various modules with the color attached as a class name.

eg.

    &lt;div class=&quot;example_module green&quot;&gt;
      ...
    &lt;/div&gt;

We are using LESS for our CSS.

In a number of places we are doing things like this:

    .example_module.green { background: @green; }
    .example_module.red { background: @red; }
    .example_module.blue { background: @blue; }
    etc

I&#39;d like to be able to set all these color names as an array and iterate over them. If we add colors in the future, we only have to add it in one place. 

**Pseudo code:**

    @colors: [&#39;green&#39;, &#39;red&#39;, &#39;blue&#39;];

    for each @color in @colors {
      .example_module.@color { background: @color; }
    } 

Is something like this even supported in LESS?

Loop through array of variable names in Less

For example, is it possible to do something like:

    &lt;style type=&quot;text/less&quot;&gt;
      #foo {
        .bar {
           font-weight: bold;
        }
      }
    &lt;/style&gt;

Is it possible to inline LESS stylesheets?

I want Notepad++ to treat my *.less* files just as my *.css* files and thereby get syntax highlighting for any `.less` files I open.

How do you add syntax highlighting for Less in Notepad++?

I&#39;m trying to use MVC4 bundling to group some of my less files, but it looks like the import path I&#39;m using is off.  My directory structure is:

    static/
        less/
            mixins.less
            admin/
                user.less

In user.less, I&#39;m attempting to import mixins.less using this:

    @import &quot;../mixins.less&quot;;

This used to work for me before when using chirpy with dotless, but now I noticed ELMAH was getting mad at me, saying this:

    System.IO.FileNotFoundException: 
        You are importing a file ending in .less that cannot be found.
    File name: &#39;../mixins.less&#39;

Am I supposed to use a different `@import` with MVC4?

## Some additional info

Here&#39;s the less class and global.asax.cs code I&#39;m using to attempt this:

`LessMinify.cs`

    ...
    public class LessMinify : CssMinify
    {
        public LessMinify() {}

        public override void Process(BundleContext context, BundleResponse response)
        {
            response.Content = Less.Parse(response.Content);
            base.Process(context, response);
        }
    }
    ...

`Global.asax.cs`

    ...
    DynamicFolderBundle lessFB = 
        new DynamicFolderBundle(&quot;less&quot;, new LessMinify(), &quot;*.less&quot;);
        
    BundleTable.Bundles.Add(lessFB);

    Bundle AdminLess = new Bundle(&quot;~/AdminLessBundle&quot;, new LessMinify());
    ...
    AdminLess.AddFile(&quot;~/static/less/admin/user.less&quot;);
    BundleTable.Bundles.Add(AdminLess);
    ...

MVC4 Less Bundle @import Directory

I have a directory full of less css files. What is the best way to compile them to normal css? (for deployment)

Id like to run a command as follows:

    lessc -r less/ css/

where lessc is the less compiler (installed via node package manager)

How do I compile a directory full of less css files to css?

I started using LESS today. But it&#39;s kinda weird. This code does not work. I get an error:

    ! Variable Name Error: @linkColor in a is undefined.

My bootstrap:

    @import &quot;variables.less&quot;;
    @import &quot;normalize.less&quot;;

variables.less:

    @linkColor:             #08c;
    @linkColorHover:        darken(@linkColor, 15%);

normalize.less:

    a {
    	color: @linkColor;
    }
    a:visited {
    	color: @linkColor;
    }
    a:hover {
    	color: @linkColorHover;
    }

When I make an

&gt; @import &quot;variables.less&quot;

in the normalize.less file, everything works fine.

Thanks for your help :)


Variable Name Error &quot;is undefined&quot; even though &quot;variables.less&quot; imported

SASS has Compass (a community maintained library of sass mixins/methods). 

Does LESS have any supporting libraries that can compare to Compass? Listing anything would be helpful!

Compass style libraries for LESS css?

I&#39;m working with Bootstrap 2.0.3 using LESS. I want to customize it extensively, but I want to avoid making changes to the source whenever possible as changes to the libraries are frequent. I am new to LESS so I don&#39;t know how its compilation entirely works. What are some best practices for working with LESS or LESS based frameworks?

Twitter Bootstrap Customization Best Practices

I am user of AWS elastic beanstalk, and I have a little problem. I want to build my CSS files with less+node. But I don`t know how to install node in my dockerfile, when building with jenkins. 

Here is installation packages what I am using in my docker. I will be glad for any suggestions.

    FROM php:5.6-apache
    
    
    # Install PHP5 and modules along with composer binary
    RUN apt-get update
    RUN apt-get -y install \
        curl \
        default-jdk \
        git \
        libcurl4-openssl-dev \
        libpq-dev \
        libmcrypt-dev \
        libpq5 \
        npm \
        node \
        zlib1g-dev \
        libfreetype6-dev \
        libjpeg62-turbo-dev \
        libpng12-dev
    
    RUN docker-php-ext-configure gd --with-freetype-dir=/usr/include/ --with-jpeg-dir=/usr/include/
    
    RUN docker-php-ext-install curl json mbstring opcache pdo_mysql zip gd exif sockets mcrypt
    
    # Install pecl
    RUN pecl install -o -f memcache-beta \
        &amp;&amp; rm -rf /tmp/pear \
        &amp;&amp; echo &#39;extension=memcache.so&#39; &gt; /usr/local/etc/php/conf.d/memcache.ini


After this I am runing my entrypoint.sh with code

    #!/usr/bin/env sh
    
    composer run-script post-install-cmd --no-interaction
    
    chmod 0777 -R /var/app/app/cache
    chmod 0777 -R /var/app/app/logs
    
    exec apache2-foreground

But then I`ve got this error

     Error Output: [2016-04-04 11:23:44] assetic.ERROR: The template &quot;:tmp:module.html.twig&quot; contains an error: A template that extends another one cannot have a body in &quot;:tmp:module.ht  
      ml.twig&quot; at line 7.     

But when I install inside the Docker container node this way

    apt-get install git-core curl build-essential openssl libssl-dev
     git clone https://github.com/nodejs/node.git
     cd node
     ./configure
     make
     sudo make install
     node -v

I can build my CSS. So question is..how this installation above make install inside my Dockerfile when I am building it with Jenkins?



Install node in Dockerfile?

Can you import .css files into .less files...?

I&#39;m pretty familiar with less and use it for all my development. I regularly use a structure as follows:

&lt;!-- language: lang-css --&gt;

    @import &quot;normalize&quot;;
    
    //styles here
    
    @import &quot;mixins&quot;;
    @import &quot;media-queries&quot;;
    @import &quot;print&quot;;

All imports are other .less files and all works as it should.


My current issue is this:
I want to import a .css file into .less that references styles used in the .css file as follows:

&lt;!-- language: lang-css --&gt;

    @import &quot;../style.css&quot;;
    
    .small {
        font-size:60%;
        .type;
    }
    // other styles here

The .css file contains a class called `.type` but when I try to compile the .less file I get the error `NameError: .type is undefined` 

Will the .less file not import .css files, only other .less ones...? Or am I referencing it wrong...?!



import .css file into .less file

Using LESS, I know that I can change the saturation or tint of a color variable. That looks like this:

    background: lighten(@blue, 20%);

I want to change the alpha opacity of my color, though. Preferably like this:

    background: alpha(@blue, 20%);

Is there a simple way to do this in LESS? 

Modify alpha opacity of LESS variable

I have following CSS rule in a Less file:

    .container {
      min-height: calc(100vh - 150px);
    }

Which doesn&#39;t work at all. I want to make container full window height and minus header, footer fixed height. 

How can I do that?

Is it possible to use vh minus pixels in a CSS calc()?

I have the following code:

    @color : #d14836;

    .stripes span {
        -webkit-background-size: 30px 30px;
        -moz-background-size: 30px 30px;
        background-size: 30px 30px;
        background-image: -webkit-gradient(linear, left top, right bottom,
            color-stop(.25, rgba(209, 72, 54, 1)), color-stop(.25, transparent),
            color-stop(.5, transparent), color-stop(.5, rgba(209, 72, 54, 1)),
            color-stop(.75, rgba(209, 72, 54, 1)), color-stop(.75, transparent),
            to(transparent));

I need to convert `@color` to `rgba(209, 72, 54, 1)`.

So I need to replace `rgba(209, 72, 54, 1)` in my code with a Less function that generates an `rgba()` value from my `@color` variable.

How can I do this with Less?


How do I convert a hexadecimal color to rgba with the Less compiler?

I think this is not possible, but I thought I ask in case there is a way. The idea is that I have a variable for path to web resource folder:

    @root: &quot;../img/&quot;;
    @file: &quot;test.css&quot;;
    @url: @root@file;

    .px {
        background-image: url(@url);
    }

I get this as a result:

    .px { background-image: url(&quot;../img/&quot; &quot;test.css&quot;); }

But, I want the strings to combine into one string like this:

    .px { background-image: url(&quot;../img/test.css&quot;); }

Is it possible to concatenate strings together in Less?

Concatenate strings in Less

I have installed font-awesome 4.0.3 icons using `npm install`.

If I need to use it from node-modules how should I use it in html file?

If I need to edit the less file do I need to edit it in node-modules?

How to use font-awesome icons from node-modules

Is there anyway to have LESS apply the immediate child selector ( &gt; ) in its output?

In my style.less, I want to write something like:

    .panel {
        ...
        &gt; .control {
            ...
        }
    }

and have LESS generate something like:

    .panel &gt; .control { ... }

Immediate Child selector in LESS

I have used [LESS.js][1] before. It&#39;s easy to use, something like

    &lt;link rel=&quot;stylesheet/less&quot; href=&quot;main.less&quot; type=&quot;text/css&quot;&gt;
    &lt;script src=&quot;less.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

I saw [SASS.js][2]. How can I use it in a similar way? Parsing a SASS file for use immediately in HTML. It seems like SASS.js is more for use with [Node.js][3]?

    var sass = require(&#39;sass&#39;)
    sass.render(&#39;... string of sass ...&#39;)
    // =&gt; &#39;... string of css ...&#39;

    sass.collect(&#39;... string of sass ...&#39;)
    // =&gt; { selectors: [...], variables: { ... }, mixins: { ... }}

  [1]: https://github.com/cloudhead/less.js/tree/
  [2]: https://github.com/visionmedia/sass.js/tree/
  [3]: http://en.wikipedia.org/wiki/Node.js


Is there a SASS.js? Something like LESS.js?

I&#39;m using LESS to improve my CSS and am trying to nest a class within a class. There&#39;s a fairly complicated hierarchy but for some reason my nesting doesn&#39;t work.
I have this:

    .g {
        float: left;
        color: #323a13;
        .border(1px,#afc945);
        .gradient(#afc945, #c8da64);
        .common;
        span {
            .my-span;
    	    .border-dashed(1px,rgba(255,255,255,0.3));
        }
        .posted {
             .my-posted;
             span {
    	        border: none;
             }
        }
    }

I can&#39;t get the `.g.posted` to work. it just shows the `.g` bit.
If i do this it&#39;s fine:

    .g {
        float: left;
        color: #323a13;
        .border(1px,#afc945);
        .gradient(#afc945, #c8da64);
        .common;
        span {
            .my-span;
    	    .border-dashed(1px,rgba(255,255,255,0.3));
        }
    }
    
    .g.posted {
             .my-posted;
             span {
    	        border: none;
             }
        }

I&#39;d like to nest the `.posted` in `.g` though. Any ideas?


LESS CSS nesting classes

I want to use Twitter Bootstrap, but only on specific elements, so I need to figure out a way to prefix all Twitter Bootstrap classes with my prefix, or use the less mixins. I&#39;m not experienced with this yet so I don&#39;t quite understand how to do this. Here&#39;s an example of the HTML that I&#39;m trying to style:

    &lt;div class=&quot;normal-styles&quot;&gt;
      &lt;h1&gt;dont style this with bootstrap&lt;/h1&gt;
      &lt;div class=&quot;bootstrap-styles&quot;&gt;
        &lt;h1&gt;use bootstrap&lt;/h1&gt;
      &lt;/div&gt;
    &lt;/div&gt;

In this example, Twitter Bootstrap would normal style both `h1`s, but I want to be more selective about which areas I apply the Twitter Bootstrap styles.

How to namespace Twitter Bootstrap so styles don&#39;t conflict

I will calculate width in some element from percent to pixel so I will minus -10px via using **LESS** and **calc()**. It&#180;s possible?



    div {
        span {
            width:calc(100% - 10px);
        }
    }


I using CSS3 `calc()` so it doesn&#39;t work: `calc(100% - 10px)`

&gt; **Example:** if 100% = 500px so width = 490px (500-10);

I made a demo for testing : http://jsfiddle.net/4DujZ/55/

so padding will say: **5** (10px / 2) all the time when I resizing.

Can I do it in **LESS**? I know how to do in jQuery and simple CSS like margin padding or else...  but i will try to do functional in **LESS** with `calc()`

Calculating width from percent to pixel then minus by pixel in LESS CSS

SASS has a feature called `@extend` which allows a selector to inherit the properties of another selector, but without copying the properties (like mixins). 

Does LESS have this feature as well?

Does LESS have an &quot;extend&quot; feature?

In the following CSS taken from [Twitter Bootstrap](http://twitter.github.com/bootstrap/components.html#misc) what does the ampersand (&amp;) character mean?

    .clearfix {
      *zoom: 1;
      &amp;:before,
      &amp;:after {
        display: table;
        content: &quot;&quot;;
      }
      &amp;:after {
        clear: both;
      }
    }

What does an &quot;&amp;&quot; before a pseudo element in CSS mean?

Right Now I&#39;m trying to do this in CSS3 in my LESS code:

    width: calc(100% - 200px);

However, when LESS compiles it is outputting this:

    width: calc(-100%);

Is there a way to tell LESS not to compile it in that manner and to output it normally?

Disable LESS-CSS Overwriting calc()

In VS &lt;= 2015 we can use a WebEssentials extension that takes care for compiling the less/sass files for us, but currently it does not support VS 2017. Is there a similar extension that can compile Less/Sass on build?

How to compile Less/Sass files in Visual Studio 2017+

It would be nice to wrap css-styles for different resolutions within some css-classes using less.

I&#39;d like to do something like:

    footer {
      width: 100%;
    }
    
    .tablet {
      footer {
        width: 768px;
      }
    }
    
    .desktop {
      footer {
        width: 940px;
      }
    }

At the end something like this should be the result:

    footer {
      width: 100%;
    }
    
    @media screen and (min-width: 768px) {
      footer {
        width: 768px;
      }
    }
    
    @media screen and (min-width: 992px) {
      footer {
        width: 940px;
      }
    }

.tablet could look somehow like this:

    @media screen and (min-width: 768px) {
      .tablet {
    
      }
    }

Hope somebody has a nice idea!



Fancy Media Queries with some LESS Magic

I&#39;ve just started with **Twitter Bootstrap** and here is one question.

I am creating custom `&lt;header&gt;` block, and I want it&#39;s bottom corners to be rounded.

Is there any &quot;correct&quot; way to do this by using predefined classes, or I have to specify it manually like:

    border-radius: 10px;               // and all that cross-browser trumpery

*For now, I&#39;m using `css` styles. Maybe it will be better to use `less` for that issue?*

Correct way to create rounded corners in Twitter Bootstrap

I am using less.css to simplify my css styling.
I&#39;d like to declare a varaible in one less file and share its usage across my many less files. Is this possible? For example:

&lt;!-- language-all: lang-css --&gt;

**english.less**
&gt; @languageFloat: left;

**chart.less**

    div#footer a.web
    {   
        display: block;
        float: @languageFloat;
        color: #cccccc;
        margin-right: 10px;
    }



less.css sharing variables across files

I have been investigating for the whole day as I considered it would be worthwhile spending some time to learn best practice for customizing [Bootstrap](http://twitter.github.io/bootstrap/).


I can see that there is a friendly page available for customizing elements selectively from http://twitter.github.io/bootstrap/customize.html but I want to have more control than this without touching original bootstrap source files.


To start with, I basically wanted to test out changing the grid from 12 to 16 columns and to do this, I created my own variable less file and added @gridColumns:16; only to this file and imported this custom less inside bootstrap.less as follows. 


    // Core variables and mixins
    @import &quot;variables.less&quot;; // Modify this for custom colors, font-sizes, etc
    @import &quot;mixins.less&quot;;
    **@import &quot;../custom-variables.less&quot;; //Override variables**



Then, using [WinLess](http://winless.org/) I compiled the bootstrap.less file to get new bootstrap.css with overridden variable import call and linked the css with html file but the grid won&#39;t change to 16 columns.


Can anyone please point out what I am doing wrong?


Bootstrap variable overriding with LESS

I&#39;m looking for some kind of if-statement to control the `background-color` of different `div` elements.

I have tried the below, but it doesn&#39;t compile

    @debug: true;
    
    header {
      background-color: (yellow) when (@debug = true);
      #title {
          background-color: (orange) when (@debug = true);
      }
    }

    article {
      background-color: (red) when (@debug = true);
    }


How to use if statements in LESS

Is there a way to use variables in less `~` operator, like

    ~&quot;calc(70% - @spacing)&quot;;

When I have tried it it only works with static values like

     ~&quot;calc(70% - 10px)&quot;;

Can I get the string to be evaluated prior to beeing set as a property. 


Is there a way to use variables in Less for the ~ operator, like ~&quot;calc(100% - @spacing)&quot;;

The [Less][1] compilers that I&#39;m using ([OrangeBits][2] and [dotless 1.3.0.5][3]) are aggressively translating

    body { width: calc(100% - 250px - 1.5em); }

into

    body { width: calc(-151.5%); }

Which is obviously not desired. I&#39;m wondering if there is a way to signal to the Less compiler to essentially ignore the attribute during compilation. I&#39;ve searched through the Less documentation and both compilers&#39; documentation, and I could not find anything.

Does Less or a Less compiler support this?

If not, is there a CSS extender that does?

  [1]: https://en.wikipedia.org/wiki/Less_%28stylesheet_language%29
  [2]: https://github.com/JustinBeckwith/OrangeBits
  [3]: https://github.com/dotless/dotless



How to prevent Less from trying to compile CSS calc() properties?

With Photoshop, I can put two different border to an element with two different color. And with that, I can make many dynamic shade-effect with my elements. Even with Photoshop effects, I can manage that with Drop Shadow and Inner Shadow.

On the Web Design concern, if I have design like the image below, how can I achieve that with CSS? Is it really possible?&lt;br/&gt;
![border with different color][1]

**NOTE:** I&#39;m giving two borders to the white element: the outer border is white, and the inner border is greyish. Together, they create a dynamic look so that it feels like an inset element, and the white element is pillow embossed. So thing is a bit:

    div.white{
       border: 2px solid white;
       border: 1px solid grey;
    }

But you know it&#39;s a double declaration, and is invalid. So how can I manage such thing in CSS?

And if I put `border-style: double` then you know I can&#39;t pass two different color for the singe `double` border.

    div.white{
           border: double white grey;
    }

Additionally, I&#39;m familiar with LESS CSS Preprocessor. So if such a thing is possible using CSS Preprocessor, please let me know.


  [1]: http://i.stack.imgur.com/vtvIz.jpg

Double border with different color

Visual Studio 2013 is awesome, now with syntax highlight and autocomplete for `.less` files. But does it also generate the respective CSS files? Do I need to install other extensions for that?

Can Visual Studio 2013 generate CSS files from .less files?

I&#39;m trying to install LESS on my machine and have installed node already. However, when I enter &quot;node install -g less&quot; I get the following error and am not sure what to do?

    FPaulMAC:bin paul$ npm install -g less
    npm ERR! Error: EACCES, unlink &#39;/usr/local/lib/node_modules/less&#39;
    npm ERR!  { [Error: EACCES, unlink &#39;/usr/local/lib/node_modules/less&#39;]
    npm ERR!   errno: 3,
    npm ERR!   code: &#39;EACCES&#39;,
    npm ERR!   path: &#39;/usr/local/lib/node_modules/less&#39; }
    npm ERR! 
    npm ERR! Please try running this command again as root/Administrator.

    npm ERR! System Darwin 13.3.0
    npm ERR! command &quot;node&quot; &quot;/usr/local/bin/npm&quot; &quot;install&quot; &quot;-g&quot; &quot;less&quot;
    npm ERR! cwd /usr/local/bin
    npm ERR! node -v v0.10.33
    npm ERR! npm -v 1.4.28
    npm ERR! path /usr/local/lib/node_modules/less
    npm ERR! code EACCES
    npm ERR! errno 3
    npm ERR! stack Error: EACCES, unlink &#39;/usr/local/lib/node_modules/less&#39;
    npm ERR! error rolling back Error: EACCES, unlink &#39;/usr/local/lib/node_modules/less&#39;
    npm ERR! error rolling back  { [Error: EACCES, unlink &#39;/usr/local/lib/node_modules/less&#39;]
    npm ERR! error rolling back   errno: 3,
    npm ERR! error rolling back   code: &#39;EACCES&#39;,
    npm ERR! error rolling back   path: &#39;/usr/local/lib/node_modules/less&#39; }
    npm ERR! not ok code 0

&quot;Please try running this command again as Root/Administrator&quot; error when trying to install LESS

    .clearfix {
      *zoom: 1;
      &amp;:before,
      &amp;:after {
        display: table;
        content: &quot;&quot;;
        // Fixes Opera/contenteditable bug:
        // http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
        line-height: 0;
      }
      &amp;:after {
        clear: both;
      }
    }

1. Why not use `display:block`?
2. In addition, why does it also apply to the `::before` pseudoclass?

Understanding Bootstrap&#39;s clearfix class

I am using the [LESS][1] styling language.

Consider the following CSS:

    .side-bg
    {
        background:url(../img/layout/side-bg.jpg) top no-repeat;	
    }

Right now all of my images are in the folder `../img/` I wanted to be able to set a variable as the image path and use it like so:

    @image-path: ../img;

    .side-bg
    {
        background:url(@image-path/layout/side-bg.jpg) top no-repeat;	
    }

This does not work however. Its not a huge deal, I could always use *find and replace* if the image folder ever changed. I am just starting to learn LESS and was wondering if something like this is possible.


  [1]: http://lesscss.org/

Is there a way to set a common image path for LESS files?

How do you guys do maintenance on CSS built with Less/Sass?

One of the things I like about Dev Tools/Firebug is the ability to see the line number of a css styling. Is there a good way to do this with CSS preprocessors other than having to manually search through the .less/.scss file to find the code I want to modify?




Less/Sass debugging in Chrome Dev Tools/Firebug

I noticed that [less.js][1] is working in firefox but not in Chrome, or is it because I made an error? 

    &lt;link rel=&quot;stylesheet/less&quot; href=&quot;css/style.less&quot; /&gt;
    &lt;script src=&quot;http://lesscss.googlecode.com/files/less-1.0.21.min.js&quot;&gt;&lt;/script&gt;

    @highlight: #cb1e16;
    @shade1: #cb1e16;
    @tone1: #5c6f7d;
    @grad1: #e6edf3;
    @grad2: #8a8d92;
    @text1: #333e44;
    
    header, footer, section, article, nav, aside { display: block; }
    
    .grad {
      background: @grad2;
      background: -moz-linear-gradient(top, @grad1, @grad2 1200px);
      background: -webkit-gradient(linear, 0 0, 0 1200, from(#e6edf3), to(#8a8d92));
    }
    
    html {
      .grad;
      min-height: 100%;
    }

even if i try `html { background: red; } ` it still does not work in chrome am i making a mistake somewhere?


  [1]: http://fadeyev.net/2010/06/19/lessjs-will-obsolete-css/

All Less Solutions on Gang of Coders

Total of 39 Less Solutions