I have the following SCSS code:
#appMain {
margin-right: 25em + 1em;
}
#appLeft {
float: left;
width: 100%;
padding-left: 1em;
}
#appRight {
float: right;
width: 25em;
margin-right: -25em - 1em;
}
Now I want to use parameters, so I created 2 variables
$rightDimension: "25em";
$marginBetween: "1em";
When I change the code this way
#appMain {
margin-right: $rightDimension + $marginBetween;
}
Instead of getting 26em, I now get 25em1em resulting in invalid css and thus, the property doesn't apply.
What am I doing wrong? How can I do this simple math with SASS?
Since you quoted the values, Sass treats them as strings rather than values and does a concatenation instead of an addition (like Javascript would do it as well).
Simply omit the quotes to make it work.
$rightDimension: 25em;
$marginBetween: 1em;
working example
Related
I am having trouble getting CSS variables to work, I am doing the following:
:root {
--base: #ffcd600;
--spacing: 10px;
--blur: 10px;
}
img {
padding: var(--spacing);
background: var(--base);
}
However I am seeing the element inspector as shown below:
img {
padding: var(--spacing);
background: var(--base);
}
--base: #ffcd600;
too many characters in your hexadecimal value.
A little confused as to what you're asking. But when using the provided code I did not encounter any issues, with one exception. As Obsidian has stated your Hex has one extra value. Removing the extra 0 will work.
If you were to test it like so, what do you see?
:root {
--base: #ffcd60;
--spacing: 10px;
}
h1 {
color: var(--base);
padding: var(--spacing);
}
If this also does not display correctly then have you tried clearing your cache?
I've been using Bootstrap v3 for too long in my projects. I usually worked with LESS, as I found it was the best way to handle my custom styles. E.g. if I wanted to create a custom navbar, all I had to do was to write something like this:
#navbar-height: 80px;
#navbar-default-bg: #f0f0f0;
#navbar-default-link-color: #999;
#media(max-width: #screen-xs-max) {
.navbar-btn {
height: 50px;
line-height: 50px;
padding: 0 10px;
margin-top: (#navbar-height - 50px) / 2;
margin-bottom: (#navbar-height - 50px) / 2;
}
}
(this code is just an example and doesn't make any sense)
One of my clients insisted I had to use SCSS for a new project, however variable there just didn't work (I used the SCSS version of Bootstrap v3). Should SCSS variables be handled in a different way?
Don't all CSS preprocessor need to be converted to CSS in order to run it in a browser ?
So does it really matter if you write it in SCSS or LESS, since ultimately the code will be compiled as CSS right ?
Anyway, back to your question,
I think it would work if instead of #, you put $
$navbar-height: 80px;
$navbar-default-bg: #f0f0f0;
$navbar-default-link-color: #999;
$media(max-width: $screen-xs-max) {
.navbar-btn {
height: 50px;
line-height: 50px;
padding: 0 10px;
margin-top: ($navbar-height - 50px) / 2;
margin-bottom: ($navbar-height - 50px) / 2;
}
}
you should get a better idea if you read this
CSS preprocessors
I'm trying to combine one ruleset into two different rulesets with variable values swapped. Main purpose is LTR/RTL internationalization.
Usage:
h1 {
margin-top: 10px;
.directions({
margin-#{left}: 5px;
});
}
Expected output:
h1 {
margin-top: 10px;
}
.ltr h1 {
margin-left: 5px;
}
.rtl h1 {
margin-right: 5px;
}
I was able to get some results with the Passing Rulesets to Mixins function available in Less 1.7
.directions(#rules) {
#left: left;
.ltr & { #rules(); }
#left: right;
.rtl & { #rules(); }
}
The problem is that the #left variable is always set to the last value used in .directions() mixin (right in this case). Is there any way how to swap variable or pass it back outside of the mixin?
Note: I do not want to output LTR/RTL to two separate files, I'm trying to combine them into one file.
To understand Less variables scope and life-time see:
Lazy Evaluation (aka Lazy Loading).
Variable Semantics
Most Misunderstood
Scope
Last Declaration Wins
The solution for your particular case is as simple as:
.directions(#styles) {
.ltr & {
#left: left;
#styles();
}
.rtl & {
#left: right;
#styles();
}
}
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.
So I was writing up some code when I decided I wanted to make a variable for margin and padding, along with some other positioning too. But when I try I get errors.
This is what my code looks like:
//Positioning
#margin_t: margin-top:0;
#margin_r: margin-right:0;
#margin_l: margin-left:0;
#margin_b: margin-bottom:0;
#padding_t: padding-top:0;
#padding_r: padding-right:0;
#padding_l: padding-left:0;
#padding:_b: padding-bottom:0;
#center: text-align: center;
#left: text-align: left;
#right: text-align: right;
#relative: position: relative;
#justify: position: justify;
Can anyone give me their two-cents? Thank you!
As of LESS 1.7
You can include property values in variables by rulesets, like so (note bracketing and following semicolon; p.s. position: justify is not valid, I've changed it to absolute):
//Positioning
#margin_t: {margin-top:0;};
#margin_r: {margin-right:0;};
#margin_l: {margin-left:0;};
#margin_b: {margin-bottom:0;};
#padding_t: {padding-top:0;};
#padding_r: {padding-right:0;};
#padding_l: {padding-left:0;};
#padding:_b: {padding-bottom:0;};
#center: {text-align: center;};
#left: {text-align: left;};
#right: {text-align: right;};
#relative: {position: relative;};
#absolute: {position: absolute;};
A variable assigned ruleset is use much like a mixin (note the parentheses on the call), so:
.yourClass {
#relative();
}
Produces:
.yourClass {
position: relative;
}
The differences of a variable ruleset to a mixin are that you cannot pass parameters to a ruleset (directly anyway), but a ruleset can itself be passed as a parameter to a mixin. Also, variable rulesets will overwrite a previous definition (no matter properties defined), whereas mixins will merge property values. Rulesets work well for fixed values, like some of your items. They can be parametrized indirectly, something like so:
#margin_t: {margin-top: #tm;};
.yourClass {
#tm: 0;
#margin_t();
}
Varible rulesets actually work best for when one wants to pass to a mixin a group of properties or a single, unknown dynamic property. As an example of the latter, suppose you know you will want to set a single margin for an element, but depending on some context, you don't know which you want to set, so you want a single way to handle it. Then something like this can be done:
#margin_t: {margin-top: #value;};
#margin_r: {margin-right: #value};
#margin_l: {margin-left: #value;};
#margin_b: {margin-bottom: #value;};
.set-a-margin(#prop; #value: 0;) {
#prop();
}
.yourClass {
.set-a-margin(#margin_r; 10px);
}
.anotherClass {
.set-a-margin(#margin_b; 5px);
}
Produces:
.yourClass {
margin-right: 10px;
}
.anotherClass {
margin-bottom: 5px;
}
Basically, variable assigned rulesets just offer another way LESS can be used to code the way you may want to code. They can offer some functionality like mixins, with certain limitations and advantages different from those as related to variables.
Firstly, define your mixins like this:
.margin_t {
margin-top: 0;
}
.margin_b (#value: 0) {
margin-bottom: #value;
}
and then just use it!
body {
.margin_t();
.margin_b(15px);
}
You don't set the whole style. you would do #margin_t: 0;
Then use it
.myClass {
margin-top: #margin_t;
}