How can I simplify this SASS so that I only write .question-sector-answer the once? I need to apply different styles to the .question-sector-answer if the parent div has a class of both .question-row and .question-review. This currently seems unwieldy and I'm sure could be simplified and made more elegant:
.question-row {
border-bottom: 1px solid #ddd;
&.question-review {
.question-sector-answer {
padding-top: 30px;
}
}
.question-sector-answer {
padding: 15px;
}
}
I don't see how you can simplify it. You need to use 2 different styles for .question-sector-answer under different parents. Since it's impossible in css to access parent selector, you have no choice but do what you did (well, in SASS you kind of can - see below). Although my personal preference to always put more generic selectors on top and more specific ones to the bottom like so:
.question-row {
border-bottom: 1px solid #ddd;
.question-sector-answer {
padding: 15px;
}
&.question-review {
.question-sector-answer {
padding-top: 30px;
}
}
}
So in SASS you can access parent selector with & using it in certain way, but I don't think you can recreate your styles with it, the best I could come up with was this but it looks uglier than your original way of doing it, but you're welcome to play with it:
.question-row {
border-bottom: 1px solid #ddd;
}
.question-sector-answer
{
.question-row & {
padding-top: 15px;
}
.question-row.question-review &
{
padding: 30px;
}
}
You can read more about accessing parent selectors with & here
.question-row {
border-bottom: 1px solid #ddd;
}
.question-sector-answer {
padding: 15px;
.question-review & {
padding-top: 30px;
}
}
De-nesting here does two things: (1) creates terser, more flexible CSS and (2) allows the parent & selector. To compensate for the decrease in OOP, we slightly indent to imply subjugation. But in SASS you want to avoid the temptation to nest when not totally necessary, because nesting for OOP's sake tends to create more problems than it solves.
Related
I am trying to write Less in the context of React.
The following code works:
.rt-tr-group .rt-tr:hover .rt-td {
color: #fff;
&:first-child { /* notice single ampersand */
border-left: 2px solid #007aff;
}
}
This code also works:
.rt-tr-group .rt-tr:hover .rt-td {
color: #fff;
}
.rt-tr-group .rt-tr:hover .rt-td:first-child {
border-left: 2px solid #007aff;
}
However, the following code does not work:
.rt-tr-group .rt-tr:hover .rt-td {
color: #fff;
&&:first-child { /* notice double ampersand */
border-left: 2px solid #007aff;
}
}
I have seen the double ampersand used elsewhere in the codebase, so && does something. Could someone please explain the difference to me?
The double ampersand you've seen might be & + & or & ~ &, not &&, as to the best of my knowledge the latter does nothing in Sass.
Using & + & will allow you to target an adjacent sibling of the same selector, for example this SCSS:
.btn {
...
& + & {
margin-left: 15px;
background: firebrick;
}
}
...will compile to this CSS:
.btn {
...
}
.btn + .btn {
margin-left: 15px;
background: firebrick;
}
Read more about the double ampersand here at Team Treehouse.
&& is redundant to the basic logical operator AND in nearly every popular programming language, while the single & is used specifically in SASS for connecting CSS selectors.
Connecting, or to be more precise in the use case of SASS: Concatenating selectors is very different from combining two conditionals in a logical sense.
Read further:
https://www.sitepoint.com/sass-basics-operators/ and https://javascript.info/logical-operators
It could be to increase specificity: .thing.thing is higher than just .thing
Precursor:
Under normal circumstances, I would never do this.
I have a CSS file that I am currently collaborating on with another person. I built the file initially, then they have added rules to it after the fact. But, instead of adding rules to selectors that already exist, they have duplicated selectors everywhere. I don't even want to get into how disorganized the file has become. The problem is that the duplicated selectors are spread out all over the file now and it could take some time to sort it out.
Anyway, I am currently in the process of trying to clean up the file. I have tried beautify, css format, etc in my editor (ST3), which cleans up fine but still leaves the duplicate selectors. I have tried various online tools like CSS Lint, ProCSSor, Dirty Markup, CleanCSS and so far none of these tools give me the desired result.
Is there any way that these selectors can be merged by some other means instead of manually?
Here's an example of my situation, just for reference:
I'd like to turn this...
.sameClass {
float: left;
width: 100%;
margin: 0;
padding: 0;
}
.differentClass {
border: none;
background: black;
padding: 0;
}
.sameClass {
font-weight: bold;
font-size: 24px;
display: inline-block;
}
into this...
.sameClass {
float: left;
width: 100%;
margin: 0;
padding: 0;
font-weight: bold;
font-size: 24px;
display: inline-block;
}
.differentClass {
border: none;
background: black;
padding: 0;
}
CSSO (Github project) is the tool will help you merge identical CSS classes.
It can be configured to execute some cleaning, compaction and restructuring.
Test in sandbox here : https://css.github.io/csso/csso.html
// Input
.card {box-shadow: none;}
.foo { color: #ff0000; }
.bar { color: rgba(255, 0, 0, 1); }
.card {border: 1px solid grey;}
// Output compacted + merged
.bar,.foo{color:red}
.card {box-shadow: none;border: 1px solid grey;}
A simplistic approach would be to sort your CSS file(s) by selector. This can be done by considering each rule as a "paragraph" (meaning you will have to ensure there are empty lines between rules, and nowhere else), and then using your editor's "sort paragraph" feature, if it has one. For instance, emacs has the M-x sort-paragraphs command.
Once multiple rules for the same selector are grouped together, you can manually go in and combine them.
I'm learning CSS and I found this syntax to group multiple selectors:
element-1, element-2 {
/* css declarations */
}
This means that the elements are in the same styling, so why don't we give them the same class? Is there any recommendations?
While there are probably many reasoning behind a general syntax decision, I could at least name one. Take the following example:
ul, li, p {
padding: 0; margin: 0;
}
Sometimes when you are resetting styles across different elements, you can use ,. You may group those using classes, but that would mean you need adding a class like .no-padding to each and every ul, li, p.
Not neat.
You can write the CSS rules without group of selectors, but you can minimize your CSS code with these groups. See the following example:
.one, .two {
color:red;
}
.two {
text-decoration:underline;
}
/** not optimized / no selector group */
.oneone {
color:red;
}
.twotwo {
color:red;
text-decoration:underline;
}
<p class="one">Hello World #1</p>
<div class="two">Hello World #2</div>
<p class="oneone">Hello World #1</p>
<div class="twotwo">Hello World #2</div>
Here is another illustration to join the two already featured (by Dai and sebastianbrosch)
Say you have a class that sets some values for an HTML element:
.someClass {
font-size:1.1rem;
color:#c00;
border: 2px solid #000;
padding: 1vh 1vw;
}
And just suppose you have another element (.someOtherElement)which you want to have the same font-size as someClass, and the same colour, same padding but no border?
Option 1:
Write everything out twice:
.someClass {
font-size:1.1rem;
color:#c00;
border: 2px solid #000;
padding: 1vh 1vw;
}
.someOtherElement {
font-size:1.1rem;
color:#c00;
padding: 1vh 1vw;
}
Option 2: Don't write everything out twice:
.someClass, .someOtherElement {
font-size:1.1rem;
color:#c00;
padding: 1vh 1vw;
}
.someClass {
border: 2px solid #000;
}
This more closely follows the DRY principles of programming and allows for immense flexibility, applying various rules to as many or as few identifiers as needed.
Getting to grips with LESS here but one thing is still a little unclear.
Lets say I have multiple color themes for my website, controlled by a class on the body tag. From this I can redefine the various colors for each element within each theme. Easy enough but fairly time consuming if I have a lot of elements to change... and a lot of themes. Every time I add a new theme I need to write out all the selectors again, with different color values.
I am basing my working so far on another post I found:
LESS.css variable depending on class
... However it still seems overly complicated for what I want to do in that I still have to write out all the selectors and include the mixin before dropping in the same CSS with the color variable.
I have created a CODEPEN HERE
I'd appreciate it if anyone had time to take a little look and advise me how I could approach this differently or how I could streamline this process.
Many thanks to anyone who helps out :)
Assuming you remain with wanting to theme it within one style sheet (and not multiple sheets as cimmanon noted in the comments), and assuming you are using LESS 1.3.2+, then the following code works to reduce the amount of duplication by setting up a loop through the classes that need theme changes.
Note that this does not work on Codepen (it is throwing an error uncaught throw #, perhaps because they are running an earlier version of LESS), but you can see it compiling correctly by putting the code into LESS's compiler.
LESS (based off your Codepen code with an added theme for demo)
//////////////////////////////////////////////////////
// CONSTANTS
#lightColour: #fff;
#darkColour: #000;
#lightBg: #fff;
#darkBg: #000;
#numberOfThemes: 3; //controls theme loop
//////////////////////////////////////////////////////
// MIXINS
//Theme Definitions by parametric mixin numbers (1), (2), etc.
.themeDefs(1) {
#lightColour: #f00;
#darkColour: #fff;
#lightBg: #f00;
#darkBg: #fff;
}
.themeDefs(2) {
//inverse of 1
#lightColour: #fff;
#darkColour: #f00;
#lightBg: #fff;
#darkBg: #f00;
}
.themeDefs(3) {
#lightColour: #cfc;
#darkColour: #363;
#lightBg: #cfc;
#darkBg: #363;
}
.curvy {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
//////////////////////////////////////////////////////
// GENERAL STYLING
* {padding: 0;margin: 0;}
html {text-align: center;}
h2 {padding: 20px 0;}
.box {
.curvy;
color: #lightColour;
background: #darkBg;
display:inline-block; width:10%; padding:20px 5%; margin:0 1% 20px 1%;
}
//////////////////////////////////////////////////////
// THEME BUILDING
.buildThemes(#index) when (#index < #numberOfThemes + 1) {
.theme-#{index} {
.themeDefs(#index);
color: #lightColour;
background: #darkBg;
.box {
color: #darkColour;
background: #lightBg;
}
}
.buildThemes(#index + 1);
}
//stop loop
.buildThemes(#index) {}
//start theme building loop
.buildThemes(1);
CSS Output (only showing the looped theme css for brevity)
.theme-1 {
color: #ff0000;
background: #ffffff;
}
.theme-1 .box {
color: #ffffff;
background: #ff0000;
}
.theme-2 {
color: #ffffff;
background: #ff0000;
}
.theme-2 .box {
color: #ff0000;
background: #ffffff;
}
.theme-3 {
color: #ccffcc;
background: #336633;
}
.theme-3 .box {
color: #336633;
background: #ccffcc;
}
For example, which is better:
Method 1 (name classes separately):
/* CSS */
.textbox-red,
.textbox-green {
padding: 10px;
border: 1px solid #CCC;
border-radius: 10px;
}
.textbox-red { color: #900; }
.textbox-green { color: #3c3; }
/*HTML*/
<div class="textbox-red"></div>
<div class="textbox-green"></div>
OR ------------
Method 2 (chain classes):
/* CSS */
.textbox {
padding: 10px;
border: 1px solid #CCC;
border-radius: 10px;
}
.textbox.text-red { color: #900; }
.textbox.text-green { color: #3c3; }
/*HTML*/
<div class="textbox text-red"></div>
<div class="textbox text-green"></div>
What is a better practice among the two?
My opinion is that you should use modular css -
You could also combine classes instead of linking them:
/*CSS*/
.textbox {
padding: 10px;
border: 1px solid #CCC;
border-radius: 10px;
}
.text-red { color: #900; }
.text-green { color: #3c3; }
/*HTML*/
<div class="textbox text-red"></div>
<div class="textbox text-green"></div>
That way you can reuse the red and green colors in cases when you want to have a red background without a textbox. This way you can re-use your code more and you have a loose coupling between your textbox and text-color
I personally would go with method 2. That way you can swap out text-red or text-green easily for text-blue or text-yellow and still keep the underlying style for your text. Basically, method 2 allows for more flexibility and maintainability, IMHO.
In my experience the modular approach gives you the most flexibility. The modular css pattern is also used in Twitter Bootstrap where flexibility is very important.
First better if you making style for IE6, because this browser dont support second method.