This question already has answers here:
Modifying the middle of a selector in Sass (adding/removing classes, etc.)
(2 answers)
Closed 7 years ago.
I'd like to try and target the parent selector, plus also append some other selector to it.
What I want is
.first .second {
display: none;
}
.first.show .second {
display: block;
}
I have tried:
.first {
.second {
display: none;
.show& {
display: block;
}
}
as well as some others. That one seems most logical to me, but apparently you can't have an ampersand directly after a selector.
Any advice?
use
.first {
.second {
display: none;
}
&.show .second {
display: block;
}
}
Reference: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector
Related
I have imported the a less file inside the parent class e-js. In this some of them is inside the parent element and some of them is out side of the parent element. But I have to import the less file inside the e-js code as I explained below.
Less File
.e-js {
&.e-spreadsheet {
display: none
}
.e-wrapper & {
display: none;
}
.e-wrapper {
display: none;
}
}
Actual CSS
.e-js.e-spreadsheet {
display: none;
}
.e-wrapper .e-js {
display: none;
}
.e-js .e-wrapper {
display: none;
}
But I need the below code block, which omits the .e-js class. But in less file it is under e-js.
.e-wrapper {
display: none;
}
Is there any way to achieve this in less??
Trying to utlize the SASS Ampersand to get the following css output. It is not working when we use Ampersand with inside pesudo selector.
CSS
.test:first-child .test-image { display: block; }
SASS
.test {
&:first-child {
display: inline-block;
&-image {
display: block;
}
}
}
Above code basically cascading the -image with first-child.
This is because the ampersand is just concatenating the parent with the child. If you want the compiled CSS to look like your example you need to do this:
.test {
&:first-child &-image{
display: block;
}
}
If you are trying to achieve
.test:first-child .test-image { display: block; }
With your code it is getting compiled as this
.test:first-child-image {
display: block;
}
Instead ,you can simply write it as this .
.test:first-child {
.test-image {
display: block;
}
}
Hope it helps
It sounds like you have mistaken how the ampersand works in Sass. The ampersand is essentially a shorthand for writing each outer selector and then adding the selector after it onto the end. As .test-image is distinct from .test, you should specify it as follows.
.test {
&:first-child {
.test-image {
display: block;
}
}
}
Compiles to
.test:first-child .test-image {
display: block;
}
This question already has answers here:
Is it possible to reference a further parent than just the one above?
(3 answers)
Closed 8 years ago.
I want to write hover CSS to child elemeent but when parent element hover. So something like this:
Output I want in CSS:
.parent {
background:#f8f8f8;
}
.parent .child {
color:#000;
}
.parent:hover child {
backgruond:#000;
color:#fff;
}
What I'm using in SCSS:
.parent {
background:#f8f8f8;
.child {
color:#000;
//now I want to write css here for parent:hover. how can I do this?
}
}
It's not clear what you are trying to so but I think it's this
SASS
.parent {
background:#f8f8f8;
.child {
color:#000;
//now I want to write css here for parent:hover. how can I do this?
}
&:hover {
background:blue;
.child {
color:green;
}
}
}
CSS
.parent {
background: #f8f8f8;
}
.parent .child {
color: #000;
}
.parent:hover {
background: blue;
}
.parent:hover .child {
color: green;
}
Use SASSMeister.com for a testing tool
This question already has answers here:
Sass .scss: Nesting and multiple classes?
(6 answers)
Closed 8 years ago.
I'm trying to nest the various classes for the div elements in SASS. However, the resulting CSS does not work correctly. I've read through the documentation and nothing specifically mentions doing this so I'm not sure if I'm doing something wrong.
This SASS code:
div {
//various page elements
.page_header {
clear: both;
float: left;
color: $text-color-light;
background-color: #2C3E50;
}
.page_header_title {
clear: left;
float: left;
}
}
Results in the following CSS:
div .page_header {
clear: both;
float: left;
color: #ECF0F1;
background-color: #2C3E50; }
div .page_header_title {
clear: left;
float: left; }
When I first saw the resulting CSS I didn't see any reason why it wouldn't work. But I must be missing some knowledge about how CSS selectors work when they are separated like that because it has no effect on the page at all in Chrome. When I change it so the selectors are defined as div.page_header and div.page_header_title the CSS works properly, but I lose out on the nifty nesting functionality in SCSS.
Specifically I am developing an ASP.NET MVC5 website in Visual Studio 2013 Update 3 with Web Essentials 2013 for Update 3.
Am I doing something wrong or is this just not going to work?
I found the answer in one of the related questions off to the side after I posted: Sass .scss: Nesting and multiple classes?
I need to use the & related parent selector in the SCSS to make sure the selectors are concatenated together instead of separated.
This SASS code works:
div {
//various page elements
&.page_header {
clear: both;
float: left;
color: $text-color-light;
background-color: #2C3E50;
}
&.page_header_title {
clear: left;
float: left;
}
}
And results in the proper CSS output:
div.page_header {
clear: both;
float: left;
color: #ECF0F1;
background-color: #2C3E50; }
div.page_header_title {
clear: left;
float: left; }
More info can be found here: http://sass-lang.com/documentation/file.SASS_REFERENCE.html#parent-selector
In the following CSS taken from Twitter Bootstrap what does the ampersand (&) character mean?
.clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
}
&:after {
clear: both;
}
}
That's LESS, not CSS.
This syntax allows you to nest selector modifiers.
.clearfix {
&:before {
content: '';
}
}
Will compile to:
.clearfix:before {
content: '';
}
With the &, the nested selectors compile to .clearfix:before.
Without it, they compile to .clearfix :before.
A nested & selects the parent element in both SASS and LESS. It's not just for pseudo elements, it can be used with any kind of selector.
e.g.
h1 {
&.class {
}
}
is equivalent to:
h1.class {
}
Here is an SCSS/LESS example:
a {
text-decoration: underline;
#include padding(15px);
display: inline-block;
& img {
padding-left: 7px;
margin-top: -4px;
}
}
and its equivalent in CSS:
a {
text-decoration: underline;
#include padding(15px);
display: inline-block;
}
a img {
padding-left: 7px;
margin-top: -4px;
}
'&' is useful feature in both Sass and Less preprocessor. For nesting it's used. It is time saver when we compare to CSS.