Invalid property value with HTML / SASS element - css

My element height has a invalid property value, I don't know Why.
Here is my SASS code:
.iconDiv {
$iconDivSize: 200px;
.icon {
$iconDeltaHeight: calc(#{$iconDivSize} / 60.8);
$iconHeight: calc(#{$iconDeltaHeight} * #{$iconDivSize});
height: $iconHeight;
}
}
My output element height is: calc(calc(200px / 60.8) * 200px), but is invalid... Why?

Two issues, you can't nest calc and you can only have one unit declaration.
You need something like
$iconDivSize: 200;
.iconDiv {
.icon {
height: calc(#{$iconDivSize}px / 60.8 * #{$iconDivSize});
}
}
Demo

Related

Use maxlength as a CSS width

I tried to use the maxlength attribute of an input element as a CSS width, but it does not seem to work:
input[maxlength] {
width: attr(maxlength em);
}
According to Mozilla I thought this might be the intended use case. Yes I saw the note. Is there any other way to get it working?
This works, but scales too much.
input[maxlength="2"] {
width: 2em;
}
input[maxlength="3"] {
width: 3em;
}

CSS dynamic class

Lets say I have a flex wrapping container with an attribute data-columns like this:
<div class="grid" data-columns="2"></div>
and
.grid {
display:flex;
flex-wrap:wrap;
}
.grid[data-columns=2] > * {
width:50%;
}
.grid[data-columns=3] > * {
width:33.3%;
}
.grid[data-columns=4] > * {
width:25%;
}
the idea is that the children of .grid class elements have the width of 1 / grid.data-columns. Now i could of course just write a bunch of them but I'm wondering if there is a more dynamic way to do this? Could css actually fetch the number of columns from their parent element and use it in a calculation to determine width?
Don't understanding at it all with "Could css actually fetch the number of columns from their parent element and use it in a calculation to determine width?", but if you got, how to say 2 childs with the class "grids_child" in "grid" you can do
.grid_child{width:calc(100% / 2);}
and that will make all the elements with the ".grid_child" class, to have 50%
I didn't understand your question, but I told you this cause I see the "1 / .grid".
A good choice it to usea the pre-proccessor like someone told you
As Marc said in the comment,
CSS3 had the attr() function that might work but it can only get the attribute values of the selected element, not a parent element.
and also there's no browser supporting CSS3's attr() currently. So it have to be done with external tools such as LESS and SASS.
Here's an example written in LESS:
#max: 10;
.col(#index) when (#index =< #max) { // iterate
.grid[data-columns=#{index}] > * {
width: percentage(1 / #index);
}
.col((#index + 1));
}
.col(#index) when (#index > #max) {} // terminal
.col(1); // kickstart it
and this will be translated to
.grid[data-columns=1] > * {
width: 100%;
}
.grid[data-columns=2] > * {
width: 50%;
}
.grid[data-columns=3] > * {
width: 33.33333333%;
}
/* ...... */
.grid[data-columns=10] > * {
width: 10%;
}

LessCss generate css from parent class until nested caller

Lets start by giving an example,
Say for instance I have the class:
<html class="browser-ie"> ...
then on some element, I would like to call my mixin:
.browser-ie(#mixin){
html.browser-ie {
#mixin();
}
}
and be able to call it from for instance an element :
.main {
.nested {
.morenested {
.browser-ie({ min-height:100% });
}
}
}
and have it generate the following css:
html.browser-ie .main .nested .morenested { min-height:100%; }
Is there anything in the toolbox that would allow for such a thing?
I think that you are looking for the parent selector in your precompiler. This should output your desired CSS.
.main {
.nested {
.morenested {
html.browser-ie & {
min-height: 100%;
}
}
}
}
Keep in mind that the parent selector can fall anywhere in a declaration, and it will inherit all of the classes you have nested into up to that point, and append them to your string.
do you mean something like this?
.myColor{
min-height:100%;
}
.main{
.nested{
.morenested{
.myColor;
}
}
}
result:
/* Generated by less 2.4.0 */
.myColor {
min-height: 100%;
}
.main .nested .morenested {
min-height: 100%;
}

Calculating width from percent to pixel then minus by pixel in LESS CSS

I will calculate width in some element from percent to pixel so I will minus -10px via using LESS and calc(). It´s possible?
div {
span {
width:calc(100% - 10px);
}
}
I using CSS3 calc() so it doesn't work: calc(100% - 10px)
Example: if 100% = 500px so width = 490px (500-10);
I made a demo for testing : http://jsfiddle.net/4DujZ/55/
so padding will say: 5 (10px / 2) all the time when I resizing.
Can I do it in LESS? I know how to do in jQuery and simple CSS like margin padding or else... but i will try to do functional in LESS with calc()
You can escape the calc arguments in order to prevent them from being evaluated on compilation.
Using your example, you would simply surround the arguments, like this:
calc(~'100% - 10px')
Demo : http://jsfiddle.net/c5aq20b6/
I find that I use this in one of the following three ways:
Basic Escaping
Everything inside the calc arguments is defined as a string, and is totally static until it's evaluated by the client:
LESS Input
div {
> span {
width: calc(~'100% - 10px');
}
}
CSS Output
div > span {
width: calc(100% - 10px);
}
Interpolation of Variables
You can insert a LESS variable into the string:
LESS Input
div {
> span {
#pad: 10px;
width: calc(~'100% - #{pad}');
}
}
CSS Output
div > span {
width: calc(100% - 10px);
}
Mixing Escaped and Compiled Values
You may want to escape a percentage value, but go ahead and evaluate something on compilation:
LESS Input
#btnWidth: 40px;
div {
> span {
#pad: 10px;
width: calc(~'(100% - #{pad})' - (#btnWidth * 2));
}
}
CSS Output
div > span {
width: calc((100% - 10px) - 80px);
}
Source: http://lesscss.org/functions/#string-functions-escape.
I think width: -moz-calc(25% - 1em); is what you are looking for.
And you may want to give this Link a look for any further assistance
Or, you could use the margin attribute like this:
{
background:#222;
width:100%;
height:100px;
margin-left: 10px;
margin-right: 10px;
display:block;
}
Try this :
width:auto;
margin-right:50px;

Calculate a percent with SCSS/SASS

I want to set a width in percentage in scss via calculation, but it gives me errors..
Invalid CSS after "...-width: (4/12)%": expected expression (e.g. 1px,
bold), was ";"
I want to do something like
$my_width: (4/12)%;
div{
width: $my_width;
}
how do I add the % sign in there?
Same question with px and em
Have you tried the percentage function ?
$my_width: percentage(4/12);
div{
width: $my_width;
}
UPDATE
This function was updated since version 1.33.0 and now this is a correct method to do it:
#use "sass:math";
div {
width: math.percentage(math.div(4,12));
}
Source: https://sass-lang.com/documentation/modules/math#percentage
Another way:
$my_width: 4/12 * 100%;
div {
width: $my_width; // 33.33333%
}
Sass will output the value in %.
I was able to make it work this way:
div{
width: (4/12)* 1%;
}
This way you don't need to use any special function.
If you wanna use a loop, maybe this solution will be working
#for $i from 1 through 12 {
.col-#{$i} {
width: #{calc(100 * $i / 12) + '%'};
}
}

Resources