This seems like a basic question but I cant find the answer anywhere. How can I set both the normal and :hover styles for a link with SASS?
I want to control the default and hover styles for all links in one place and be able to pass this 'variable' (or whatever the correct word is) to different selectors throughout my CSS.
So similar to the code below but I want to control the default and hover style on the first line. So later if I wanted these links to have an :active style I could just add it once at the top of the page.
$primary-color: #333;
.some-class {
color: $primary-color;
}
.some-class-other-class {
color: $primary-color;
}
Solution for any selector:
&,
&:hover {
color: red;
}
E.g.
.my-class {
&,
&:hover {
color: red;
}
}
If you specifically only want to target all links:
a, a:hover {
color: red;
}
This works:
#mixin style-1 {
background: red;
&:hover {
background: $blue
}
}
.something {
#include style-1;
}
.something-else {
#include style-1;
}
.something-else-again {
#include style-1;
}
You can try:
a{
&:link, &:hover{
color: $primary-color;
}
&:active{
color: $other-color;
}
}
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 migrated from stylus to sass. In stylus, you can use ^[N] for partial quoting. How to do this in sass?
The Stylus feature Partial Reference has no direct equivalent in SCSS/SASS.
In SASS the & always contains the complete parent selector and there is no feature to retrieve only a part of it.
There are however...
the special #at-root to ditch the parent and...
a combined technique to capture the parent selector in a local-scoped variable and to use string interpolation to create a selector from it.
See what it does:
.foo {
.bar { color: red; }
#at-root .bar { display: block; }
}
renders to:
.foo .bar { color: red; }
.bar { display: block; }
and
.foo {
$block-class: &;
&__header {
font-size: medium;
#at-root #{$block-class}.large-header & { font-size: large; }
}
&__footer {
color: red;
}
}
renders to:
.foo__header {
font-size: medium;
}
.foo.large-header .foo__header {
font-size: large;
}
.foo__footer {
color: red;
}
A word of caution: I would not recommend to use such elaborate SCSS gymnastics to impress and confuse anyone who ever needs to read your code. Really, just keep it simple. Sometimes it is the right thing to do to just repeat a selector in the code. No harm done.
I'm attempting to set a bunch of background colours using a mixin. I'd also like to apply hover styling to these background colours IF the classes are assigned to a link element:
#mixin bg-color($color) {
background-color: $color;
&[ifthisisalink] {
&:hover {
background-color: darken($color, 10%);
}
}
}
.bg-blue {
#include bg-color(blue);
}
So if we have .bg-blue on a plain div, there is no hover color. But if .bg-blue is on a link, there is a hover color:
<div class="bg-blue">Hover on me and nothing happens.</div>
Hover on me and I go darker.
Is this possible in SASS?
You need #at-root:
#mixin bg-color($color) {
background-color: $color;
#at-root {
a#{&} {
&:hover {
background-color: darken($color, 10%);
}
}
}
}
.bg-blue {
#include bg-color(blue);
}
Is it possible to turn this:
.redstripe p:not(last-child) {
border-bottom:1px solid red;
}
Into a mixin so that I can apply it to any element and assign a child tag to it like:
#mixin redstripe (this.$children):not(last-child) {
border-bottom:1px solid red;
}
And then apply:
div {
#include redstripe(p);
}
What is the correct way to implement this?
Here's a general purpose mixin like you've described.
DEMO
#mixin not-last-child($selector) {
& #{$selector}:not(:last-child) {
#content;
}
}
We can pass it a selector string to use.
SCSS:
.thing {
#include not-last-child('p') {
color: red;
}
}
CSS:
.thing p:not(:last-child) {
color: red;
}
Sass Documentation
This is my first question and I tried to search first but couldn't find the answer.
I am using Web Essentials 4 in MS Visual Studio to compile LESS files to CSS.
It works fine, but recently I wanted to try using the &:extend functionality of LESS, but it won't compile correctly. It just ignores the &:extend part.
So I have a simple .less file, with this code:
#em-main {
nav ul {
&:extend(.inline);
background: blue;
}
.inline {
color: red;
}
}
And this is the output.
#em-main nav ul {
background: blue;
}
#em-main .inline {
color: red;
}
If I take out the #em-main, it compiles fine. Is this a limitation of LESS or is something wrong with my setup?
Thanks
I wonder if possible what you try to do. In fact you try to extend #em-main .inline which is not possible, see also: LESS: Extend a previously defined nested selector, https://github.com/less/less.js/issues/1597 and so on.
Possible use a mixin or a ruleset:
#set-color: {
color: red;
};
#em-main {
nav ul {
#set-color();
background: blue;
}
.inline {
#set-color();
}
}
** update **
the above compiles into:
#em-main nav ul {
color: red;
background: blue;
}
#em-main .inline {
color: red;
}
But now #harry wrotes:
I think using :extend(#em-main .inline) (full selector path) would
also work.
And he is right (of course);
#em-main {
nav ul {
&:extend(#em-main .inline);
background: blue;
}
.inline {
color: red;
}
}
compiles into
#em-main nav ul {
background: blue;
}
#em-main .inline,
#em-main nav ul {
color: red;
}