I tried to do the following, but it does not work:
* {
&::selection { text-decoration: underline; }
}
That's the way I do it:
// define it
#mixin selection {
::-moz-selection { #content; }
::selection { #content; }
}
// use it
#include selection {
color: white;
background: black;
}
Update
I recommend to just use ::selection {} with autoprefixer instead of a mixin. This will make your code thinner and your brain lighter :)
In this case, autoprefixer will transform this:
::selection {
color: white;
background: black;
}
...(depending on your target browsers/configuration) into something like that:
::-moz-selection {
color: white;
background: black;
}
::selection {
color: white;
background: black;
}
Mixins work with pseudo element selectors ;) see my mixin:
$prefixes: ("-moz-", "");
#mixin selection($color, $background) {
#each $prefix in $prefixes {
::#{$prefix}selection {
color: $color;
background: $background;
}
}
}
how to use:
#include selection(white, black);
of course you can make it far more flexible, but it was sufficient for me ;)
While the ::selection pseudo-element was still in the draft spec, text-decoration was not stated as one of the allowed style properties. Given that browsers implement it anyway, they should be following the rules according to that document, disallowing text-decoration as such.
That said, there's nothing wrong with your selector, although it's worth noting that Firefox uses the vendor-prefixed version ::-moz-selection instead. You'd have to repeat the rule to support that browser, along with Chrome, Safari and Opera (see this answer for info).
So in SCSS, you'd do this:
* {
&::-moz-selection { /* Style any selection */ }
&::selection { /* Style any selection */ }
}
You might be able to reduce that using mixins, but I'm not sure if mixins work with pseudo-element selectors.
Great mixin, I have changed to work inside a rule by adding "&", it works better for me. I have also added a empty prefix to get the rule with no prefix.
#mixin selection($color, $background) {
$prefixes: ("-moz-", "-webkit-", "-o-", "-ms-", "");
#each $prefix in $prefixes {
&::#{$prefix}selection {
color: $color;
background: $background;
}
}
}
With compass you could do it like the following:
#import "compass/css3/selection";
#include selection($highlightBackground, $highlightColor)
Related
Imagine a set of rules like the ones shown below:
span, div { color: red; }
span { background: white; }
div { background: black; }
Is it possible to wrap them under 1 SCSS rule? Something in the form of:
span, div {
& { color: red; }
&:not(div) { background: white;}
&:not(span) { background: black; }
}
Unfortunately an approach like this could very easily get quite large. So I'm hoping for an SCSS implementation of the code shown at the top but without the use of :not(<every other selector>).
Preferably something looking like (invalid code):
span, div {
& { color: red; }
&(span) { background: white;}
&(span) { background: black; }
}
I don't think that it is possible to do what you want this way (but I may be wrong).
The code below achieve the result you are looking for but uses a map, a #mixin and #extend instead of a single selector. Maybe it's a bit too complex for want you want to achieve but I hope it can help:
#mixin setSelectors($elements) {
%commonProperties {
#content;
}
#each $selector, $properties in $elements {
#{$selector} {
#extend %commonProperties;
#each $property, $value in $properties {
#{$property}: #{$value};
}
}
}
}
#include setSelectors((
span: (background: white),
div: (background: black)
)) {
color: red; // Common properties
}
Will return:
div, span { color: red; }
span { background: white; }
div { background: black; }
The first argument is a map containing all your selectors and their specific properties. The #content of the #mixin contains shared properties.
If you need to add a selector that doesn't have any specific property, you can add it to the map with null as key. Such as:
#include setSelectors((
span: (background: white),
div: (background: black),
i: null
)) {
color: red;
}
However, this solution doesn't allow nested selectors so I believe that separating the selectors is the best way to go.
I'm searching a way to use a particular color depending on a class on the body tag.
I have a main scss file like this
// variables.scss
$bg-main: white;
$color-first: red;
$color-second: green;
And in my other files, I use the colors
// content.scss
.content {
.some-selector: {
// some styles
color: $color-second;
}
a:hover {
// some styles
color: $color-second;
}
}
// and same goes for menu.scss etc.
Now I have a dynamic class on the body, that changes depending on the current selected menu. I would like $color-second to be different for each body classes, and I don't know how to do that. The only solution I found was to move all the $color-second from each files into one single file, like this:
.body-1 {
.content a:hover, .content .some-selector {
color: green;
}
}
.body-2 {
.content a:hover, .content .some-selector {
color: blue;
}
}
.body-1 {
.content a:hover, .content .some-selector {
color: black;
}
}
So I don't need to write the color in each files. This works well, but if I need to set this $color-second to some other selector, I need to put that in this big file.
Is this possible to do this an other way?
I already checked these answers, but it didn't helped me much:
SASS set variable depending on CSS class
Creating or referencing variables dynamically in Sass
Merge string and variable to a variable with SASS
There are multiple ways to do this. The most obvious two which come to mind are mixins and loops:
Mixins
Just put everything you want into a single mixin, and then use it for every body class:
#mixin colored-content($color) {
.content a:hover, .content .some-selector {
color: $color;
}
/* Any other rules which use $color here */
}
.body-1 {
#include colored-content(green);
}
.body-2 {
#include colored-content('#FF0000');
}
.body-3 {
#include colored-content(darken(red, 20));
}
You can extend this example with any number of arguments (for example, $textColor and $bgColor), conditions or rules.
With this approach you will not have SCSS code repetitions, and any updates will be introduced easily.
Loop
Another way is to use a simple loop:
$body_themes: (
"body-1": green,
"body-2": #FF0000,
"body-3": darken(red, 2)
);
#each $body_class, $color in $body_themes {
.#{$body_class} {
.content a:hover, .content .some-selector {
color: $color;
}
/* Any other rules which use $color here */
}
}
It is even shorter, but imho it is less readable.
P.S. It is possible to combine mixins and loops, by the way :)
For a responsive layout I am trying to switch the color with the background-color and vice versa on defined occasions.
What's the cleanest way to swap the values of the color and background-color when using sass? Pure CSS doesn't work in this case, does it?
Something like
p {
#media … {
[swap currentTextColor and currentBgColor]
}
}
You could create a mixin:
#mixin swapColors($textColor, $bgColor) {
background-color: $bgColor;
color: $textColor;
#media ... {
background-color: $textColor;
color: $bgColor;
}
}
.tree {
#include swapMobile(red, black);
}
Besides from that i'm not aware of anything built in that could do such a thing.
In SCSS i can do so:
and then
$selector-active: "&:hover, &:focus, &:active";
.class {
color: red;
#{$selector-active} {
color: green;
}
}
And its working.
How can i do this in LESS?
Hmm, interesting. Currently LESS does not expand its "&" within a selector interpolation, i.e. the straight-forward conversion DOES NOT work:
#selector-active: &:hover, &:focus, &:active;
.class {
color: red;
#{selector-active} {
color: green;
}
}
So you'll need some more tricky code... Using a callback/hook technique for example:
.selector-active() {
&:hover, &:focus, &:active {
.selector-active-properties();
}
}
.class {
color: red;
.selector-active();
.selector-active-properties() {
color: green;
}
}
You can get it even shorter:
.selector-active() {&:hover, &:focus, &:active {.-}}
.class {
color: red;
.selector-active;.-() {
color: green;
}
}
However there's important thing to remember when using hackish names for a hook/callback mixins.
If at some point you need another mixin with the same technique then you'll also need another name
for its callback (not the one you used for .selector-active()). Otherwise you get into problems if you try to use both "utilities" in the same scope. More over if you define some .inside() or .-() in the global scope they will override those coming from within .class and the trick becomes broken...
In other words, using "long/descriptive/unique" hook/callback names are just "safer" in a long run.
Btw. there's also a shorter syntax for the "hover specialization":
// same as .selector-active(#arg) when (#arg = hover):
.selector-active(hover) {
&:hover {
.inside();
}
}
I liked #Max nice solution. And this give me a way to move further. So i did a tweek with words for my self.
.selector-active() {
&:hover, &:focus, &:active {
.inside();
}
}
.selector-active(#type) when (#type = hover) {
&:hover {
.inside();
}
}
In use:
.class {
color: red;
.selector-active(); .inside() {
color: red;
}
}
I also tried to work with classes. LESS is prety owkward in this stuff, in 1.4.1 i must use:
.smthElse(#string) {
&.class-#{string}-small,
&.class-#{string}-big,
&.class-#{string}-tall {
.inside();
}
}
in 1.3.1 i must to use:
(~".myclass_#{index}") {...
#see http://lesscss.org/
Enough compact, and could be in use. So i can still work with LESS :) yey.
P.S.: All above is for less.js v1.4.1
I’ve got a website that’s using a few different ‘main’ colors. The general HTML layout stays the same, only the colors change depending on the content.
I was wondering if I could set a color variable depending on the CSS selector. This way I can theme my website with a few variables and let Sass fill in the colors.
For example:
$color-1: #444;
$color-2: #555;
$color-3: #666;
$color-4: #777;
body.class-1 {
color-default: $color-1;
color-main: $color-2;
}
body.class-2 {
color-default: $color-3;
color-main: $color-4;
}
/* content CSS */
.content {
background: $color-default;
color: $color-main;
}
I was thinking of using a mixin for this, but I was wondering if there’s a better way to do this—with a function maybe? I’m not that great with Sass, so any help would be appreciated.
I think a mixin is the answer. (As I wrote, variables won’t work.)
#mixin content($color-default, $color-main) {
background: $color-default;
color: $color-main;
}
body.class-1 {
#include content(#444, #555);
}
body.class-2 {
#include content(#666, #777);
}
That SCSS compiles to this CSS:
body.class-1 {
background: #444444;
color: #555555; }
body.class-2 {
background: #666666;
color: #777777; }
If you wanted to group the color values together in your SCSS file, you could use variables in conjunction with the mixin:
$color-1: #444;
$color-2: #555;
$color-3: #666;
$color-4: #777;
body.class-1 {
#include content($color-1, $color-2);
}
body.class-2 {
#include content($color-3, $color-4);
}
as sass documentation explain nicely (https://sass-lang.com/documentation/variables):
Sass variables are all compiled away by Sass. CSS variables are included in the CSS output.
CSS variables can have different values for different elements, but Sass variables only have one value at a time.
Sass variables are imperative, which means if you use a variable and then change its value, the earlier use will stay the same. CSS variables are declarative, which means if you change the value, it’ll affect both earlier uses and later uses.
We may take advantage of that using a combination of sass and css variables to achieve what you want:
//theme colors
$red-cosmo: #e01019;
$green-cosmo: #00c398;
$primary-color: var(--primary-color);
body{
--primary-color: #{$red-cosmo};
}
body.univers-ride{
--primary-color: #{$green-cosmo};
}
So when I call my sass variable $primary-color, it will print as my css variable "var(--primary-color)" that will expand as $green-cosmo only if my body has the "univers-ride" class else it will be $red-cosmo the default color.
If you really want to get hacky you could also define your different color schemes in a single variable like $scheme1: class1 #333 #444, where the first value is always the name, and that is followed by all the colors in that scheme.
You can then use #each:
// Define your schemes with a name and colors
$scheme1: class1 #444 #555;
$scheme2: class2 #666 #777;
$scheme3: class4 #888 #999;
// Here are your color schemes
$schemes: $scheme1 $scheme2 $scheme3;
#each $scheme in $schemes {
// Here are the rules specific to the colors in the theme
body.#{nth($scheme, 1)} .content {
background-color: nth($scheme, 2);
color: nth($scheme, 3);
}
}
This will compile to:
body.class1 .content {
background-color: #444444;
color: #555555; }
body.class2 .content {
background-color: #666666;
color: #777777; }
body.class4 .content {
background-color: #888888;
color: #999999; }
Obviously if you don't want to combine body.class1 and .content in your selectors, you could just specify a mixin content($main, $default) and call it inside the #each using nth just like in the above code, but the point is you don't have to write out a rule for each of your classes.
EDIT There are lots of interesting answers on Creating or referencing variables dynamically in Sass and Merge string and variable to a variable with SASS.
You can also create a mixing that use the ampersand parent selector. http://codepen.io/juhov/pen/gbmbWJ
#mixin color {
body.blue & {
background: blue;
}
body.yellow & {
background: yellow;
}
}
UPDATE: its 2017 and variables does works!
#mixin word_font($page) {
#font-face {
font-family: p#{$page};
src: url('../../static/fonts/ttf/#{$page}.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.p#{$page} {
font-family: p#{$page};
}
}
// Loop and define css classes
#for $i from 1 through 604 {
#include word_font($i);
}
If you don't want to use a variable for each color, you can use one variable for all kinds of colors. In the mixin you can choose the right color with nth. For instance, if you write the index of the color as 1, then you get the first color in the color variable.
$colors: #444, #555, #666, #777;
#mixin content($color-default-num, $color-main-num) {
background: nth($colors, $color-default-num);
color: nth($colors, $color-main-num);
}
body.class-1 {
#include content(1, 2);
}
For me the definite answer to my problem was creating a map of maps and loopig through them as follows:
$pallettes: (
light-theme: (
container-color: red,
inner-color: blue,
),
dark-theme: (
container-color: black,
inner-color: gray,
),
);
#each $pallette, $content in $pallettes {
.main.#{$pallette} {
background-color: map-get($content, container-color);
.inner-div {
background-color: map-get($content, inner-color);
}
}
}
You can simply override your scss variables inside of the class wrapper:
$color1: red;
$color2: yellow;
header { background: $color1; }
.override-class {
$color1: green;
header { background: $color1; }
}
Seems to work for me.