Double Ampersand in Less

LESS - what is the purpose of & AFTER a nested selector

The article "LESS CSS: Secrets of the Ampersand" details the difference well. I'll highlight the key uses:

Attach a class to an existing selector
Change state based on parent classes
Filter a nested selector to only match certain elements
Avoid repetition when selecting repeated elements
Simplify combinatorial explosions

The latter is my favorite. I've used it to handle some crazy IE issues. Check this out:

/**
 * Add a top border to paragraphs,
 * but remove that border when a preceding paragraph already has one.
 */
p  {
    border-top: 1px solid gray;
    & + & {
        border-top: 0;
    }
}

I think if you can wrap your mind around what this usage of & does, all the other uses become obvious.

Double ampersand selector in SASS

A simple solution is just repeating the datepicker class

.datepicker {
    /* your properties here, e.g. */
    width: 100%;

    &.datepicker-rtl {
        /* your properties here, e.g. */
        width: 100%;
    }
}

otherwise you may assign a variable with the class name, like so

$dp : datepicker;

.#{$dp} {
    /* your properties here, e.g. */
    width: 100%;

    &.#{$dp}-rtl {
        /* your properties here, e.g. */
        width: 100%;
    }
}

You can test this syntax here: http://sassmeister.com/

What is the meaning of an ampersand in Less selectors?

Less/Sass and other pre-processors let you write the CSS code with nested rules (besides other things like variables, mixins, and so on). So you don't have to write the full path like you do in CSS. You can just nest the style.

For example, you could have a structure like:

<parent>
    <child>
        <grandchild>
        </grandchild>
    </child>
</parent>

In plain CSS, to style every element you would write:

parent { styles }
parent child { styles }
parent child grandchild { styles }

With Less (and other preprocessors like SCSS) you can do the following

parent {
    some parent styles 
    & child {
        some child styles 
        & grandchild {
             some grandchild styles
        }
    }
 &:hover { hover styles on parent }
 &:before { pseudo element styles }
}

etc.

So, the use of & can be to enable style writing for elements that are in a relationship with the parent element ( in your case the .own-space ).

btn-box , -tra , -input-identifycode-con are direct children of the own-space element, and button is child of btn-box , span is child of button, grandchild of btn-box and , grandgrandchild ( :) ) of the own-pace. Anyway, you get the ideea :)

For the specific question .own-space { &-btn-box { ... } } would mean that there is an element with class own-space-btn-box which most probably is a child of own-space but NOT necessarily ( see end of answer ). The HTML seems to be structured in a BEM style but not according to the documentation and rules. When using preprocessors for styling it is highly recommended to use the BEM naming strategy. Take a look at it.

For example, the current structure COULD look like:

_{Stack Snippets do not accept SCSS. You can check out a working example here}

.own-space {

        &-btn-box {
          margin-bottom: 10px;

          button {
            padding-left: 0;

            span {
              color: #2D8CF0;
              transition: all .2s;
            }

            span:hover {
              color: #0C25F1;
              transition: all .2s;
            }
          }
        }

        &-tra {
          width: 10px;
          height: 10px;
          transform: rotate(45deg);
          position: absolute;
          top: 50%;
          margin-top: -6px;
          left: -3px;
          box-shadow: 0 0 2px 3px rgba(0, 0, 0, .1);
          background-color: white;
          z-index: 100;
        }

        &-input-identifycode-con {
          position: absolute;
          width: 200px;
          height: 100px;
          right: -220px;
          top: 50%;
          margin-top: -50px;
          border-radius: 4px;
          box-shadow: 0 0 2px 3px rgba(0, 0, 0, .1);
        }

      }

<div class="own-space">
  The SO snippet doesn't support CSS preprocessors.
   Example purposes only 
    <div class="own-space-btn-box">
      <button>Button</button>
      <span>Some span</span>
    </div>
    <div class="own-space-tra">
       Tra tra
    </div>
    <div class="own-space-input-identifycode-con">
      identifycode
    </div>
</div>

IMPORTANT when you see styles like these in most cases the elements ARE related but keep in mind when debugging other people's code that it's not always the case. They can be unrelated, e.g.

<element class="element"> ....  </element>
<element2 class="element-element2"> ....  </element2>

The SCSS could still look like this and have the same effect

.element { 
   styles
    &-element2 {
     styles
   }
}

See example -> not related

Another example use of & would be in the case you have two elements with a common class and a specific class, e.g.

 <element class="element specific1">....</element>
 <element class="element specific2">....</element>

You can add common styles and specific styles all together like

.element { 
   /* common styles */
   &.specific1 {
     /* specific 1 styles */
   }
   &.specific2 {
     /* specific 2 styles */
   }
}

There are a lot of different uses for &. Read more:

the-sass-ampersand
Sass parent selector
LESS
BEM naming

if shorthand with double ampersand

Yes, the two are equivalent in execution.

function test(value) {
  console.log(value);
  
  value && console.log("\texecute using AND");
  if (value) console.log("\texecuted using if");
}

test(true);
test(false);
test("string");
test(""); //empty string
test(0);
test(null);
test(undefined);
test(1);
test({});

What does double ampersand do in this program?

It is called the logical AND operator. This will evaluate the logical ANDing result of the two operands. The property of this operator is:

First the left hand side operand is evaluated, if it is TRUE (non zero), then the right hand side operand is evaluated. If it is also true then the whole expression is true, or false otherwise. On the other hand, if the left hand side operand is FALSE, then the right hand side operand is not evaluated at all. This can be done because, as one of the operands is false, whatever be the other operand, the expression becomes false. This is known as short circuiting

In your code, if the left hand if ret is true, then only the right hand side portion is evaluated, which eventually calls the fork () system call. The return value of the call is ANDed with the current value of ret, and reassigned to ret.

Basically it works like

if (ret == TRUE)
{
  retval = fork ();
  ret = ret && retval;
}

Read this:

On success, the PID of the child process is returned in the parent, and 0 is returned in the child. On failure, -1 is returned in the parent, no child process is created, and errno is set appropriately.

Consider the fork tree below. Each tree "node" shows the sequence of executed statement in each individual statement. One work in one line.

    (p1)
+--+ret = fork ();
|   printf 1 shows pid
|   && allows         fork (), ret = 1 = pid1 && pid2 
|   printf 2 shows 1    +
|   `if' not entered    |
|   show hello          |
|                       |    (p3)
|                       +--+ ret = 0 = ret && fork () (this is 0 here)
+-----+                      printf 2 shows 0
      |                      `if' is entered
      |                      fork ()
      |                      show hello
      |                            +
      |                            |
      +                            |
     (p2)                          |
    level 1                        +-------+
    print 0 in 1st printf                  |
    && DOES NOT allow fork ()            (p5)
    print 0 in 2st printf             show hello
   `if' entered
    fork () +-----------+
    show hello          |
                        |
                        +
                      (p4)
                    show hello

Here what goes in each process.

p1
executes fork () once, and has a pid (non-zero) in ret.
prints the pid
short circuit allows to execute fork (). As this is the parent, it returns another pid, which is anded with the previous child pid, which evaluates to 1. Therefore ret now contains 1, which is printed in the second printf. as ret is 1, if is not executes. Hello is printed.

p2
Child of p1, so ret has 0. prints 0 in the first printf. Short circuit does not allow fork () call. if body is entered, and fork () is called, which makes (p4). Now (p2) proceeds to print Hello.

p3
Child of p1, so fork () return is 0, which is ANDed with ret, and makes it 0 after the assignment. This is spawned after the first printf, so only the second printf shows 0.
if is entered, fork () is executed, which makes (p5). Now p4 proceeds to print Hello.

p4
starts from if body, gets out and prints Hello

p5
starts from if body, gets out and prints Hello

Above I have tried to express the process spawn tree, and the sequence of works in each process is expressed in each line of the process "node" on the tree. The edges denote spawn, and the edge start at the corresponding fork.

oracle sql - using double ampersand (&&) and double dot (..)

@Gary_W has covered the difference between a single and a double ampersand.

The double period is perhaps slightly less obvious. From the SQL*Plus documentation:

If you wish to append characters immediately after a substitution variable, use a period to separate the variable from the character.

If you had a single period:

&&DATABASE_ONE.TABLE_ONE

then that period would be treated as the terminator for the substituion variable name, and would be consumed in the process. Say the value you entered was 'HR'; the substitution would be:

old:select &&DATABASE_ONE.TABLE_ONE from dual
new:select HRTABLE_ONE from dual

select HRTABLE_ONE from dual

As you can see, there is now no period between the schema and table names, giving you a combined identifier which will not represent what you intended.

With the form you have:

&&DATABASE_ONE..TABLE_ONE

the second period is the 'normal' one that sits between those two elements; once the first has been consumed by the substitution, the second remains to fulfil that function:

old:select &&DATABASE_ONE..TABLE_ONE from dual
new:select HR.TABLE_ONE from dual

select HR.TABLE_ONE from dual

Can I use css wildcard selectors with an ampersand in Less?

It doesn't work because, I'm assuming, the actual class string doesn't really start with glyphicon-chevron-, but instead starts with glyphicon glyphicon-chevron-.

I would try

.glyphicon {
  font-size: 20px;
  padding: 0;
  color: green;
  &[class^="glyphicon glyphicon-chevron-"] {
    color: red !important;
  }
}

Or alternatively, use the wildcard where [attr*=value] "represents an element with an attribute name of attr and whose value contains at least one occurrence of string "value" as substring."

https://developer.mozilla.org/en/docs/Web/CSS/Attribute_selectors

.glyphicon {
  font-size: 20px;
  padding: 0;
  color: green;
  &[class*="glyphicon-chevron-"] {
    color: red !important;
  }
}

edit: This also doesn't need to be nested at all, the attribute selector would just work. But I understand you might want to be more specific for some reason or keep your code together for some reason. If you just changed the order of the class string around, your original code would work too (other than the mismatched curly brace)