Here I have SCSS to style list items. What I'm wondering is if the order of selection for classes and pseudo-selectors. So basically, does &:before.active equal &.active:before?
Here is the full example of the latter:
.sidebar-list {
list-style-type: none;
padding: 0;
& li {
padding: 4px 0;
&:before { // Here,
color: darken($font-color, 60%);
font-family: "FontAwesome";
content: "\f101\00a0";
}
&.selected:before { // And here.
color: darken($font-color, 30%);
}
}
}
And the former of the part that matters (inside the li):
&:before { // Here,
color: darken($font-color, 60%);
font-family: "FontAwesome";
content: "\f101\00a0";
&.selected { // And here. This would evaluate to "li:before.selected"
color: darken($font-color, 30%);
}
}
Which one would be correct for styling the :before psuedo-selector for a list item?
Thanks!
Yes, the order does matter. li:before.selected will basically be ignored because it is invalid.
Here's a snippet for example:
span::before {
content:'span::before (Normal)';
background-color: #ddd;
}
/* Valid */
span.ribbon::before {
content: "span.ribbon::before (Valid)";
background-color: #0f0;
}
/* Invalid. Will be ignored */
span::before.ribbon {
content: "span::before.ribbon (Invalid)";
background-color: #f00;
}
<span></span>
<span class="ribbon"></span>
Also, you'll want to use double-colons for the ::before pseudo-element (updated in CSS3).
Reference: Pseudo Element Docs
Related
I have to convert some SCSS files to LESS. For most part it is just case of changing $ with # but there are style that use the scss parent selector & that I don't know how to convert.
Here is example
// Sidebar
.sidebar {
.block {
&.newsletter {
.btn {
&:before {
background: transparent;
}
}
}
&.filter {
ol {
li {
a {
color: #blue;
&:before {
display: none;
}
}
}
}
}
.filter-options-title, .block-title {
color: #444;
padding-bottom: 10px;
font-size: 12px;
&:after {
color: #666;
}
}
}
}
How would I replace out those parent selectors to make it the same generated CSS?
The & parent selector is actually the same syntax in Less and SCSS!
From the Less Documentation on Parent Selectors:
The & operator
represents the parent selectors of a nested rule and is most commonly
used when applying a modifying class or pseudo-class to an existing
selector
In comparison, here's the SASS/ SCSS documentation on parent selectors for pseudo classes: http://sass-lang.com/documentation/Sass/Selector/Pseudo.html
So in the case of your code, it would be:
SCSS
$blue: blue;
.sidebar {
.block {
&.newsletter {
.btn {
&:before {
background: transparent;
}
}
}
&.filter {
ol li a {
color: $blue;
&:before {
display: none;
}
}
}
.filter-options-title, .block-title {
color: #444;
padding-bottom: 10px;
font-size: 12px;
&:after {
color: #666;
}
}
}
}
(try compiling/ validating here: https://www.sassmeister.com/)
LESS
#blue: blue;
.sidebar {
.block {
&.newsletter {
.btn {
&:before {
background: transparent;
}
}
}
&.filter {
ol li a {
color: #blue;
&:before {
display: none;
}
}
}
.filter-options-title, .block-title {
color: #444;
padding-bottom: 10px;
font-size: 12px;
&:after {
color: #666;
}
}
}
}
(try compiling/ validating here: http://winless.org/online-less-compiler)
As well as the official documentation, this article on CSS Tricks is helpful too: https://css-tricks.com/the-sass-ampersand
Hope that helps :)
Here's the sample:
.my-class {
font-size: 12px;
}
.my-another-class {
/* here I want to include .my-class style */
.my-class;
border: 0;
}
Can I include one css class into another or not?
You can define multiple targets for the .my-class rule, then specify further rules just for .my-another-class:
.my-class,
.my-another-class {
font-size: 12px;
}
.my-another-class {
border: 0;
}
You can even then override certain properties, for example
.my-class,
.my-another-class {
color: red;
font-size: 12px;
}
.my-another-class {
border: 0;
color: blue; /* overrides color: red; on .my-another-class */
}
You can't use a construction like this in plain CSS.
Preprocessors such as Less and Sass support this behaviour with mixins.
You can't, but you can do something like this:
.my-class, .my-another-class{
font-size: 12px;
}
.my-another-class {
border: 0;
}
i have this code, taken from orbit slideshow custom next prev buttons links left right arrows
.orbit-container .orbit-prev span,
.orbit-container .orbit-next span {
color: red;
border: none;
font-size: 70px;
text-indent: 0;
margin-top: -32px;
}
.orbit-container .orbit-prev {
background-color: transparent;
}
.orbit-container .orbit-prev span:before {
content: "\2039";
}
.orbit-container .orbit-next {
background-color: transparent;
}
.orbit-container .orbit-next span:before {
content: "\203A";
}
which works, but when i try to replace with my own arrows it is not working!
i have a custom arrows, and have imported them into fontello, so in my fontello.css file i have:
.icon-arrow_left_navigate_previous:before { content: '\e846'; } /* '' */
.icon-arrow_right_navigate_next:before { content: '\e847'; } /* '' */
and using this as a class works, but when i try to use it within
.orbit-container .orbit-prev span:before {
content: "\e846";
}
.orbit-container .orbit-next span:before {
content: "\e847";
}
this does not work!
but <i class="icon-arrow_left_navigate_previous"></i> displays the left arrow.
any advice much appreciated.
Make sure that your code actually override original and that your fonts are affecting those elements (check computed style of the element) otherwise those references will refer characters in the different font.
I'm styling the placeholder text in my <input> tags, and I've discovered some odd behavior.
If I simply put the following, Chrome renders the placeholder text correctly:
:focus::-webkit-input-placeholder {
position: absolute;
left: -9000px;
}
However, if I try to include for multiple browsers in the same line, it doesn't display at all:
:focus::-webkit-input-placeholder, :focus:-moz-placeholder, :focus::-moz-placeholder, :focus:-ms-input-placeholder {
position: absolute;
left: -9000px;
}
I'd ideally like to have my SASS look like the below, but I for whatever reason cannot have the different selectors separated by commas.
:focus {
outline: none;
&::-webkit-input-placeholder, &:-moz-placeholder, &::-moz-placeholder, &:-ms-input-placeholder {
// Hide placeholder text on focus
position: absolute;
left: -9000px;
}
}
Is there any SASS syntax to force it to process each selector with its own block, like the below sample?
:focus::-webkit-input-placeholder {
position: absolute;
left: -9000px;
}
:focus:-moz-placeholder {
position: absolute;
left: -9000px;
}
// etc.
You could easily create a mixin and define the style of all placeholders just once, through a content block passed to the mixin itself, like so:
#mixin placeholder {
#each $placeholder
in "::-webkit-input-placeholder",
":-moz-placeholder",
"::-moz-placeholder",
":-ms-input-placeholder" {
/* for each placeholder in the above list print the browser vendor
selector, chained with its parent element */
&#{$placeholder} {
/* content is replaced with the actual style, passed as a block
in the mixin inclusion below */
#content;
}
}
}
:focus {
#include placeholder {
color: #ccc;
font-style: italic;
}
}
This will produce the following output
:focus::-webkit-input-placeholder {
color: #ccc;
font-style: italic;
}
:focus:-moz-placeholder {
color: #ccc;
font-style: italic;
}
:focus::-moz-placeholder {
color: #ccc;
font-style: italic;
}
:focus:-ms-input-placeholder {
color: #ccc;
font-style: italic;
}
You can test the sass code on http://sassmeister.com/
How can I add CSS comments in LESS nested rules? Ex:
div{
span{
font-size: 16px;
color: #fff;
}
/*This is my comment*/
em{
color: blue;
}
}
This is the output I expect to get:
div span {
font-size: 16px;
color: #fff;
}
/*This is my comment*/
div em {
color: blue;
}
But, unfortunatelly this is how it is processed:
div {
/*This is my comment*/
}
div span {
font-size: 16px;
color: #fff;
}
div em {
color: blue;
}
Is it possible to make this?
This isn't possible using /* */.
The reason being that it is still under the div scope, so it won't work using /* */ comments.
However, in LESS you can use // for single line comments which doesn't go through the compiler (so doesn't end up in the compiled CSS code but will be in the LESS code).
Here is the official documentation on comments.
Well, you can get your comment inside nested rules:
div {
em {
/* This is my comment */
color: blue;
}
}
output:
div em {
/* This is my comment */
color: blue;
}
I hope this would be useful for you.
/*This is my comment*/
div {
em {
color: blue;
}
span {
font-size: 16px;
color: #fff;
}
}
and the output will be,
/*This is my comment*/
div em {
color: blue;
}
div span {
font-size: 16px;
color: #fff;
}
More or less it would be like what you are expecting !!!