Skip to main content
Blog IT Information technology

Main navigation

  • Home
  • Contact us

User account menu

  • Log in
  • Register

Web Developer

  1. Home
  2. Web Developer

Web Developer

Web Full Stack Developer
Contact Email
Web Developer

Nesting sass

But Sass wants to make your life easier. Rather than repeating the same selectors over and over again, you can write one style rules inside another. Sass will automatically combine the outer rule’s selector with the inner rule’s.

code sass

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

code css

Web Developer Web Developer
1 year 6 months ago
Read More

Selector Lists sass

Nested rules are clever about handling selector lists (that is, comma-separated selectors). Each complex selector (the ones between the commas) is nested separately, and then they’re combined back into a selector list.

code sass

.alert, .warning {
  ul, p {
    margin-right: 0;
    margin-left: 0;
    padding-bottom: 0;
  }
}

code css

.alert ul, .alert p, .warning ul, .warning p {
  margin-right: 0;
  margin-left: 0;
  padding-bottom: 0;
}

 

Web Developer Web Developer
1 year 6 months ago
Read More

Selector Combinators sass

You can nest selectors that use combinators as well. You can put the combinator at the end of the outer selector, at the beginning of the inner selector, or even all on its own in between the two.

code sass

ul > {
  li {
    list-style-type: none;
  }
}

h2 {
  + p {
    border-top: 1px solid gray;
  }
}

p {
  ~ {
    span {
      opacity: 0.8;
    }
  }
}

code css

Web Developer Web Developer
1 year 7 months ago
Read More

Interpolation sass

You can use interpolation to inject values from expressions like variables and function calls into your selectors. This is particularly useful when you’re writing mixins, since it allows you to create selectors from parameters your users pass in.

code sass

@mixin define-emoji($name, $glyph) {
  span.emoji-#{$name} {
    font-family: IconFont;
    font-variant: normal;
    font-weight: normal;
    content: $glyph;
  }
}

@include define-emoji("women-holding-hands", "");

code css

Web Developer Web Developer
1 year 8 months ago
Read More

How to create a custom module in Drupal 8 & 9

Drupal 9 is the latest version of Drupal. There are significant differences between Drupal 8&9 and Drupal 7. Firstly, Drupal 8&9 requires the latest version of php5 to run. Drupal 8&9 uses a PHP framework called Symphony, which relies heavily on OOP. Another major change in Drupal 8&9 is the folder structure. In Drupal 8&9, all core modules are placed within core/ and all other modules are placed in root modules folder. Moreover, there are changes in the way modules are created. Read on to know how to create a custom module in Drupal 8&9.

Web Developer Web Developer
2 years 4 months ago
Read More

Copyright © 2025 - Blog Information technology - Sitemap