I have this variable:
$gutter: 10;
I want to use it in a selector like so SCSS:
.grid+$gutter {
background: red;
}
so the output becomes CSS:
.grid10 {
background: red;
}
But this doesn't work. Is it possible?
$gutter: 10;
.grid#{$gutter} {
background: red;
}
If used in a string for example in a url:
background: url('/ui/all/fonts/#{$filename}.woff')
From the Sass Reference on "Interpolation":
You can also use SassScript variables in selectors and property names using #{} interpolation syntax:
$gutter: 10;
.grid#{$gutter} {
background: red;
}
Furthermore, the #each directive is not needed to make interpolation work, and as your $gutter only contains one value, there's no need for a loop.
If you had multiple values to create rules for, you could then use a Sass list and #each:
$grid: 10, 40, 120, 240;
#each $i in $grid {
.g#{$i}{
width: #{$i}px;
}
}
...to generate the following output:
.g10 { width: 10px; }
.g40 { width: 40px; }
.g120 { width: 120px; }
.g240 { width: 240px; }
Here are some more examples..
Here is the solution
$gutter: 10;
#each $i in $gutter {
.g#{$i}{
background: red;
}
}
if it would be a vendor prefix, in my case the mixin did not compile. So I used this example
#mixin range-thumb()
-webkit-appearance: none;
border: 1px solid #000000;
height: 36px;
width: 16px;
border-radius: 3px;
background: #ffffff;
cursor: pointer;
margin-top: -14px;
box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
input[type=range]
&::-webkit-slider-thumb
#include range-thumb()
&::-moz-range-thumb
#include range-thumb()
&::-ms-thumb
#include range-thumb()
Related
UPDATE: working CodePen with css variable solution.
UPDATE: CSS-Tricks explains that css variables cascade, and the browser repaints when they change. Preprocessor variables don't have these features.
Difficult to put this in clear terms... is it possible in Sass to overwrite a global variable with a local variable after said global variable has been included via a mixin?
I.e.: I'm looking to set a default value for a global variable $color, and set values for specific color variables like $red: red; and $blue: blue;. Then use global $color inside a mixin, then #include that mixin inside .class {}, then overwrite the value of global $color with local variables inside parent combinators like .class { &.one { $color: $red; } &.two { $color: $blue; }}
The original value of global $color is rendering, rather than changing to the values of the local variables. I researched !default and !global but didn't find much that helped in my case.
Thanks!
Sounds a job for CSS variable:
body {
padding: 1rem;
width: 1000px;
margin: 0 auto;
}
$color: #000000;
$blue: #0087ff;
$red: #ff2828;
$yellow: #ffe607;
#mixin item {
display: inline-block;
margin: 0 1rem 1rem 0;
width: 8rem;
height: 8rem;
border-radius: 4px;
background-color: var(--c,$color);
}
#mixin circle {
border-radius: 50%;
}
.item {
#include item;
&.one {
--c: #{$blue};
}
&.two {
--c: #{$red};
#include circle;
}
&.three {
--c: #{$yellow};
#include circle;
}
}
Full compiled code:
body {
padding: 1rem;
width: 1000px;
margin: 0 auto;
}
.item {
display: inline-block;
margin: 0 1rem 1rem 0;
width: 8rem;
height: 8rem;
border-radius: 4px;
background-color: var(--c, #000000);
}
.item.one {
--c: #0087ff;
}
.item.two {
--c: #ff2828;
border-radius: 50%;
}
.item.three {
--c: #ffe607;
border-radius: 50%;
}
<body>
<div class="item one"></div> <!-- blue square -->
<div class="item two"></div> <!-- red circle -->
<div class="item three"></div> <!-- yellow circle -->
</body>
I think it doesn't work because the moment your define background-color the value of $color was black so all shapes are black. In the next step the compiler reads the new value of $color in different child classes but this values were never reasigned to background-color. It would work if you reassign it like so:
body {
padding: 1rem;
width: 1000px;
margin: 0 auto;
}
$color: #000000;
$blue: #0087ff;
$red: #ff2828;
$yellow: #ffe607;
#mixin item {
display: inline-block;
margin: 0 1rem 1rem 0;
width: 8rem;
height: 8rem;
border-radius: 4px;
background-color: $color;
}
#mixin circle {
border-radius: 50%;
}
.item {
#include item;
background-color:$color;
&.one {
$color: $blue ;
background-color: $color;
}
&.two {
$color: $red;
background-color: $color;
#include circle;
}
&.three {
$color: $yellow;
background-color: $color;
#include circle;
}
}
or do it like Temani
My idea is that I would like to write silent classes for input[type=text], input[type="password"] and input[type=submit]. I would then #extend them in a mixin by passing hem through as a variable.
My parser is throwing this error;
Syntax error: Invalid CSS after " #extend ": expected selector_sequence, was "$type;"
Here is my code;
%text {
(text styling)
}
%password {
#extend %text;
}
%submit {
padding: .5em;
background-color: $button-color;
border: none;
cursor: pointer;
color: white;
border: 1px solid darken($button-color, 20%);
&:hover {
#include transition;
background-color: darken($button-color, 10%);
}
}
#mixin input($type) {
margin-bottom: 1.5em;
margin-left: 0;
outline: none;
#extend $type;
}
Any help would be appreciated
try using variables interpolation
#extend #{$type};
Further information on SASS Reference
While Fabrizio's answer is formally correct, consider not going that way.
There's a great rule in programming of any kind: "keep it simple, stupid!" aka KISS.
Though SASS provides such advanced facilities as extends and mixins, it doesn't mean that you should use them as much as possible. Don't make your code complicated when you don't have to!
This code does exactly what you want: applying styles to input[...] selectors:
input {
margin-bottom: 1.5em;
margin-left: 0;
outline: none;
}
input[type=text], input[type=password] {
font-family: Verdana; // Text styles
}
input[type=submit] {
padding: .5em;
background-color: $button-color;
border: none;
cursor: pointer;
color: white;
border: 1px solid darken($button-color, 20%);
&:hover {
#include transition;
background-color: darken($button-color, 10%);
}
}
If you want to apply styles to custom classes/ids, consider this approach:
/////////////////
// Silent classes
/////////////////
%input {
margin-bottom: 1.5em;
margin-left: 0;
outline: none;
}
%text {
#extend %input;
font-family: Verdana;
}
%password {
#extend %text;
}
%submit {
#extend %input;
padding: .5em;
background-color: $button-color;
border: none;
cursor: pointer;
color: white;
border: 1px solid darken($button-color, 20%);
&:hover {
#include transition;
background-color: darken($button-color, 10%);
}
}
///////////////////////////
// Applying silent classes:
///////////////////////////
.some .weirdly .nested input[type=text] {
#extend %text;
}
.password {
#extend %password;
}
#the-submit-button {
#extend %submit;
}
Demo: http://sassbin.com/gist/5956909/
I've set of styles which I want to use in multiple places in my CSS.
Here is my function:
#function form-element-dimension{
height: 34px;
padding: 3px 10px;
line-height: 18px;
border: solid 1px #e2e7eb;
}
I will use this function anywhere in my .scss page like below:
.dataTables_length{
select{
form-element-dimension();
}
}
---
---
.contact-form-style{
input{
form-element-dimension();
}
}
How to do this in COMPASS SASS framework?
Although it's really not the best way to do what you're doing, this is how you'd achieve it with sass;
#mixin form-element-dimension {
height: 34px;
padding: 3px 10px;
line-height: 18px;
border: solid 1px #e2e7eb;
}
.dataTables_length {
select {
#include form-element-dimension();
}
}
.contact-form-style {
input {
#include form-element-dimension();
}
}
My idea is that I would like to write silent classes for input[type=text], input[type="password"] and input[type=submit]. I would then #extend them in a mixin by passing hem through as a variable.
My parser is throwing this error;
Syntax error: Invalid CSS after " #extend ": expected selector_sequence, was "$type;"
Here is my code;
%text {
(text styling)
}
%password {
#extend %text;
}
%submit {
padding: .5em;
background-color: $button-color;
border: none;
cursor: pointer;
color: white;
border: 1px solid darken($button-color, 20%);
&:hover {
#include transition;
background-color: darken($button-color, 10%);
}
}
#mixin input($type) {
margin-bottom: 1.5em;
margin-left: 0;
outline: none;
#extend $type;
}
Any help would be appreciated
try using variables interpolation
#extend #{$type};
Further information on SASS Reference
While Fabrizio's answer is formally correct, consider not going that way.
There's a great rule in programming of any kind: "keep it simple, stupid!" aka KISS.
Though SASS provides such advanced facilities as extends and mixins, it doesn't mean that you should use them as much as possible. Don't make your code complicated when you don't have to!
This code does exactly what you want: applying styles to input[...] selectors:
input {
margin-bottom: 1.5em;
margin-left: 0;
outline: none;
}
input[type=text], input[type=password] {
font-family: Verdana; // Text styles
}
input[type=submit] {
padding: .5em;
background-color: $button-color;
border: none;
cursor: pointer;
color: white;
border: 1px solid darken($button-color, 20%);
&:hover {
#include transition;
background-color: darken($button-color, 10%);
}
}
If you want to apply styles to custom classes/ids, consider this approach:
/////////////////
// Silent classes
/////////////////
%input {
margin-bottom: 1.5em;
margin-left: 0;
outline: none;
}
%text {
#extend %input;
font-family: Verdana;
}
%password {
#extend %text;
}
%submit {
#extend %input;
padding: .5em;
background-color: $button-color;
border: none;
cursor: pointer;
color: white;
border: 1px solid darken($button-color, 20%);
&:hover {
#include transition;
background-color: darken($button-color, 10%);
}
}
///////////////////////////
// Applying silent classes:
///////////////////////////
.some .weirdly .nested input[type=text] {
#extend %text;
}
.password {
#extend %password;
}
#the-submit-button {
#extend %submit;
}
Demo: http://sassbin.com/gist/5956909/
I'm trying to clean up my CSS to be cleaner by using SCSS.
Standard CSS:
.dark-hr,
.light-hr {
width: 100%;
height: 1px;
margin: 15px 0px;
}
.dark-hr {
background-color: #595959;
}
.light-hr {
background-color: #cccccc;
}
vs SCSS:
.generic-hr {
width: 100%;
height: 1px;
margin: 15px 0px;
}
.dark-hr {
#extend .generic-hr;
background-color: #595959;
}
.light-hr {
#extend .generic-hr;
background-color: #cccccc;
}
Is there any way to avoid creating the 'generic-hr' class that won't be used? I was hoping that some kind of nest would work well.
In this scenario the CSS is definitely way cleaner and more readable than SCSS.
Ideally I would need this to work in SCSS:
.## {
// base class that is not outputted
.dark-hr {
//attributes the extend the base class '.##'
}
.light-hr {
//attributes the extend the base class '.##'
}
}
OUTPUT:
.dark-hr, .light-hr {
//shared attributes defined by '.##'
}
.dark-hr {
// overrides
}
.light-hr {
// overrides
}
What you're wanting to use is an extend class (I call them "silent classes"), which is signified by using a % instead of a ..
hr%base {
width: 100%;
height: 1px;
margin: 15px 0px;
}
.dark-hr {
#extend hr%base;
background-color: #595959;
}
.light-hr {
#extend hr%base;
background-color: #cccccc;
}
Wouldn't you normally do something like this:
.generic-hr {
width: 100%;
height: 1px;
margin: 15px 0px;
&.dark {
background-color: #595959;
}
&.light {
background-color: #cccccc;
}
}
My pattern for this kind of thing is a mixin:
#mixin generic-hr {
width: 100%;
height: 1px;
margin: 15px 0px;
}
.dark-hr {
#include generic-hr;
background-color: #595959;
}
.light-hr {
#include generic-hr;
background-color: #cccccc;
}
This has the added advantage of being extensible, so if you find yourself needing several selectors with really similar properties you can add in variables:
#mixin generic-hr($background-color: transparent) {
width: 100%;
height: 1px;
margin: 15px 0px;
background-color: $background-color;
}
.dark-hr {
#include generic-hr(#595959);
}
.light-hr {
#include generic-hr(#cccccc);
}
.medium-hr {
#include generic-hr(#818181);
}