17308

How do you write the shorthand for a nested class that has already been declared in SASS / SCSS?

Question:

As you can see, I have a variation for .mainContainer in the form of &--alt. However, I need to repeat .mainContainer__content inside the &--alt class to say that if there's a .mainContainer--alt in the parent container, then .mainContainer__content will have a different styling.

Is there a better way to write this as it seems to defeat the purpose of using the shorthand version if I am going to write out the complete class name in this particular example.

CSS:

.mainContainer { // SOME CSS properties &--alt { .mainContainer__content { // SOME CSS properties } } &__content { // SOME CSS properties } }

HTML:

<div class="mainContainer"> <div class="mainContainer__content"> // some style </div> </div>

HTML (with alt):

<div class="mainContainer mainContainer--alt"> <div class="mainContainer__content"> // some other style </div> </div>

Answer1:

You can save the main class in a variable like this

.mainContainer { $self: &; // SOME CSS properties &--alt { #{$self}__content { // SOME CSS properties } } &__content { // SOME CSS properties } }

Another option is to put the modifier on the<br />.mainContainer__content e.g. .mainContainer__content--alt

Answer2:

check this link: <a href="https://www.w3schools.com/Css/css_attribute_selectors.asp" rel="nofollow">https://www.w3schools.com/Css/css_attribute_selectors.asp</a> I uesed attribute selector where class ends with [class$="value"]

.mainContainer { // SOME CSS properties &[class$="--alt"] { .mainContainer__content { // SOME CSS properties } } &[class$="__content"] { // SOME CSS properties } }

but again I dont recommend write it this way.

Answer3:

you can try this. @mixin generate-sizes($class) { .#{$class}__content { font-size: 12px; } .#{$class}--alt { font-size: 14px; } } @include generate-sizes("mainContainer");

Recommend

  • Can't safely lock a value of a ConcurrentDictionary
  • Convert rgba colour definition string in LESS to color instance
  • border-image-outset in CSS
  • Ansible syntax best practice, YAML dictionary (key: value) or equal sign (key=value)?
  • c# winform DrawToBitmap offscreen
  • distinct values from multiple fields within one table ORACLE SQL
  • How to validate a year I enter in textbox using jquery rule?
  • Regex for Specific Tag
  • WordPress > setting permalink option via script buggy?
  • Python PIL to extract number from image
  • Updating product post meta data in admin meta box field
  • Cannot save model when using ember render helper
  • Magento get URL before current
  • C#: Import/Export Settings into/from a File
  • Prevent Tomcat from caching request during starup
  • How do I signal completion of my dataflow?
  • Adjust width of select element according to selected option's width
  • What's the purpose of QString?
  • gspread or such: help me get cell coordinates (not value)
  • How can I set a binding to a Combox in a UserControl?
  • How to use JavaScript to determine whether a file exists in a directory?
  • How do I exclude a dependency in provided scope when running in Maven test scope?
  • AJAX Html Editor Extender upload image appearing blank
  • Q promise. Difference between .when and .then
  • Modifying destination and filename of gulp-svg-sprite
  • Deserializing XML into class C#
  • In LanguageTool, how do you create a dictionary and use it for spell checking?
  • How can I use Kendo UI with Razor?
  • jquery mobile loadPage not working
  • Unanticipated behavior
  • How to include full .NET prerequisite for Wix Burn installer
  • C# - Getting references of reference
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • What are the advantages and disadvantages of reading an entire file into a single String as opposed
  • Why joiner is not used after Sequence generator or Update statergy
  • Change div Background jquery
  • costura.fody for a dll that references another dll
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize