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.
Related
Let's say I have the following css:
.foo {
color: red;
}
.bar {
color: blue;
}
I want the final css to look like this:
.scope.foo {
color: red;
}
.scope.bar {
color: blue;
}
But I want to be able to just paste it somewhat unaltered, like some boilerplate that works like this:
.scope-class {
??? {
// put css here
}
}
Example:
.scope {
& {
.foo {
color: red;
}
.bar {
color: blue;
}
}
}
Obviously this doesn't work, but is there any way of archiving something like this, but keeping the css inside unaltered? I don't want to modify every selector like &.foo &.bar...
You could simply nest these classes in SCSS like this:
.scope {
&.foo {
color: red;
}
&.bar {
color: blue;
}
}
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'm trying to group all my vendor-specific stuff into a placeholder selector like this:
%search-bar-placeholder {
color: red;
}
.search-bar::-webkit-input-placeholder {
#extend %search-bar-placeholder;
}
.search-bar:-moz-placeholder {
#extend %search-bar-placeholder;
}
.search-bar::-moz-placeholder {
#extend %search-bar-placeholder;
}
.search-bar:-ms-input-placeholder {
#extend %search-bar-placeholder;
}
And then it compiles to this:
.search-bar::-webkit-input-placeholder, .search-bar:-moz-placeholder, .search-bar::-moz-placeholder, .search-bar:-ms-input-placeholder {
color: red; }
How can I make sure Sass doesn't put all the selectors together ? Like this:
.search-bar::-webkit-input-placeholder {
color: red;
}
.search-bar:-moz-placeholder {
color: red;
}
.search-bar::-moz-placeholder {
color: red;
}
.search-bar:-ms-input-placeholder {
color: red;
}
When looking at Extend/Inheritance at sass-lang.com it seems that the selectors will always be comma separated. Even if you add another property, it will keep the shared properties in the comma separated list, and add another selector just for that overridden value.
The way I achieved what you want is by using a mixin. Though it's not really the purpose of a mixin, it does get the job done. Your style is still centralized and you can print it out in each selector using a one liner too.
#mixin placeholder-properties() {
color: red;
font-weight: bold;
}
.search-bar::-webkit-input-placeholder {
#include placeholder-properties();
}
.search-bar:-moz-placeholder {
#include placeholder-properties();
}
.search-bar::-moz-placeholder {
#include placeholder-properties();
}
.search-bar:-ms-input-placeholder {
#include placeholder-properties();
}
The result will the following.
.search-bar::-webkit-input-placeholder {
color: red;
font-weight: bold;
}
.search-bar:-moz-placeholder {
color: red;
font-weight: bold;
}
.search-bar::-moz-placeholder {
color: red;
font-weight: bold;
}
.search-bar:-ms-input-placeholder {
color: red;
font-weight: bold;
}
Here's a fiddle.
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 am trying to learn SASS. I got this snippet working but the generated css is awful in my opinion. I would like all this css to go in te same .container{ }. Not three different as shown below.
SASS:
.container{
#extend %clearfix;
#extend %text-truncate;
#include border-radius(10px);
}
Genereted css:
.container{
...clear fix
}
.container{
...text-truncate
}
.container{
...clear border-radius
}
What I want:
.container{
...clear fix
...text-truncat
...clear border-radius
}
This is the nature of #extend. If you change your extend classes to ordinary classes, the way it works the way it does is revealed.
#mixin my-mixin() {
padding: 1em;
}
.a {
color: red;
}
.b {
border: 1px solid;
}
.foo {
#extend .a;
#extend .b;
#include my-mixin();
}
Compiles to:
.a, .foo {
color: red;
}
.b, .foo {
border: 1px solid;
}
.foo {
padding: 1em;
}
Using an extend only class simply suppresses the name from the output. If your extend classes are not intended for reuse, then they are better suited as a mixin.
See also: https://codereview.stackexchange.com/a/27910/26722