I saw this code, when i was checking Drupal Omega 4 theme
%container {
#include container;
#include grid-background;
}
what does the '%container' mean?
what is the '%' for?
https://sass-lang.com/documentation/style-rules/placeholder-selectors
Placeholder Selectors: %foo
Sass supports a special type of selector called a “placeholder
selector”. These look like class and id selectors, except the # or .
is replaced by %. They’re meant to be used with the #extend directive;
for more information see #extend-Only Selectors.
On their own, without any use of #extend, rulesets that use
placeholder selectors will not be rendered to CSS.
Example
SCSS SYNTAX
%toolbelt {
box-sizing: border-box;
border-top: 1px rgba(#000, .12) solid;
padding: 16px 0;
width: 100%;
&:hover { border: 2px rgba(#000, .5) solid; }
}
.action-buttons {
#extend %toolbelt;
color: #4285f4;
}
.reset-buttons {
#extend %toolbelt;
color: #cddc39;
}
CSS Output
.action-buttons, .reset-buttons {
box-sizing: border-box;
border-top: 1px rgba(0, 0, 0, 0.12) solid;
padding: 16px 0;
width: 100%;
}
.action-buttons:hover, .reset-buttons:hover {
border: 2px rgba(0, 0, 0, 0.5) solid;
}
.action-buttons {
color: #4285f4;
}
.reset-buttons {
color: #cddc39;
}
SASS
%icon {
transition: background-color ease .2s;
margin: 0 .5em;
}
.error-icon {
#extend %icon;
/* error specific styles... */
}
.info-icon {
#extend %icon;
/* info specific styles... */
}
Output
.error-icon, .info-icon {
transition: background-color ease .2s;
margin: 0 .5em;
}
.error-icon {
/* error specific styles... */
}
.info-icon {
/* info specific styles... */
}
Note
Placeholder selectors have the additional property that they will not show up in the generated CSS, only the selectors that extend them will be included in the output.
More info
http://thesassway.com/intermediate/understanding-placeholder-selectors
Tools
If you want to play around Sass please use - http://sassmeister.com/
It's a placeholder selector. It doesn't do anything on its own but can be extended, like an abstract base class.
Related
I am trying to find a way to include the parents styles within nested styles. In the code below, I want to include the width and box-sizing that are set on .random-div in the two nested styles too, so that .random-div--large would have width, box-sizing and padding all set.
.random-div {
width: 100%;
box-sizing: border-box;
&--large {
padding: 65px 45px;
}
&--small {
padding: 25px 15px;
}
}
I've tried extending the parent class within the nested ones but that includes all of the other nested styles too. Is there any way to just include the parent styles?
You can use the #extend rule without using a placeholder, just reference the parent class you want to extend:
.random-div {
width: 100%;
box-sizing: border-box;
&--large {
#extend .random-div;
padding: 65px 45px;
}
&--small {
#extend .random-div;
padding: 25px 15px;
}
}
This will compile to:
.random-div, .random-div--small, .random-div--large {
width: 100%;
box-sizing: border-box;
}
.random-div--large {
padding: 65px 45px;
}
.random-div--small {
padding: 25px 15px;
}
Note you can't use the parent selector (&) with the #extend rule, so this won't work:
.random-div {
width: 100%;
box-sizing: border-box;
&--large {
#extend &;
padding: 65px 45px;
}
&--small {
#extend &;
padding: 25px 15px;
}
}
Create a placeholder and use that.
%random-div {
width: 100%;
box-sizing: border-box;
}
.random-div {
#extend %random-div;
&--large {
#extend %random-div;
padding: 65px 45px;
}
&--small {
#extend %random-div;
padding: 25px 15px;
}
}
with your bem methodology your div should have both identifier and modifier and should look like this
<div class="random-div random-div--large"></div>
so it will get all three styles.
This question already has an answer here:
Append the parent selector to the end with Sass
(1 answer)
Closed 6 years ago.
This is what I want:
From something like this (this code doesn't work, it throws an error):
.ia-loading {
select.& {
border: 2px solid blue;
}
input.& {
border: 2px solid orange;
}
}
Get this:
select.ia-loading { border: 2px solid blue; }
input.ia-loading { border: 2px solid orange; }
I have tried several combinations, none of which have worked:
This one:
.ia-loading {
select & {
border: 2px solid blue;
}
input & {
border: 2px solid orange;
}
}
Produces this css, which is not what I want:
select .ia-loading { border: 2px solid blue; }
input .ia-loading { border: 2px solid orange; }
This one:
.ia-loading {
select& {
border: 2px solid blue;
}
input& {
border: 2px solid orange;
}
}
throws this error:
"&" may only be used at the beginning of a compound selector.
Many thanks in advance.
You could make small mixin for this like so:
#mixin test($elem) {
#{$elem}.test {
#content;
}
}
And if you really want to use it inside your class you can use #at-root directive since Sass 3.3 (else you just put it outside your main class)
.test {
margin: 20px;
#at-root {
#include test(select) {
border: 1px solid red;
}
#include test(input) {
border: 1px solid blue;
}
}
}
DEMO
What is the reason you are using '&' behind input and select?
Its only used when you want to have a specific "action" like hover, active etc.
Example
.ia-loading
&:hover
color: #FFF
Also in Sass you can't use brackets, that is used in scss
I also don't think you can do it the way you want it. It should be done like this:
.ia-loading
border: 2px solid
select
.ia-loading
border-color: blue
input
.ia-loading
border-color: orange
Given the following Sass:
div.test {
display: inline-block;
background-color: #ffffff;
color: #000000;
&:before {
& {
&:hover {
border: 1px solid salmon;
}
}
width: 25px;
height: 25px;
content: "";
}
}
The resulting CSS compiles to:
div.test {
display: inline-block;
background-color: #ffffff;
color: #000000;
}
div.test:before {
width: 25px;
height: 25px;
content: "";
}
div.test:before:hover {
border: 1px solid salmon;
}
What I am attempting to do is generate div.test:hover:before (the current output is before:hover).
NOTE: I am able to generate the expected CSS by using the following Sass:
div.test {
display: inline-block;
background-color: #ffffff;
color: #000000;
&:hover {
&:before {
border: 1px solid salmon;
}
}
&:before {
width: 25px;
height: 25px;
content: "";
}
}
However I would like to know if it is possible using the first nested approach or some modification of it.
The goal was to avoid having to repeat &:before if there was such a way to do so using Sass syntax. I am also OK with knowing it isn't possible.
While initially the plan was to have '&' available in SassScript as a string that could be manipulated so that you could insert values wherever you wanted, those plans have been abandoned for 3.3 due to complication. Unfortunately you'll have to wait a while to be able to do this. At the moment '&' is immutable and just means "whatever the selector chain up to this point is".
EDIT (2020.02.15):
it is now technically possible to achieve this with recent versions of dart-sass:
#use "sass:selector";
#mixin unify-parent($child) {
#at-root #{selector.unify(&, $child)} {
#content;
}
}
div.test {
display: inline-block;
background-color: #ffffff;
color: #000000;
&:before {
width: 25px;
height: 25px;
content: "";
#include unify-parent(":hover") {
border: 1px solid salmon;
}
}
}
Sources:
https://sass-lang.com/blog/the-module-system-is-launched
https://sass-lang.com/documentation/style-rules/parent-selector#advanced-nesting
Is it be possible to use some sort of #directive creation syntax, similar to creating #mixins? Secondly, is it possible to create a SASS-only pseudo class?
I'd like to declare my own SASS directive,although I'd prefer not to have to force my teammates to install an extra ruby gem to use it so I'd want to store it in a scss partial. I do understand that they are orders of levels in complexity, so perhaps it just isn't possible.
In addition to perhaps creating a new scss-only pseudo class (such as :parent, :clicked, :unchecked, etc) I'd be interested in a custom-made directive that assists with using checkboxes to direct css animations ("css checkbox hack"). Here is my scss pseudocode to generalize what I'm trying to do:
// this code monitors when a checkbox (#someinput) is checked,
// then applies style to div #target div. Basically an 'onClick' event in scss.
body {
#wrapper {
#targetdiv {
#spotcheck(#someinput) { #
color: red; border: 2px solid blue; # <-- move this ...
} #
color: blue; border: 0;
#someinput {
width: 20px; height: 20px;
}
}
}
}
// ... the above scss should be converted to this pre-compiled state, also scss
body {
#someinput:checked ~ #targetdiv { #
color: red; border: 2px solid blue; # <-- ..to here. it needs to be
} # above the #targetdiv
#wrapper {
#targetdiv {
color: blue; border: 0;
#someinput {
width: 20px; height: 20px;
}
}
}
}
Make your selectors only as specific as they absolutely need to be and no more. A mixin would only be more verbose with no real benefit.
#targetdiv {
color: blue; border: 0;
#someinput:checked ~ & {
color: red; border: 2px solid blue;
}
}
#someinput {
width: 20px; height: 20px;
}
Output:
#targetdiv {
color: blue;
border: 0;
}
#someinput:checked ~ #targetdiv {
color: red;
border: 2px solid blue;
}
#someinput {
width: 20px;
height: 20px;
}
Alternately, this would give the same result with the ability to overqualify as much as you want:
#targetdiv {
color: blue; border: 0;
}
#someinput {
width: 20px; height: 20px;
~ #targetdiv {
color: red; border: 2px solid blue;
}
}
How can I customize the Firefox DOM Inspector? The white color and the font size makes it difficult to read.
I found a solution. I used Stylish addon
https://addons.mozilla.org/en-US/firefox/addon/stylish/
#namespace url(http://www.w3.org/1999/xhtml);
#-moz-document url("chrome://browser/content/devtools/markup-view.xhtml") {
body { background: white !important }
}
The above is a sample for the background only. Another css example is one below.
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
* {
padding: 0;
margin: 0;
}
body {
color: hsl(0,0%,50%);
background: black !important;
}
.text {
color: white !important;
}
.newattr {
cursor: pointer;
}
.selected {
background-color: hsl(0,0%,90%);
}
/* Give some padding to focusable elements to match the editor input
* that will replace them. */
span[tabindex] {
display: inline-block;
padding: 1px 0;
}
li.container {
position: relative;
padding: 2px 0 0 2px;
}
.codebox {
padding-left: 14px;
}
.expander {
position: absolute;
-moz-appearance: treetwisty;
top: 0;
left: 0;
width: 14px;
height: 14px;
}
.expander[expanded] {
-moz-appearance: treetwistyopen;
}
.more-nodes {
padding-left: 16px;
}
.styleinspector-propertyeditor {
border: 1px solid #CCC;
}
}
Source