SСSS nesting: how add class to a previous parent element - css

Let's take a look at this example:
.box {
padding: 1rem;
.item {
paddding: 1rem;
border: 1px solid #ccc;
a {
color: #000;
}
}
}
I want to add here new rules with pseudo-class.
How to make it with SCSS to get this output?
.box .item:first-child a:first-child {display: none;}
.box .item:last-child a:last-child {display: none;}
I know that I can use & parent selector and it works with <a/> to set the pseudo-class:
a {
color: #000;
&:first-child {
display: none;
}
}
But what should I do to set the pseudo-class to the previous parent .item?
UPDATE
Any way to do it with no dublicate the selectors? Smth like this:
a { color: #000; $parent(has:first-child) {display: none;} }


You have to create specific nested rules for it:
.box {
padding: 1rem;
.item {
paddding: 1rem;
border: 1px solid #ccc;
a {
color: #000;
}
&:first-child,
&:last-child {
a {
&:first-child,
&:last-child {
display: none;
}
}
}
}
}
There is no refactored way to this I believe.

Related

Does SASS support element specification as nested selector?

Let's say you have this SASS definition (unreal example):
.class {
margin: 1px;
background: black;
color: white;
&:hover {
color: red;
}
}
a.class {
margin: 1px;
background: black;
color: yellow;
&:hover {
color: blue;
}
}
Now, can we put the a specification of the same class as a nested selector? E.g. something like this (pseudo-code):
.class {
margin: 1px;
background: black;
color: white;
&:hover {
color: red;
}
// Some selector to show that the current class
// should be applied to this element (?)
a.& {
color: yellow;
&:hover {
color: blue;
}
}
}

I have a solution, it's a little bit tricky, but it works fine.
.class {
color: yellow;
&:hover {
color: blue;
}
&[href] {
color: white;
&:hover {
color: red;
}
}
}

You may consider to write a mixin
#mixin sample($color,$hovercolor) {
margin: 1px;
background: black;
color: $color;
&:hover {
color: $hovercolor;
}
}
.class{ #include sample(white,red)}
a{ #include sample(yello,yellow)}
Hope this helps

LESS add class with pseudo selector

I use LESS and here is my example:
.arrow{
color: red;
}
.arrow:before{
content: ">";
}
.button{
background: blue;
.arrow;
&:before{
border: 1px solid;
}
}
And this is CSS after parsing:
.button{
background: blue;
color: red;
}
.button:before{
border: 1px solid; // HERE IS NO content: ">" !!!
}
How to add :before pseudo-element from .arrow class to my button?

You can use the extend option like below. It basically applies all properties of the arrow class to the button class also. The all keyword means the child classes are also extended.
LESS:
.button{
background: blue;
&:extend(.arrow all);
&:before{
border: 1px solid;
}
}
Compiled CSS:
.arrow,
.button {
color: red;
}
.arrow:before,
.button:before {
content: ">";
}

I think the Extend feature ought to do the trick:
.button {
&:extend(.arrow all);
background: blue;
&:before {
border: 1px solid;
}
}
See http://lesscss.org/features/#extend-feature

LESS mixin for nested and non-nested rules

Now I'm using LESS to customize Bootstrap to my own website.
I have a problem with LESS's mixins.
For example, the following LESS code:
.Article {
margin-left: 5px;
.Small {
color: #111;
}
}
.Small {
font-size: 5px;
}
.MyArticle {
.Article;
.Address {
.Small;
}
}
is compiled to the following CSS:
.Article {
margin-left: 5px;
}
.Article .Small {
color: #111;
}
.Small {
font-size: 5px;
}
.MyArticle {
margin-left: 5px;
}
.MyArticle .Small {
color: #111;
}
.MyArticle .Address {
color: #111;
}
However, in addition to the above generated CSS, I want to make ".MyArticle .Address" small:
.MyArticle .Address {
font-size: 5px;
}
What is the best way?
EDITED:
In the above example of LESS code, the .Article and .Small are the library's class, and I don't want to modify them.

The Problem is Scoping
In your original layout, by including .Article at the same level as .Address is defined, then it is using the .Small from the .Article as the only mixin, because it is the "local" .Small in the .Address context. To avoid this, the .Article must be isolated to its own block. But then you lose the color being picked up from it's .Small, so it must be explicitly included back into .Address through a namespaced call. The code ends up like this:
LESS
.Article {
margin-left: 5px;
.Small {
color: #111;
}
}
.Small {
font-size: 5px;
}
.MyArticle {
.Address {
.Small;
.Article > .Small;
}
& {.Article;}
}
CSS Output
.Article {
margin-left: 5px;
}
.Article .Small {
color: #111;
}
.Small {
font-size: 5px;
}
.MyArticle {
margin-left: 5px;
}
.MyArticle .Address {
font-size: 5px;
color: #111;
}
.MyArticle .Small {
color: #111;
}

Not really sure, but possibly this code:
.Article {
margin-left: 5px;
.Small {
color: #111;
}
}
.Small {
font-size: 5px;
}
.MyArticle {
.Article;
.Address {
.Small;
font-size: 5px;
}
}

Try extend:
.Article {
margin-left: 5px;
.Small {
color: #111;
}
}
.Small {
font-size: 5px;
}
.MyArticle {
.Article;
.Address {
&:extend(.Small);
}
}
This compiles to:
.Article {
margin-left: 5px;
}
.Article .Small {
color: #111;
}
.Small,
.MyArticle .Address { //<-- this
font-size: 5px;
}
.MyArticle {
margin-left: 5px;
}
.MyArticle .Small {
color: #111;
}

How can I implement li:last-child with less?

I have the following CSS:
ul.arbo {
margin-top: 0.5em;
}
ul.arbo li {color
padding-bottom: 0.333em;
}
ul.arbo li:last-child {
color: #333;
}
I can implement the simple CSS using Less. But how do I implement the li:last-child?

Try:
ul.arbo {
margin-top: 0.5em;
li {
color: #444;
padding-bottom: 0.333em;
&:last-child {
color: #333;
}
}
}

how to set border style property to none in unordered list?

i am designing one drop down list with css
Here is my html code:
i have set each li a property border-right to border-right:1px dashed silver; i want to delete that property for last li a element
and here is css code :
#navigation
{
display:inline-table;
text-align:center;
background:silver;
}
#navigation li
{
float:left;
list-style:none;
padding:2px 10px 2px 10px;
}
#navigation a
{
display:block;
text-decoration:none;
color:green;
font-weight:bold;
padding:5px;
border-right:1px dashed green;
}
.noBorder
{
display:block;
text-decoration:none;
color:red;
font-weight:bold;
padding:5px;
border:0px;
}
#navigation a:hover
{
color:yellow;
background:black;
}
i want to delete right-border of the last list software Developments so i tried with
noBorder class. but can't give any solution please can any one let me know
thanks advance

Am not sure which border are you talking about but try this if you want to remove the border from last li
.noBorder {
border-right: none !important;
}

Try this, it will work
.noBorder
{
border-right:0px!important;
}

you can do this by
border: none !important;
it will remove all border
to remove right border ony try
border-right: none !important;
Good Read
Is !important bad for performance?

#navigation {
display: inline - table;
text - align: center;
background: silver;
}
#navigationli {
float: left;
list - style: none;
padding: 2px 10px 2px 10px;
}
#navigationa {
display: block;
text - decoration: none;
color: green;
font - weight: bold;
padding: 5px;
border - right: 1px dashed green;
}
.noBorder {
display: block;
text - decoration: none;
color: red;
font - weight: bold;
padding: 5px;
border: 0px;
}
#navigationa: hover {
color: yellow;
background: black;
}

Resources