.a, .b
{
color: red;
$x: &;
#if $x == '.b'
{
color: $x;
}
}
http://sassmeister.com/gist/ad7fa7f3a431f3e2d4e0
Not work, why? Could you help me someone with some fix?
Because $x is equal to the full selector (.a, .b), never to .a or .b.
What you're trying to achieve would be:
.a, .b {
color: red;
&.b {
color: blue;
}
}
But it will generate this code (working, but not optimized):
.a, .b {
color: red;
}
.a.b, .b.b {
color: blue;
}
Related
I'm working on my portfolio and need to switch between to stylings states of an element. Currently, I'm trying to make it work on the following example. In this particular case, my goal is to click the button and switch between green and red background with every click. But something won't work. I can switch from green to red, but not from red to green. What am I missing?
<button id="button">Toggle</button>
<div class="test" id="test"></div>
.test {
width: 100px;
height: 100px;
background: green;
margin-top: 20px;
}
var btn = document.getElementById("button");
var test = document.getElementById("test");
btn.onclick = function() {
if (test.style.background = "green") {test.style.background = "red";} else {test.style.background = "green";}};
Codepen Demo https://codepen.io/yanniksturm/pen/rNVmqJe
Thanks a lot!
In if condition there should be double (==) equal sign and also check by backgroundColor instead of background because of some browsers has more properties with background like background: green none repeat scroll 0% 0%; so condition will not execute.
I recommend use backgroundColor instead of background.
var btn = document.getElementById("button");
var test = document.getElementById("test");
btn.onclick = function() {
if (test.style.backgroundColor == "red") {
test.style.backgroundColor = "green";}
else {
test.style.backgroundColor = "red";
}
}
.test {
width: 100px;
height: 100px;
background: green;
margin-top: 20px;
}
<button id="button">Toggle</button>
<div class="test" id="test"></div>
How to create a print stylesheet which can override the dynamic styles created by css modules ?
Using CSS modules, classnames render with unique names like so :
<button class="buttons_style_primary-button__3T" type="submit"> Submit</button>
In my print stylesheet I have the following, which has no effect :
#media print {
button {
display: none;
}
}
I can get it to work by adding !important to the button style, but I will have many print styles and I don't want to do this for each style attribute. Is there an alternative ?
I'm also using React if there happens to be a React specific approach here.
Wound up doing the following :
Use !important for globals that need to override local values:
/* app.css */
#media print {
#page {
margin: 1cm;
}
* {
color: #000 !important;
}
}
Put component specific overrides into a style.css for each component:
/* style.css */
.my-class {
composes: rounded-corners from 'shared/ui.css';
margin: 0 0 60px 0;
background-color: white;
}
#media print {
.my-class {
page-break-inside: avoid;
font-size: 10px;
}
}
/* my-component.jsx */
import style from './style.css';
const MyComponent = () => {
return (
<div className={style.myClass}>
....
</Link>
);
};
There's also a third option which I haven't really tried.
You should be able to apply both the top-level override classname with your local classname using the classNames library:
import app from 'app.css';
import styles from './style.ss'
const MyComponent = () => {
return (
<div className={classNames(style.local, app.global)}>
....
</Link>
);
};
( this third option is just off the top of my head, I don't know if it will work )
Instead of this:
#media print {
.button {
display: none;
}
}
Try this:
.button{
#media print {
display: none;
}
}
I would like to add a conditional hover state to my LESS mixin.
I've tried the following but it returns an error:
.foo(#hoverstate:false){
color:red;
&:hover when (#hoverstate = true){
color:blue;
}
}
What is the correct syntax for this?
dotless does not support "CSS guard" construction so you'll need a mixin to put the guard there, e.g.:
.foo(#hoverstate: false) {
color: red;
.-(); .-() when (#hoverstate = true) {
&:hover {
color: blue;
}
}
}
that can be simplified to:
.foo(...) {
color: red;
}
.foo(true) {
&:hover {
color: blue;
}
}
(Note I did not test this code with dotless so it's possible you would need to correct other minor incompatibilities)
I want to define a list of text input selectors in Sass such as:
[type="text"],
[type="color"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="range"],
[type="search"],
[type="tel"],
[type="time"],
[type="url"],
[type="week"],
and then to use that list around my sass code. How can I set those as a variable and then to use them as above elsewhere?
Lists are worth learning about in SASS.
Addressing your need, let's define your list:
$text-input-selectors: "[type='text']" "[type='color']" "[type='date']"
"[type='datetime']" "[type='datetime-local']"
"[type='email']" "[type='month']" "[type='number']"
"[type='range']" "[type='search']" "[type='tel']"
"[type='time']" "[type='url']" "[type='week']";
We can run #each over it and get individual selectors:
#each $selector in $text-input-selectors {
#{$selector} {
font-weight: normal;
}
}
Result:
[type='text'] {
font-weight: normal;
}
[type='color'] {
font-weight: normal;
}
[type='date'] {
font-weight: normal;
}
[type='datetime'] {
font-weight: normal;
}
[type='datetime-local'] {
font-weight: normal;
}
[type='email'] {
font-weight: normal;
}
[type='month'] {
font-weight: normal;
}
[type='number'] {
font-weight: normal;
}
[type='range'] {
font-weight: normal;
}
[type='search'] {
font-weight: normal;
}
[type='tel'] {
font-weight: normal;
}
[type='time'] {
font-weight: normal;
}
[type='url'] {
font-weight: normal;
}
[type='week'] {
font-weight: normal;
}
Or we can run code that concatenates it to a comma separated string:
$all-selectors: null;
#each $item in $text-input-selectors {
$all-selectors: $all-selectors, unquote(#{$item});
}
#{$all-selectors} {
color: red;
}
Result:
[type='text'], [type='color'], [type='date'], [type='datetime'], [type='datetime-local'], [type='email'], [type='month'], [type='number'], [type='range'], [type='search'], [type='tel'], [type='time'], [type='url'], [type='week'] {
color: red;
}
I highly recommend Sassmeister for experimenting with SASS code. Can choose version to some extent, and use either SASS or SCSS.
You can use the #each directive:
$types: text, color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week;
#each $prop in $types {
input[type="#{$prop}"] {
padding: 0;
// other meaningful properties
}
}
SassMeister demo
As mentioned by #cimmanon, it is true that there will be a lot of selectors which will make the css less readable. It is possible to use the trick from #artlung and combine all selectors into one:
$joined-selector: null;
#each $prop in $types {
$elem: "input[type='#{$prop}']";
$joined-selector: $joined-selector, $elem;
}
#{$joined-selector} {
padding: 0;
}
Updated SassMeister demo
That sass code looks rather complex to me. I prefer keeping sass simple and readable and sacrificing readability of the generated css file. As I developer I only maintain sass code, not the css.
I wonder if there is a better solution (or if my solution is even right), to create if statement like behavior with variables and guards.
Goal:
If variable is set to true, compile the code (works)
If variable is set to anything else, ignore the code (default, works)
Keep initial code position (dosnt work, is merged wherever .responsive (#responsive); is called)
My Code:
#responsive: true;
.responsive(true){
a {
color: red;
}
}
.responsive(true) {
b {
color: blue;
}
}
.responsive (#responsive);
I am not completely sure I understand what you say doesn't work.
But if I do ... there are two things connected to this that you have to bare in mind in LESS:
scope matters - not order (you can define a variable/mixin after you call it, as long as you deine it in the same scope or a scope that is accessible)
the mixin gets rendered where you call it not where you define it
that said - if you really want to use the same guard in multiple places to do different things, you would need to define multiple mixins (each place would get another mixin), and if you want to render it in the place you define it, you would just need to call it immediately after (or before) you define it. Something like this:
#responsive: true;
test1 {
color:green;
}
.a() when (#responsive){
a {
color: red;
}
}
.a;
test2 {
color:green;
}
.b() when (#responsive) {
b {
color: blue;
}
}
.b;
the output will be:
test1 {
color: green;
}
a {
color: red;
}
test2 {
color: green;
}
b {
color: blue;
}
So the mixins .a() and .b() are returned if #responsive is set to true, if not you get:
test1 {
color: green;
}
test2 {
color: green;
}
I hope this is kinda what you wanted.
I ended up using this:
#responsive: true;
section.content {
.responsive () when (#responsive) {
#media (min-width: 768px) {
float: right;
width: 80%;
}
#media (min-width: 980px) {
width: 60%;
}
}
.responsive;
}
aside.left {
.responsive () when (#responsive) {
#media (min-width: 768px) {
float: left;
width: 20%;
}
}
.responsive;
}