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.
Related
don't know if it is possible, but I'd like to scale all images on my site with the following:
.myClass img {
height: auto;
}
However, all *.svg-files shouldn't match that pattern. Is there a way to do this via native css?
I found something like this:
.myClass img[src$=".svg"] {height: auto;}
But that seems to trigger only for svg-files. Trying to use != seems to be syntactically incorrect.
For this you'll want to refer to the attribute-selector.
Example:
.myclass[src$=".svg"]
Reference;
http://www.w3schools.com/css/css_attribute_selectors.asp
Edit;
Just saw your edit.
In css you can also use a :not(selector)
example:
.myclass:not([src$=".svg"]);
.myClass img {
height: auto;
}
.myClass img[src$=svg i] {
height: 100px;
}
first set height to all images, then reset the setting for all images having src with suffix svg case insensitively
So I have a div that allows me to display a QR code of the current page URL:
.page-qr:before {
content: url(https://chart.googleapis.com/chart?cht=qr&chs=100x100&chl=<?php echo current_page(); ?>?choe=UTF-8);
height: 100px;
width: 100px;
}
And used like:
<div class="page-qr"> </div>
Obviously, to get the current URL on-the-fly, I have to put this CSS styling in the <head> of my page. I am trying to move it to the stylesheet.
I had the idea to use a data attribute to specify the URL:
<div class="page-qr" data-url="https://chart.googleapis.com/chart?cht=qr&chs=100x100&chl=<?php echo current_page(); ?>?choe=UTF-8"> </div>
So, my question is, is it possible to double up the usage of content:url() and attr(data-url) in the stylesheet?
.page-qr:before {
content: url(attr(data-url)); /* Doesn't work, but you get the idea */
height: 100px;
width: 100px;
}
This is a proposed feature for attr() in css-values-3. The CSS would look like this:
.page-qr:before {
content: attr(data-url url);
height: 100px;
width: 100px;
}
Unfortunately there are no known implementations, so this still isn't possible.
I just stumbled upon the same problem, but found a solution using custom properties. So we can pass any type that is allowed as a custom property value to it. Then you can absolute position it if that is what you look for.
You can use it like this:
HTML
<div style="--img-url: url('${imgUrl}')"></div>
CSS
div {
position: relative;
}
div::before {
position: absolute;
top:0;
left:0;
width:100px;
height:100px;
content: var(--img-url);
}
See this post for further info
I admit I am fairly new to less. While playing with it to make my site as dynamic as possible I was trying to use less variables so if I had to change something I could just do it in one file.
I have run across an issue though when trying to position elements. For example I have a button that is currently sitting on the left side, but in the future I may want to move it to the right. Normally how you call that is either left:0; or right:0;
Is there a way to make that left, or right a variable?
My css looks like this
.previous{
position:fixed;
left:0; //The left is what I want to declare somewhere else
top:#header-padding;
height:#side-height;
font-size: #button-side-font !important;
}
I have tried something like
#{prevPos}: left;
and then calling
#prevPos: 0;
but it just stopped loading my application altogether.
Mixins (update)
Have you tried using a mixin?
It could look something like this:
.previous {
.previous-position();
font-size: #button-side-font !important;
height: #side-height;
position: fixed;
top: #header-padding;
}
.previous-position() {
left: 0;
// right: 0;
}
To swap the left and right, change the comment in the mixin.
Multiple classes approach (original answer)
I'd actually approach this differently. Instead of having the button styles and positioning in the same CSS rule, I'd have the positioning in a sub-class.
.previous {
font-size: #button-side-font !important;
height: #side-height;
}
.previous-left,
.previous-right {
position: fixed;
top: #header-padding;
}
.previous-left {
left: 0;
}
.previous-right {
right: 0;
}
Then your buttons look like this:
I am on the left
I am on the right
I am not fixed
This way you can update your page pretty quickly without having to tear apart your LESS files and it makes your styles more re-usable.
And yet another answer for how to get it to work in a "variable way" using old-fashioned method (intentionally using the most conservative syntax so it could work even with ancient compilers):
#previous-position: right;
.previous {
position: fixed;
margin: 1em;
font-size: 400%;
.-(left) {left: 0}
.-(right) {right: 0}
.-(#previous-position);
}
Is it possible to declare your self a variable in CSS, for example if i had the same property for the following two tags
.cellLeft{
width: 45%;
min-height: 130px;
}
.cellRight{
width: 45%;
min-height: 130px;
}
Is it possible to declare x=130px
so i dont have to keep changing min-height everywhere
like for example;
x=130px;
.cellLeft{
width: 45%;
min-height: x;
}
.cellRight{
width: 45%;
min-height: x;
}
You have to use a CSS preprocessor for this, like LESS or SASS. You can't do it with pure css. Have a look here: http://lesscss.org/ or here: http://sass-lang.com/ (I use LESS myself)
Extra:
A CSS-only solution to your example would be to use a modular approach in which you define multiple classes for specific attributes which you can re-use in your HTML. I would suggest doing this even when using a CSS preprocessor. So for your example you could make these classes:
.cell {
width: 45%;
min-height: 130px;
}
.cell-left {
}
.cell-right {
}
And then add both the cell and the cell-left / cell-right classes to your HTML elements. This way you only have to declare the width and min-height properties once.
Or, you could do:
.cell-left, .cell-right {
width: 45%;
min-height: 130px;
}
So you only have to change it once as well.
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%;
}
}
}