I am converting LESS to CSS, there I want to run the LESS function below:
.myPL( #val ) {
.pL #val{
padding-left:#val;
}
}
Function Call:
.myPL( 20px );
Expected result:
.pL20px{padding-left:20px}
But actual result is Syntax Error.
Please help me to concatenate the strings in class name in LESS.
What you are looking for is called selector interpolation ... you can find it here: http://lesscss.org/#-selector-interpolation
Your mixin would need to look like this for it to work:
.myPL( #val ) {
.pL#{val} {
padding-left: #val;
}
}
What you are trying to achieve does not work in LESS:
You could do:
.myPL( #val ) {
padding-left: #val;
}
Why on earth would you manually define each possible variant of padding left with the classname itself? That's not what LESS was designed for, and doesn't really make much sense with the context you've given.
The idea of mixins is to make them reusable, but I can't understand why you'd call a classname in the middle of that mixin. Use LESS mixins properly, and do the following:
.pl(#val) {
padding-left: #val;
}
Related
I have a long list of classes I wish to use in a couple of ways.
The list looks something like this (but much longer):
$my-components: '.some-component', '.some-other-component', '.another-component';
One of the ways I need to use this list of class names in SASS (scss), which I can't figure out, is to create a long chained selector of :not()s. The final rendered output should look like this:
.parent {
> * {
&:last-of-type:not(.some-component):not(.some-other-component):not(.another-component):not(etc) {
// style rules
}
}
}
(The goal being to select the last child element of .parent that doesn't have one of the classes in the list).
Question: How can I make the above code DRY by using the $my-components variable?
Note 1: The loop's output needs to be able to be appended to that &:last-of-type, as in above example.
Note 2: I'm using the $my-components variable already in a different function, so I'd like to keep it in the same format if possible.
Note 3: I know this seems hacky and stupid, and that I should just give all of those elements a common shared class instead. But unfortunately I can not currently modify that part of the DOM.
Use a #each loop
scss:
$my-components: '.some-component', '.some-other-component', '.another-component';
.parent {
> * {
$selector: '';
#each $component in $my-components {
$selector: $selector + ":not(#{$component})"
}
&:last-of-type#{$selector} {
color: blue;
}
}
}
css:
.parent > *:last-of-type:not(.some-component):not(.some-other-component):not(.another-component) {
color: blue;
}
What's happening ?
I define a new string variable $selector.
During the #each loop, I'm concatening the string with :not(#{$component}) to add your new selector.
I've been looking for the answers, but either it's not what I am really looking for, or I am not searching up properly. I want to dynamically generate the class name. Since, I use margin-top quite frequently, I have multiple classes defined with a set of rules, and I want to achieve with LESS.
I don't think is possible to create dynamic generated classes, as far as I did my research. Here is my code:
.margin-top-(#value)px {
margin-top: #value;
}
Desired Output
.margin-top-20px {
margin-top: 20px;
}
.margin-top-100px {
margin-top: 100px;
}
Just an example of what I am expecting.
Try to use mixin to achieve this.
//define the mixin
.margin-top(#value) {
.margin-top-#{value}{
margin-top:#value;
}
}
//use the mixin like this
.margin-top(20px);
U can try it here: http://winless.org/online-less-compiler
Is there a way to directly assign a CSS value to a SASS variable, like this:
$var:padding: 20px/1440px * 100%;
I know that I can to this:
$padding: 20px/1440px * 100%;
padding: $padding;
But is there a way to directly assign a value in CSS to a variable? Basically to have it on a same line.
not possible to use a variable directly, you could use a mixin instead:
#mixin pad{padding: 20px/1440px * 100%;}
.div-with-padding{#include pad;}
http://jsfiddle.net/gTsG9/
no its not possible to assign directly from the variable. you have to use mixin for that.
sample :
#mixin ur_padding
{
padding:20px/1440px * 100%
}
.ur_div_here
{
#include ur_padding;
}
You could assign a css value like a string:
$var:"padding: 20px/1440px * 100%";
But I really don't know how is this going to help you. Mixin is the best way.
Short description:
I'm using scss with compass, I need to know that the class exists or not.
Long Description:
What I'm trying to do is create a mixin for margin. We can pass the margin we need for all the dimensions and if will check dose any class exists for that dimensions if yes than it will extent it else will apply the dimension. For example:
I already have .mr5 class which is
.mr5 { margin-right: 5px; }
Now if the value passed in the mixin for the right dimension is 5 than I want to check if first something like
if ( exist .mr5 ) { #extend .mr5; } else { right: $dimension; }
I don't think it's possible to check for the existence of a class. I found this issue on the Sass github page, which asks for something similar, but got closed with the following comment that you can use the !optional flag for this:
The !optional flag is provided for handling classes and placeholders that may not exist.
For example:
.<your_class> {
.mr5 { margin-right: 5px; }
}
<your_selector> {
#extend .mr5 !optional;
}
}
See also the SASS reference on this flag for more info.
So I did a bit of research around here and was unable to find an answer, so hopefully, somebody here can help me out...
I have the following SASS code
$column: 7;
table
{
th:nth-child($column)
{
// This does NOT compile
}
th:nth-child(7)
{
// This does compile
}
}
Why is it that using the nth-child selector in combination with a variable does not compile within SASS? Is there any alternative I can go about using a dynamic value with the nth-child selector?
A variable must be interpolated when used with a selector (e.g. as an argument to a functional pseudo-class). In your case, the syntax should look something like this:
$column: 7;
table
{
th:nth-child(#{$column})
{
// ...
}
}