Nandu Singh

Nandu Singh

1575682952

What are differences between mixins, extend and placeholders in Sass

Stylesheet development with SASS/SCSS, even when using its most basic features, like nesting properties or variables, saves valuable time and makes life easier for front-end developers. It’s not surprising that CSS pre-processors have been widely adopted as the de facto way of creating styles for websites and applications.

In this SASS/SCSS tutorial, we will explore how to use @mixins, @extend and placeholders and the difference between it.

How to use @mixins in SASS/SCSS

Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes.

To create a mixin you use the @mixin directive and give it a name. We’ve named our mixin size. We’re also using the variable $width, $height inside the parentheses so we can pass in a transform of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin.

@mixin size($width: 100%, $height: 100%) {
  width: $width;
  height: $height;  
}

.img-fluid{
	@include size();
}

.avatar{
	@include size(50px, 50px);
}

.avatar-lg{
	@include size(60px, 60px);
}

Here is the result after compilation:

.img-fluid{
	width: 100%;
	height: 100%;
}

.avatar{
	width: 50px;
	height: 50px;
}

.avatar-lg{
	width: 60px;
	height: 60px;
}

How to use @extend in SASS/SCSS

.avatar-status {
  &:before {
    content: '';
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 20%;
    height: 20%;
    border-radius: 50rem;
    border: 1px solid #fff;
  }
}

.avatar-online {
  @extend .avatar-status;
  &:before {
    background-color: green;
  }
}

.avatar-busy {
  @extend .avatar-status;
  &:before {
    background-color: red;
  }
}

in the CSS the result is:

.avatar-status:before, .avatar-online:before, .avatar-busy:before {
    content: '';
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 20%;
    height: 20%;
    border-radius: 50rem;
    border: 1px solid #fff;
}

.avatar-online:before {
    background-color: green;
}

.avatar-busy:before {
    background-color: red;
}

This is one of the most useful features of Sass. Using @extend lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY. With @extend, you can’t pass parameters during the extending, but that’s not the idea actually. @extend should be used in those places where you want to share properties between the elements.

The final code is still not perfect. That’s because the .avatar-status class is also written in our final .css file. You may not use it at all, so it will be good if it is hidden. To achieve this you could use placeholders.

How to use placeholders in SASS/SCSS

%avatar-status {
  &:before {
    content: '';
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 20%;
    height: 20%;
    border-radius: 50rem;
    border: 1px solid #fff;
  }
}

.avatar-online {
  @extend %avatar-status;
  &:before {
    background-color: green;
  }
}

.avatar-busy {
  @extend %avatar-status;
  &:before {
    background-color: red;
  }
}

in the CSS the result is:

.avatar-online:before, .avatar-busy:before {
    content: '';
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 20%;
    height: 20%;
    border-radius: 50rem;
    border: 1px solid #fff;
}

.avatar-online:before {
    background-color: green;
}

.avatar-busy:before {
    background-color: red;
}

You can extend most simple CSS selectors in addition to placeholder classes in Sass, but using placeholders is the easiest way to make sure you aren’t extending a class that’s nested elsewhere in your styles, which can result in unintended selectors in your CSS.

Note that the CSS in %avatar-status isn’t generated, because %avatar-status is never extended.

Conclusion

SASS is wonderful new language. Although it may seem simple, it offers great benefits for developing theming and templates.

If useful, please share it.

#scss #sass #CSS3 #css

What is GEEK

Buddha Community

What are differences between mixins, extend and placeholders in Sass
Nandu Singh

Nandu Singh

1575682952

What are differences between mixins, extend and placeholders in Sass

Stylesheet development with SASS/SCSS, even when using its most basic features, like nesting properties or variables, saves valuable time and makes life easier for front-end developers. It’s not surprising that CSS pre-processors have been widely adopted as the de facto way of creating styles for websites and applications.

In this SASS/SCSS tutorial, we will explore how to use @mixins, @extend and placeholders and the difference between it.

How to use @mixins in SASS/SCSS

Some things in CSS are a bit tedious to write, especially with CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. You can even pass in values to make your mixin more flexible. A good use of a mixin is for vendor prefixes.

To create a mixin you use the @mixin directive and give it a name. We’ve named our mixin size. We’re also using the variable $width, $height inside the parentheses so we can pass in a transform of whatever we want. After you create your mixin, you can then use it as a CSS declaration starting with @include followed by the name of the mixin.

@mixin size($width: 100%, $height: 100%) {
  width: $width;
  height: $height;  
}

.img-fluid{
	@include size();
}

.avatar{
	@include size(50px, 50px);
}

.avatar-lg{
	@include size(60px, 60px);
}

Here is the result after compilation:

.img-fluid{
	width: 100%;
	height: 100%;
}

.avatar{
	width: 50px;
	height: 50px;
}

.avatar-lg{
	width: 60px;
	height: 60px;
}

How to use @extend in SASS/SCSS

.avatar-status {
  &:before {
    content: '';
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 20%;
    height: 20%;
    border-radius: 50rem;
    border: 1px solid #fff;
  }
}

.avatar-online {
  @extend .avatar-status;
  &:before {
    background-color: green;
  }
}

.avatar-busy {
  @extend .avatar-status;
  &:before {
    background-color: red;
  }
}

in the CSS the result is:

.avatar-status:before, .avatar-online:before, .avatar-busy:before {
    content: '';
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 20%;
    height: 20%;
    border-radius: 50rem;
    border: 1px solid #fff;
}

.avatar-online:before {
    background-color: green;
}

.avatar-busy:before {
    background-color: red;
}

This is one of the most useful features of Sass. Using @extend lets you share a set of CSS properties from one selector to another. It helps keep your Sass very DRY. With @extend, you can’t pass parameters during the extending, but that’s not the idea actually. @extend should be used in those places where you want to share properties between the elements.

The final code is still not perfect. That’s because the .avatar-status class is also written in our final .css file. You may not use it at all, so it will be good if it is hidden. To achieve this you could use placeholders.

How to use placeholders in SASS/SCSS

%avatar-status {
  &:before {
    content: '';
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 20%;
    height: 20%;
    border-radius: 50rem;
    border: 1px solid #fff;
  }
}

.avatar-online {
  @extend %avatar-status;
  &:before {
    background-color: green;
  }
}

.avatar-busy {
  @extend %avatar-status;
  &:before {
    background-color: red;
  }
}

in the CSS the result is:

.avatar-online:before, .avatar-busy:before {
    content: '';
    position: absolute;
    bottom: 5%;
    right: 5%;
    width: 20%;
    height: 20%;
    border-radius: 50rem;
    border: 1px solid #fff;
}

.avatar-online:before {
    background-color: green;
}

.avatar-busy:before {
    background-color: red;
}

You can extend most simple CSS selectors in addition to placeholder classes in Sass, but using placeholders is the easiest way to make sure you aren’t extending a class that’s nested elsewhere in your styles, which can result in unintended selectors in your CSS.

Note that the CSS in %avatar-status isn’t generated, because %avatar-status is never extended.

Conclusion

SASS is wonderful new language. Although it may seem simple, it offers great benefits for developing theming and templates.

If useful, please share it.

#scss #sass #CSS3 #css

Einar  Hintz

Einar Hintz

1601384706

Sass is a stylesheet language that’s compiled to CSS

What will be covered in this article:

  1. Comments
  2. Nesting
  3. Variables
  4. Import and use
  5. Mixins and Include
  6. Extend
  7. Functions and if/else
  8. Loops
  9. Media Queries

1. Comments

The way Sass comments work differs substantially between SCSS and the indented syntax. Both syntaxes support two types of comments: comments defined using /* */ that are (usually) compiled to CSS, and comments defined using // that are not.

// This comments
	// will not be compiled
	// and will not be in css

	/* But this comment will */

#sass #mixin #loop #nesting #media-queries

Macey  Kling

Macey Kling

1598974620

Is Sass CSS with Superpowers?

If you start using Sass, you never want to write CSS by hand again.

If you’re new to frontend development like me, maybe you heard or read that, but what is Sass, and is it really that amazing?

Sass (short for syntactically awesome style sheets) is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). The indented syntax and SCSS files are traditionally given the extensions .sass and .scss, respectively.  (Wikipedia, n.d.).

In other words, it is a program that takes one data type (Sass) and converts it to another data type (CSS) and is fully compatible with all versions of CSS.

When I started to get comfortable using CSS, things started to get complicated and the stylesheets got longer and longer, and to be honest, it sometimes feels like a mess. So I tried Sass and enjoyed it.

It is very similar to CSS but is easier to write, and I don’t have to repeat myself as the principle (DRY) advice.

Some of the principal features are:

Variables let you store information that you want to reuse throughout your stylesheet. You can store things like colors, fonts, etc.

Nesting in Sass will allow you to nest your CSS selectors in a way that follows a visual hierarchy, it’s simple and useful, and you can use the “&” character to get a reference of the parent selector.

But you should be careful that excess nested rules will result in overly qualified CSS which is a bad practice.

Partials in Sass will allow you to create small Sass files that you can include in other Sass files. Thanks to the @import rule, a partial is created by naming it with an underscore: _buttons.scss.

This is a great way to keep your code tidy.

Mixes (reusable style blocks) A mixin allows you to make groups of CSS statements that you want to reuse throughout your code.

#css #sass #stylesheet-languages #coding #learning-to-code #shower-thoughts #nesting-in-sass #latest-tech-stories

Queenie  Davis

Queenie Davis

1628143200

How I Use SASS mixins

I love SASS! Prior to using Sass my CSS workflow was horrendous. If you’ve been in the development world for a few years, you probably came from the land of writing CSS in repetitive selectors like me. 

#sass 

Sass Extends - MERN Stack

Working with sass extends and create a login form. Design a feature with a sass extend feature.

Subscribe: https://www.youtube.com/c/DailyTuition/featured

#sass #mern