literally, parent selector doesn't work when using scss. This looks like the correct syntax, but why doesn't it work? If anyone knows please help me.
div {
h1 {
background: $green;
color: white;
}
&.title {
font-size: 30px;
color: purple;
}
}
Related
I want to use one CSS style for two classes with mixin, but when I use mixin the final result will be 2 classes with the same CSS.
I have shared my code example below:
#mixin btnhover {
background-color: $bg-cl-blc;
color: $txt-cl-ff;
}
.btn-base {
font-size: 15px;
&:hover {
#include btnhover;
}
}
.btn-otln {
font-size: 15px;
&:hover {
#include btnhover;
}
}
**OUTPUT CSS**
.btn-base:hover {
background-color: #000;
color: #fff;
}
.btn-otln:hover {
background-color: #000;
color: #fff;
}
This is how Sass works - it allows for better organisation of the code, but this code is then compiled, retaining functionality and not caring about other aspects.
If you really care about how the output code is structured, I would suggest to create a separate style for the classes with the hover effect:
#mixin btnhover {
background-color: #000;
color: #fff;
}
.btn-base {
font-size: 15px;
}
.btn-otln {
font-size: 15px;
}
.btn-base:hover,
.btn-otln:hover {
#include btnhover;
}
But in this approach, the use of mixin (and Sass) is questionable (in this exact case).
Generally, when you use Sass (or any other compiled language), you don't really care about the output CSS.
This won't be your answer, but I want to show you another way to make a mixin
#mixin btnhover($back, $color) {
background: $back;
color: $color;
}
When you use it, you can plug in the values
#include mixin btnhover($bg-cl-blc, $txt-cl-ff)
That way you can use the mixin over and over in different places with different values
Just discovered this recently myself, it's a concept called 'placeholders' in SASS syntax (see example below). I've done my best to apply it to your situation below....
Put this in your .scss file:
$bg-cl-blc: #ff211a;
$txt-cl-ff: #fff;
$btn-base-size: 15px;
%btnhover {
background-color: $bg-cl-blc;
color: $txt-cl-ff;
}
%btn-common {
font-size: $btn-base-size;
}
.btn-base {
#extend %btn-common;
&:hover {
#extend %btnhover;
}
}
.btn-otln {
#extend %btn-common;
&:hover {
#extend %btnhover;
}
}
CSS output will look like this
.btn-otln:hover, .btn-base:hover {
background-color: #ff211a;
color: #fff;
}
.btn-otln, .btn-base {
font-size: 15px;
}
Great article written up on this here:
https://dev.to/kemotiadev/are-sass-mixins-really-that-lightweight-and-what-are-placeholders-119i
I have a #mixin for paragraphs that looks like this:
#mixin paragraph {
color: $dark-700;
font-size: 14px;
line-height: 20px;
}
But I was wondering if it's possible to create a $paragraph variable with all those styles in an array or object to call it every time.
I'm not sure I understand your question correctly, but maybe placeholder selectors are what you are looking for:
%paragraph {
color: $dark-700;
font-size: 14px;
line-height: 20px;
}
.section-description {
#extend %paragraph;
}
.banner-text {
#extend %paragraph;
}
More info: https://sass-lang.com/documentation/style-rules/placeholder-selectors
After converting a lot of redundant crappy css files into scss files, I have a bunch of scss files. I'm pretty sure there is a lot of common css repeated among these files and I would like to extract this code.
As an example, let's say I have this block of scss code (let's call it block A) :
.test {
color: white;
.toto {
background: red;
font-size: 12px;
}
}
And another block (that we'll call block B) :
.test {
color: black;
.toto {
background: blue;
font-size: 12px;
text-align: center;
}
}
I want to be able to extract the following common scss code from block A and B :
.test {
.toto {
font-size: 12px;
}
}
It seems like a simple task to do, but with a large list of long scss files, it's really painful to do it manually. After searching for a while I didn't find any tool for that.
An intermediary solution could be to convert sass code to a multi-dimensionnal associative array and to process arrays to find intersections, but I could not find any simple solution to do that either, so any help would be appreciated.
There are a few approaches but in this instance, I would opt for a variable:
$base-font-size: 12px;
.test {
color: white;
.toto {
background: red;
font-size: $base-font-size;
}
}
.test {
color: black;
.toto {
background: blue;
font-size: $base-font-size;
text-align: center;
}
}
Or you could add a toto mixin with some defaults and use that:
#mixin toto($background: red, $text-align: left, $font-size: 12px) {
.toto {
background: $background;
text-align: $text-align;
font-size: $font-size;
}
}
.test {
color: white;
#include toto();
}
.test {
color: black;
#include toto(blue, center);
}
EDIT: or use extend:
.font-size-12 {
font-size: 12px;
}
.test {
color: white;
.toto {
#extend .font-size-12;
background: red;
}
}
.test {
color: black;
.toto {
#extend .font-size-12;
background: blue;
text-align: center;
}
}
So I write my css trough sass (scss). I use the ampersand mark (&) to target children. However, when I'm doing a hover state of a certain element I cannot the children anymore. Is there a way to do this?
To be clear: I want to target the children by their class, not by their element (eg: span).
HTML:
<div class="container">
<div class="container__inner">
<p class="container__inner__paragraph">
foo to the
<span class="container__inner__paragraph__highlight">
bar
</span>
</p>
</div>
</div>
SCSS
.container{
&__inner{
&__paragraph{
color: yellow;
background: black;
&:hover{
background: rgba(0,0,0, .3);
// This obviously works
span{
color: green;
}
// This obviously works too
.container__inner__paragraph__higlight{
color: green;
}
// This however doesn't work
&__highlight{
color: green;
}
}
&__highlight{
text-transform: uppercase;
font-weight: 700;
}
}
}
}
A codepen that hopefully explains my struggle:
http://codepen.io/anon/pen/GZqGPq
You can try this way:
.container__inner__paragraph {
&:hover &__highlight {
background: red!important;
}
}
But I'm not 100% sure what you want?
Thanks to #simey.me I found the proper solution. If you add an ampersand (&-mark) behind the &:hover you can target children classes in the ampersand way.
Codepen for the lovers! http://codepen.io/anon/pen/GZqGPq
The scss:
.container{
&__inner{
&__paragraph{
color: yellow;
background: black;
display: inline-block;
padding: 4rem;
&:hover &{
&__highlight{
color: green;
}
}
&__highlight{
text-transform: uppercase;
font-weight: 700;
}
}
}
}
You can use the class name as you are doing right now, your code is correct, you only have a typo error, in your scss you have .container__inner__paragraph__higlight but the correct class name is .container__inner__paragraph__highlight
http://codepen.io/anon/pen/yOJEdE
Try this if you need to style the highlight class when you hover on the paragraph tag:
.highlight & {color: blue;}
I have the following SCSS:
.btn {
color: #000;
#at-root {
a#{&} {
display: inline-block;
}
}
}
I'm expecting the following CSS:
.btn { color: #000; }
a.btn { display: inline-block; }
But when I compile it using gulp-sass, I get this instead:
.btn { color: #000; }
.btn a.btn { display: inline-block; }
This appears to be a bug with Libsass, which is what gulp-sass compiles with. If you want to get the correct results, you'll need to switch to using the Ruby compiler for Sass.