How to Alias Class Name in CSS or SASS

CSS class alias

Bootstrap's CSS is written in LESS form by default, so it would be better to include an extra .less file and use its extend function to map your HTML's classes to the Bootstrap classes you want them to implement.

In this case, you'd be looking at:

.awesomnes-container {
    &:extend(.row);
}

.awesomnes-item{
    &:extend(.col-lg-12);
}

Is it possible to alias a class or tag to another class or tag in SASS or LESS?

There is no aliasing as you say it, but LESS and Sass both have the ability to write like this:

.navbar, #main-nav {
    .collapse {}
}

Which would output like this:

.navbar .collapse, #main-nav .collapse {}

Sass has a unique directive called @extend, which functions like this:

%common-styles {
    .collapse {}
}

.navbar {
    // unique navbar styles
    @extend %common-styles
}

#main-nav {
    // unique main-nav styles
    @extend %common-styles
}

The output would be identical to the output of the first for this simplified case, but allows you to add additional styling in an elegant way.

Update for rephrased question:

I use classes very sparingly, only to describe the collection of elements as a whole (is it a movie listing? Is it information about a client? Is it a call to action element?) and let descendant selectors take care of the rest. Chained classes (ala OOPCSS) are largely unnecessary when using a CSS Preprocessor: it can assemble styles for you.

In a theoretical Sass bootstrap, we might define a few things we like to reuse for navigation elements no matter what site we are designing (LESS has a slightly different syntax, but it can do this too).

@mixin drop-menu { // intended for use with ordered or unordered lists that contain unordered lists
    & > li {
        @include inline-menu;
        ul { display: none }
        &:hover {
            ul { display: list }
        }
    }
}

@mixin inline-menu { // use with ordered or unordered lists if you'd like
    display: inline;
    margin-right: 1em;
    & + li { margin-left: 1em; border-left: 1px solid }
}

@mixin subtle-box { // just a box with a subtle gradient and slightly rounded corners
    linear-gradient(white, #CCC);
    border-radius: .25em;
    padding: .5em;
}

@mixin clearfix {
    &:after {
        content: " ";
        display: table;
        clear: both;
    }
}

None of these items are part of your CSS until you ask them to be.

body > header nav { // this is our main navigation element
    @include drop-menu;
    @include subtle-box;
    color: blue;
    font-family: garamond, serif
}

nav.admin {
    @include inline-menu;
    color: orange;
}

section.gallery {
    @include clearfix;
    img { float: left; padding: 0 10px 10px 0 }
}

Now if you have multiple elements that are very different but have a good chunk of styling in common, by all means use the @extend directive mentioned in the original answer.

If you're deciding between Sass and LESS, Sass has considerably more features (like the really cool @extend directive, functions, lists, etc.). I initially chose LESS because it had a nice 3rd party Windows compiler so I didn't have to install Ruby on my virtual box, but fought against the language constantly (these variable variables are useless!).

aliasing two css classes together

Method 1: You can modify your css so that the same effects apply to both classes:

.foo, .table-striped{ some css }

Method 2:

Instead of aliasing them, you can simply perform a search for all elements with class name "foo" and add the class name "table-striped" to them.

var tmp = document.getElementsByClassName("foo");
for(var i=0, j=tmp.length; i<j; i++){
    tmp[i].className += " table-striped";
}

Keep in mind that this is using javascript.

How to create Sass mixin aliases with support for content blocks?

You're not passing any @content when using @include desktop-breakpoint in your large-breakpoint mixin. Doing this will fix your compilation error:

@mixin large-breakpoint {
   // Remember to pass content received by mixin to @include
   @include desktop-breakpoint {
     @content;
   }
}

Then your CSS will be compiled properly, as intended:

.my-class {
  font-size: small;
}
@media only screen and (min-width: 769px) {
  .my-class {
    font-size: big;
  }
}

.my-other-class {
  color: red;
}
@media only screen and (min-width: 769px) {
  .my-other-class {
    color: blue;
  }
}

See proof-of-concept example based on your modified code: https://www.sassmeister.com/gist/3109af060293eed0b89a22c27fa20527

Can I create multiple css class name as one statement?

Finally, I can do it with a loop function.

$pages: login register verify reset;
@each $page in $pages {
  .my-#{$page} {
    .my-#{$page}__aside {
      width: 605px;
      padding: 3rem 3.5rem;
      background-repeat: no-repeat;
      background-size: cover;

      .my-#{$page}__logo {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
      }
    }
  }
}

Why and how to set multiple classes in sass?

The reason your code doesn't work is that the nesting is corresponding with a smilier nesting in html, i.e

<div class="button">
    <div class="white">This would get a background of #fff</div>
</div>

To get what you want, you should can use & as a alias to the selector of the parent:

.button {
    font-size: 12px;

    &.white {
        background-color: #fff;
    }
}