This question already has answers here:
Modifying the middle of a selector in Sass (adding/removing classes, etc.)
(2 answers)
Closed 7 years ago.
Is this not documented or just not possible?
#parent {
#child {
width: 75%;
.additional_parent_class & {
width: 50%;
}
}
}
This will basically turn into:
.additional_parent_class #parent #child {
width: 50%;
}
While this makes sense because of the implementation of the ampersand and how it's used. What if I'm trying to get it to achieve this:
#parent.additional_parent_class #child {
width: 50%;
}
The only way I have been able to achieve this is by writing another rule outside of the child declarations:
#parent{
#child {
width: 75%;
}
&.additional_parent_class #child {
width: 50%;
}
}
While this isn't necessarily a 'pain in the butt' in this implementation, it seems counter productive if #child has children of its own that will now need to be duplicated in both rules.
Anyway, maybe I'm just being picky, but it would be great if there were more ways to traverse through the selectors.
Although it is not currently possible, this and many similar improvements to the & syntax are slated for release in Sass 3.3. You can follow the discussion about the feature on the Sass issue here.
I agree it would be very helpful. Unfortunately, it's not currently possible in SASS (or any other CSS preprocessor I know of).
This is capable in v3.4 might be in 3.3 but not sure.
I am not a fan of the syntax though.
& is much easier. Wish there was something like &^ for an alias :)
#parent {
#child {
width: 75%;
#at-root #{selector-replace(&, '#parent', '#parent.additional_parent_class')} {
width: 50%;
}
}
}
Related
Is there any solution how to convert this:
[class*="needle"]:not([class*="__front"], [class*="__back"]) {
position: absolute;
}
to this:
[class*="needle"]:not([class*="__front"]):not([class*="__back"]) {
position: absolute; }
using a SCSS compiler?
I only get:
[class*="needle"]:not([class*="__front"], [class*="__back"]) {
position: absolute;
}
that cannot be interpreted by most browsers.
Many thanks.
I would make use of SCSS for the reason it developed, to make syntax pretty and easy to understand.
[class*="needle"]{
&:not([class*="__front"]){
&:not([class*="__back"]) {
position: absolute;
}
}
}
Should work. Here, & is used to refer the parent. Once you compile it, the resulting CSS would be
[class*="needle"]:not([class*="__front"]):not([class*="__back"]) {
position: absolute;
}
Sorry, I read the question wrong. The above conversion is not possible in SCSS, as that's neither proper CSS syntax nor SCSS syntax.
Currently, :not() selector does only simple matches. The above syntax is a valid one for level 4 selectors, which is in working draft and mostly not available in any browsers.
Also,
<Selector>:not(<Condition1>):not(<Condition2>) {
position: absolute;
}
is not ,
<Selector>:not(<Condition1>,<Condition2>) {
position: absolute;
}
where as first method acts as AND, second one acts as OR.
MDN Docs
W3C Docs
This question already has answers here:
Can a CSS class inherit one or more other classes?
(29 answers)
Closed 6 years ago.
Can I wrap a class (or id) around styling to apply it to elements only in that class?
For example, I have :
.title {
color: #000;
}
.block {
width: 100%;
}
.wrapper {
width: 90%;
}
I'd like to create a different design for these things, if they are in a specific class. I know You can do it like so:
.specific_class .title{
color: #fff;
}
But then I have to add it to each block. Can I do something like this?
.specific_class{
.title {
color: #fff;
}
.block {
width: 99%;
}
.wrapper {
width: 91%;
}
}
..just to assign different styles to work, if elements are in a specific class.
(I know the last example doesn't actually work).
I have a lot of these little blocks, so one "wrapping" would work and look a lot better than copy/pasting .specific_class in front of each one.
I'd like to apologize, if such question exists. I just couldn't find the correct words and find the solution, but there probably is a question like mine.
It is not possible in regular CSS. However, you might be interested in SASS, a CSS preprocessor that allows you to write nested rules (amongst other things) and compile them down to regular CSS.
I'm sorry, I think it's already been asked, but I don't know which keywords I should use, as I'm new to less.
I need to do something like :
.class1 {
top: 10%;
height: 20%
}
.class2 {
top: .class1->top + .class1->height + 10%;
height: class1->height;
}
Is it possible to do this without defining variables such as #class1top and #class1height ?
Thanks for answers, or a redirection to this question if you can find one
Have a good day :)
I'm new to Less.
In my script, I'd like to use the width of box1 in box2.
Please review my script.
#box1
{
width: 1000px;
height: 500px;
}
#box2
{
width: #box1.width - 100px;
}
Is it possible or not? If yes, please give me correct Less code.
unfortunatly it is indeed not possible. You could work with variables and do something like this however:
#box1width: 1000px;
#box1
{
width: #box1width;
height: 500px;
}
#box2
{
width: #box1width - 100;
}
No, that's not possible. LESS processes the style sheet to produce CSS, and it doesn't have any knowledge of the elements in the page.
What you are looking for is CSS Expressions, but that was only supported in Internet Explorer, and support for that was dropped in IE8.
Is there something clever I can do in CSS to indicate that an element with a particular ID should always use one or more classes? Something like:
#user_info_box {
use-class: ui-widget-content ui-corner-all;
position: fixed;
left: 10px;
...
}
Only, you know, using actual valid CSS properties.
LESS is perfect for this. Specifically, see "mixins".
#user_info_box {
.ui-widget-content;
.ui-corner-all;
position: fixed;
left: 10px;
...
}
You can't do that in CSS, however you may be interested in SASS
#user_info_box {
#extend .ui-widget-content;
#extend .ui-corner-all;
position: fixed;
left: 10px;
...
}
Check out http://lesscss.org/
it will give you more flexibility with your CSS including something similar to what you are asking.
Umm no. You could with javascript/jQuery though.