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;
}
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 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.
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;
}
}
I'm working on an SCSS stylesheet, and I have a rule that looks something like this:
.footer-link-row {
color: red;
ul& {
padding: 0;
}
}
I want the ul& line compile to the selector ul.footer-link-row. However, this selector returns a compiler error, and using a &ul compiles to .footer-link-row ul. What's the correct way to select something like this?
--Added--
To clarify, the eventual CSS I want out of this is:
.footer-link-row {
color: red;
}
ul.footer-link-row {
padding: 0;
}
You want something like the following:
ul {
padding: 0;
.footer-link-row {
color: red;
}
}
The ampersand is used to require that both selectors match
a { text-decoration: none;
&:hover { border-width: 1px }
}
// compiles to
a {
text-decoration: none;
}
a:hover {
border-width: 1px;
}
If you want the ul.footer-link-row try
ul {
&.footer-link-row {
padding: 0;
}
.footer-link-row {
color: red;
}
}
Your clarification indicates that you need two scopes.
ul {
&.footer-link-row {
padding: 0;
}
}
.footer-link-row {
color: red;
}