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) + '%'};
}
}
Related
i have:
#mydiv { height: 100px; }
i want to change height by replace, but i have to add e.g. 50 px
#mydiv { height: OLD_VALUE + 50px; }
Is it possible without js?
I don't think so. You have to use JS for this.
But you can use margins or paddings to increace distance in certain direction
P.S. In JS you can use +=50px for that
You can use CSS3 calc though you'll need to be wary of support
You can't -- CSS doesn't have any notion of this. While you may be able to do something like using CSS3 variables and calc, it would require the original CSS file to use the variables.
First file:
:root {
var-height: 100px;
}
#myDiv {
height: var(height);
}
Your file:
#myDiv {
height: calc(var(height) + 50px);
}
The best/typical approach to this would be to do it via Javascript, or otherwise something like SASS.
I'm trying to make my own little columngrid with sass but I can't wrap my head around this problem.
This is what I have come up with so far but it is no the right solution. I'm getting a clean grid like this but the problem is that I'm removing an extra percentage in every row.
I'm removing the gutter_width of 1%(in this case) on the width of each column and replacing the room by using my gutter_width as the margin-left. So for each column I'm removing a percentage and adding it as margin, creating the gutters. The problem arises when I remove margin of the first-child in the row wich leaves me with a 99% row.
Could somebody help me out with this? Or maybe suggest a better way.
$container_width: 970px; // Main container width
$gutter_width: 1%;
$columns: 12; // Twelve columns
/* #Calculate the columnwidths */
/* Calculate the width of a single column and multiple it by columncount
================================================== */
#for $i from 1 through $columns {
.column-#{$i} {
width: ((100% / $columns) * $i) - $gutter_width;
}
}
.container {
max-width: $container_width;
margin: 0 auto;
}
.row {
width: 100%;
margin: 1em 0;
#include pie-clearfix;
}
// Select all element that contains class 'column'
[class*="column"] {
float: left;
margin-left: $gutter_width;
&:first-child {
margin-left: 0;
}
}
There should be one less gutter than there are columns - both in the context and in the span-width. The correct math is actually:
// the width of a single column has to account for "$columns - 1" gutters.
$column_width: (100% - $gutter_width * ($columns - 1)) / $columns;
#for $i from 1 through $columns {
.column-#{$i} {
the width of a span should cover "$i" columns, plus "$i - 1" gutters
width: $column-width * $i + $gutter_width * ($i -1);
}
}
Classes like this create a fairly fragile system if you want to nest any grid-spans inside other grid-spans, but it should cover the basics. Once you are using a pre-processor like Sass, I recommend leaving behind .column-x classes entirely, and just using mixins.
Because you have removed a $gutter_width from the first child you need to add it again to the last. One way to go about it could be to place this inside your loops:
&:last-of-type{
width: (100% / $columns) * $i;
}
That way if the column is the last element the width is recalculated with the extra 1%. If you want older browser support just replace it with a utility class called .last-column or something.
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;
I've got the following mixin that adjusts the width and padding of an item to cope with IE7's lack of support for box-sizing:border-box. It gives me a syntax on & .width(#width: 100, #paddinglr: 0)
I appreciate this is missing a % but any ideas why it's breaking?
.width(#width: 100, #paddinglr: 0) {
width: #width;
padding: #paddinglr;
}
body {
&.lt-ie8 {
& .width(#width: 100, #paddinglr: 0) {
width: #width-#paddinglr;
padding: #paddinglr;
}
}
}
You cannot define a mixin as a selector string, so & .width() for your nested portion cannot be a mixin definition (which is what you have tried to make it).
I think what you are trying to do is make a generic .width() mixin to use on any particular element. It appears that you intend to just set a single number for padding, which is fine.
However, it also appears that (based off your % comment), that you expect this code to produce a width value that is 100% of the parent minus the value of the padding. This is okay, too, assuming you are using percentages for padding also. If you are not, but intend instead that the padding be a pixel value, that mixed units cannot be done by LESS as you might expect, as LESS is a preprocessor, so it is not dynamic in the sense of being able to detect the width of the parent based off the percent at run time and then subtract the padding pixel value.
Now, if your intentions are percentages, or any equal measurement values for both width and padding (whether both px, both em units, etc.), then you can get what you desire by various means. One of the many solutions would be by overriding the .width() mixin within the .lt-ie8 nest, so for example:
.width(#width: 100%, #paddinglr: 0) {
width: #width;
padding: #paddinglr;
}
body {
.someDiv {
.width(100%, 10%);
}
&.lt-ie8 {
/* here is the override of the mixin */
.width(#width: 100%, #paddinglr: 0) {
/* note, I believe you will want to multiply the padding by 2 for the width change due to left and right padding */
width: #width - (2 * #paddinglr);
padding: #paddinglr;
}
/* and here is the override of the actual css */
.someDiv {
.width(100%, 10%);
}
}
}
Which produces this CSS (minus the comments above which were just to communicate to you):
body .someDiv {
width: 100%;
padding: 10%;
}
body.lt-ie8 .someDiv {
width: 80%;
padding: 10%;
}
I Have A Css Property Called
.Zero
{
width:100px;
}
I Have Another One Called
.One
I Need The Class One To Be The Same Class ( Zero ) + 10 px For Example
If Class Zero = 500
Class One = 510
How Can I Do This ?
As per i understand write like this:
.Zero,.One
{
width:100px;
}
.One{
padding-right:10px;
}
You can use javascript also. write like this:
var modWidth = $('.Zero').width();
$('.one').css({width: modWidth + 10});
Check this http://jsfiddle.net/mweEh/
As far as I know it is not possible to do that with CSS alone. You should use javascript+css to do that.
Not Possible with only css but you can use SCSS - http://sass-lang.com/
It will allow you to assign a variable and the use as
$width: 500;
.Zero{
width: $width;
}
.one{
width: $width + 10;
}