Can I call a rule in the statement of another rule if CSS?. Something like this:
.myFirstRule
{
color: white;
}
.mySecondRule
{
width: 1000px;
myFirstRule;
}
Thank you.
Sorry about my english
In CSS, no you cannot. You can, however, apply styles to more than one selector at a time, such as:
.myFirstRule, .mySecondRule { color: white; }
Make sure each selector is separated with a comma, and you're good to go.
You can't do this in plain CSS but there are two solutions to your problem:
One: Use multiple selectors
<div class="myFirstRule mySecondRule"></div>
Two: Use SASS (or LESS, I suppose)
.myFirstRule {
color: white;
}
.mySecondRule {
width: 1000px;
.myFirstRule;
}
Alternatively, still with SASS, you could also do this with a mixin:
// Define here
#mixin reusableRule {
color: white;
}
.myFirstRule {
#include reusableRule;
}
.mySecondRule {
width: 1000px;
#include reusableRule;
}
No, you can't do that in pure CSS.. You can use a comma or , to apply a property to multiple selectors
Try this:
.myFirstRule, .mySecondRule {
color:white;
}
.mySecondRule
{
width: 1000px;
}
This is not possible with normal CSS, but you could try using SASS or LESS instead, which both compile to CSS. They allow this behavior through "mixins".
For example in LESS you could do:
.myFirstRule
{
color: white;
}
.mySecondRule
{
width: 1000px;
.myFirstRule;
}
which would generate CSS:
.myFirstRule
{
color: white;
}
.mySecondRule
{
width: 1000px;
color: white;
}
Related
I've got this Scss:
.top {
background-color: red;
&--checked {
background-color: yellow;
}
&--completed {
background-color: green;
}
}
Which compiles correctly to this:
.top {
background-color: red;
}
.top--checked {
background-color: yellow;
}
.top--completed {
background-color: green;
}
This is probably simple, but I'm trying to add an additional style for elements using both "top--checked" and "top--completed", but nested within top.
Something like this (in CSS):
.top--checked.top--completed {
background-color: blue;
}
I'm just not sure on how to achieve this, as chaining ampersands doesn't seem to produce the desired effect.
I think the best you can do would be something like this:
&--checked#{&}--completed {
background: blue;
}
I have a problem about "#extend" directive in SCSS.
.header {
.introduction-group {
text-align: center;
color: $white;
width: 70%;
}
.about {
&__description-group {
#extend .introduction-group;
This code block does not work. However,
.header {
&__introduction-group {
text-align: center;
color: $white;
width: 70%;
}
.about {
&__description-group {
#extend .header__introduction-group;
Second one works. Why?
Thank you.
As mentioned here nested classes won't be applied with #extend. Your second code block targets the specified class including the parent prefix. The first code block doesn't, it only targets the nested class.
I made a small codepen demo to illustrate the problem in a simple way. Make sure you checkout the Sass docs for a more comprehensive explanation!
<h1 class="wrong">Test style gone wrong</h1>
<h1 class="right">Test style gone right</h1>
.test {
.nested {
color: red;
}
&-nested {
color: red;
}
}
.wrong {
#extend .test;
#extend .nested;
}
.right {
#extend .test-nested;
}
Let's say I have this class:
.dark-theme {
background-color: black;
}
Can I refer to it within my css file? Something like ...
.some-class {
dark-theme;
padding: 5px;
}
a {
dark-theme;
color: white;
}
I have two solutions to accomplish this.
Solution 1:
Use css variables.
(Not really doing what you asked for but good to know if you're not using any preprocessors)
:root {
--color-bg-dark: black;
}
.some-class {
background-color: var(--color-bg-dark);
}
Solution 2:
Use sass which is a css preprocessor and put your reusable rules in a mixin.
#mixin applyDarkTheme {
background-color: black;
color: white;
// Some other rules
}
.some-class {
#include applyDarkTheme;
}
Question: With SCSS, can we specify two different .main selectors? Say I want another one with margin-top: 50px while also inheriting all other conditions
I have inherited some SCSS from someone else. I have the following SCSS structure:
.main {
margin-top: 74px;
ul.tabs {
position: relative;
li.tab {
/*The rest of nested structure*/
}
}
}
It continues to nest (unfortunately) for many layers.
I have some other options (splitting the structure in two) which is a simple fix. Just curious if there's something better.
Thanks!
You should use a mixin:
#mixin sharedStyles{
//shared nested styles go here
}
.parentA{
margin-top:74px;
#include sharedStyles;
}
.parentB{
margin-top: 50px;
#include sharedStyles;
}
Here is a gist that illustrates the concept:
https://gist.github.com/Ryan-Haines/ba10888d0828d394851d3da6063f70bb
I recommend using sassmeister for rapid prototyping:
https://www.sassmeister.com
If you use a placeholder, as long as one selector is not inside a media query, it should group them together in the CSS. Ie
%mainStyles {
border: 1px solid black;
}
.main1 {
margin-top: 75px;
#extend %mainStyles;
}
.main2 {
margin-top: 50px;
#extend %mainStyles;
}
Should generate
.main1, .main2 {
border: 1px solid black;
}
.main1 {
margin-top: 75px;
}
.main2 {
margin-top: 50px;
}
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