I think this is the way to do it but my css output is not what I was expecting:
SOURCE CODE
This is my scss file:
footer.page-footer
{
margin-top: 0;
&,
nav
{
background-color: $blue;
}
}
This is the css output:
footer.page-footer
{
margin-top: 0;
}
footer.page-footer,
footer.page-footer nav
{
background-color: #50a4b1;
}
How can I make the second outputted css's selector be simply footer.page-footer, nav instead of footer.page-footer, footer.page-footer nav?
You can use the #at-root directive to produce a rule that is generated outside its definition scope but that retains the value of its parent (&)
footer.page-footer {
margin-top: 0;
#at-root {
#{&},
nav {
background-color: blue;
}
}
}
Output:
footer.page-footer {
margin-top: 0;
}
footer.page-footer,
nav {
background-color: blue;
}
<p class="sassmeister" data-gist-id="93b3b22a2888f2f5f86b" data-height="480" data-theme="tomorrow">Play with this gist on SassMeister.</p><script src="http://cdn.sassmeister.com/js/embed.js" async></script>
Sassmeister
Related
Is there any way to extend class if parent has no class name in sass?
scss
div {
&:last-child {
margin: 1rem;
div {
#extend from parent here i.e. &:last-child
}
}
}
#extend &:last-child does not seem to work.
(To answer my own question), You can use the #at-root directive to move child selector to the root level so that it can extend the parent selector.
scss
div {
&:last-child {
margin: 1rem;
div {
#at-root div:last-child {
#extend div:last-child;
margin: 0;
}
}
}
}
css output
div:last-child {
margin: 1rem;
}
div:last-child {
margin: 0;
}
Is there a way to put made classes inside a class?
e.g.
.my-upper-class{ .hidden-md, .hidden-sm, .hidden-lg}
Not with plain CSS, but with Sass, like so—
.hidden-sm {
background: red;
}
.hidden-md {
color: blue;
}
.hidden-lg {
font-size: 1em;
}
.my-upper-class {
#extend .hidden-sm;
#extend .hidden-md;
#extend .hidden-lg;
}
which outputs the final CSS as below, which is pretty much what you are looking for.
.hidden-sm, .my-upper-class {
background: red;
}
.hidden-md, .my-upper-class {
color: blue;
}
.hidden-lg, .my-upper-class {
font-size: 1em;
}
Is there a way not to repeat the clip-item class when using nth-child in a nested SCSS? The output should be in the CSS below.
CSS
.clip-item .group-left {
padding: 0;
}
.clip-item .group-left:nth-child(2n+1) {
background: blue;
}
.clip-item .group-left:nth-child(2n+2) {
background: gray;
}
.clip-item .group-right {
padding: 0;
}
.clip-item .group-right:nth-child(2n+1) {
background: blue;
}
.clip-item .group-right:nth-child(2n+2) {
background: gray;
}
I was trying to do it like below. Even though t's working, I don't think it's the right way / clean way.
SCSS
.group-left {
.clip-item & {
padding: 0;
}
.clip-item:nth-child(2n+1) & {
background: blue;
}
.clip-item:nth-child(2n+2) & {
background: gray;
}
}
.group-right {
.clip-item & {
padding: 0;
}
.clip-item:nth-child(2n+1) & {
background: blue;
}
.clip-item:nth-child(2n+2) & {
background: gray;
}
}
I'm also using the .group-left and .group-right classes in some content, that's why I used it as a parent selector.
EDIT:-
Each group wrappers are wrapped in a clip-item div. Below is my markup:-
<div class="clip-item">
<div class="group-left">
<div class="group-right">
</div>
<div class="clip-item">
<div class="group-left">
<div class="group-right">
</div>
If you need to group the selectors in this way - I recommend using the #at-root directive.
The #at-root directive causes one or more rules to be emitted at the
root of the document, rather than being nested beneath their parent
selectors.
.group-left {
.clip-item & {
padding: 0;
}
#at-root .clip-item &:nth-child(2n+1) {
background: blue;
}
#at-root .clip-item &:nth-child(2n+2) {
background: gray;
}
}
.group-right {
.clip-item & {
padding: 0;
}
#at-root .clip-item &:nth-child(2n+1) {
background: blue;
}
#at-root .clip-item &:nth-child(2n+2) {
background: gray;
}
}
Codepen demo (View compiled CSS)
Also, this CSS-tricks post may help:
The & doesn't allow you to selectively traverse up your nested
selector tree to a certain place and only use a small portion of the
compiled parent selector that you want to use.
By the way:
Even though it's working, I don't think it's the right way
Well actually, your SCSS is not currently producing the requested CSS.
I have to convert some SCSS files to LESS. For most part it is just case of changing $ with # but there are style that use the scss parent selector & that I don't know how to convert.
Here is example
// Sidebar
.sidebar {
.block {
&.newsletter {
.btn {
&:before {
background: transparent;
}
}
}
&.filter {
ol {
li {
a {
color: #blue;
&:before {
display: none;
}
}
}
}
}
.filter-options-title, .block-title {
color: #444;
padding-bottom: 10px;
font-size: 12px;
&:after {
color: #666;
}
}
}
}
How would I replace out those parent selectors to make it the same generated CSS?
The & parent selector is actually the same syntax in Less and SCSS!
From the Less Documentation on Parent Selectors:
The & operator
represents the parent selectors of a nested rule and is most commonly
used when applying a modifying class or pseudo-class to an existing
selector
In comparison, here's the SASS/ SCSS documentation on parent selectors for pseudo classes: http://sass-lang.com/documentation/Sass/Selector/Pseudo.html
So in the case of your code, it would be:
SCSS
$blue: blue;
.sidebar {
.block {
&.newsletter {
.btn {
&:before {
background: transparent;
}
}
}
&.filter {
ol li a {
color: $blue;
&:before {
display: none;
}
}
}
.filter-options-title, .block-title {
color: #444;
padding-bottom: 10px;
font-size: 12px;
&:after {
color: #666;
}
}
}
}
(try compiling/ validating here: https://www.sassmeister.com/)
LESS
#blue: blue;
.sidebar {
.block {
&.newsletter {
.btn {
&:before {
background: transparent;
}
}
}
&.filter {
ol li a {
color: #blue;
&:before {
display: none;
}
}
}
.filter-options-title, .block-title {
color: #444;
padding-bottom: 10px;
font-size: 12px;
&:after {
color: #666;
}
}
}
}
(try compiling/ validating here: http://winless.org/online-less-compiler)
As well as the official documentation, this article on CSS Tricks is helpful too: https://css-tricks.com/the-sass-ampersand
Hope that helps :)
I have a set of icons with different colors and each color is used with different status declared with CSS classes. For example, <span class="icon icon--app"><span> gives a gray app icon while <span class="icon icon--app icon__light icon__selected"><span> gives a white app icon.
The following code is written in SCSS.
span.icon {
display: inline-block;
width: 32px;
height: 32px;
&.icon--app {
background: url(../images/app_gray.png);
&.icon__selected {
background: url(../images/app.png);
}
&.icon__light {
background: url(../images/app_gray.png);
&.icon__selected {
background: url(../images/app_white.png);
}
}
}
&.icon--device {
background: url(../images/device_gray.png);
&.icon__selected {
background: url(../images/device.png);
}
&.icon__light {
background: url(../images/device_gray.png);
&.icon__selected {
background: url(../images/device_white.png);
}
}
}
}
The problem is, there's a long list of CSS rules as above, which shares much similarity for app and device and other icons. I wonder if I can simplify these CSS rules using SASS?
I think you can use mixin in Sass:
e.g.
#mixin icon($type) {
.icon-#{$type} {
background: url(../images/#{$type}_gray.png);
}
}
#include icon(app);
#include icon(device);
I created a mixin for you:
#mixin icon($type) {
&.icon--#{$type} {
background: url(../images/#{$type}_gray.png);
&.icon__selected {
background: url(../images/#{$type});
}
&.icon__light {
background: url(../images/#{$type});
&.icon__selected {
background: url(../images/#{$type}_white.png)
}
}
}
}
span.icon {
display: inline-block;
width: 32px;
height: 32px;
#include icon(app);
#include icon(device);
}