I have been working on a way to build a carousel purely with html and css.
No Javascript.
So far I have been liking what I found in the web and seen some tutorials.
Here is my issue though.
I build a mixin loop with Less to build a bunch of css but for some reason it seems to be missing a closing brace ")" on line 4 (of the pasted code below).
What I tried:
Remove the block of Less code completely -> error dissapeared.
Removed all the code inside the .carousel-reviews -> error persists
removed the the .carousel-reviews around the child selector -> error persists
Changed the variable name from #i to #index -> error persists
Removed all the code from inside the &__activator:nth-of-type( #i ) selector -> error persists
Hope someone can see what I am doing wrong here.
.loop( #i ) when ( #i > 0 ) {
.carousel-reviews {
&__activator:nth-of-type( #i ) {
&:checked ~ .carousel_track {
transform: translateX(calc(#i - 1) * 100%);
}
&:checked ~ .carousel__slide:nth-of-type(#i) {
transition: opacity #slideTransition, transform #slideTransition;
top: 0;
left: 0;
right: 0;
opacity: 1;
transform: scale(1);
}
&:checked ~ .carousel__controls:nth-of-type(#i) {
display: block;
opacity: 1;
}
&:checked ~ .carousel__indicators .carousel__indicator:nth-of-type(#i) {
opacity: 1;
}
}
}
.loop ( ( #i - 1 ) );
}
If I was not complete enough please let me know and I can add the info to the question.
EDIT 1
It seems that the compilers are stopping when they get to the first #i on line 4.
For some reason when I remove that first variable the error moves to line 8.
This suggests that for some reason the variable #i is not allowed inside the :nth-of-type().
Anyone know what is going on here? I will keep searching and updating when I find new answers or questions
EDIT 2
Found the sollution. Check answer
So it seems that I found the issue.
It seems that the problem is with less itself regarding the use of variables inside the :nth-of-type().
When I was removing the variables from the nth-of-type I noticed the error moving to a new line that also included the nth-of-type.
When I went to look up the use of variables in less I couldn't find anything bu later I came across a post here in stack overflow
THIS ANSWER BY MARTIN TURJAK
I would advice to check it out.
But in short, there seems to be an issue with the variable use and you have to use it as if you are using it inside a string like this :nth-of-type(#{i}).
Hope this helps others strugling with this same issue.
I currently don't have the time to find out why this happens an I haven't got a clue either but if there is someone that can explain this that would be awesome.
Anyways, thanks for your time and have a great day!
Related
I'm having a strange issue I haven't seen occur. I am trying to do some basic addition to some variables like this:
#screen-break-sm: 768px;
#screen-break-md: 992px;
#screen-max-mobile: #screen-break-sm;
#screen-min-desktop: #screen-break-sm + 1;
Then, those values are being used in some media queries. When it is compiled using gulp-less (version ~3.0.0 in package.json) via Gulp, the output ends up being something like:
#media (min-width:768px + 1) {
// CSS
}
I'm expecting:
#media (min-width:769px) {
// CSS
}
I have tried doing the addition as both #screen-break-sm + 1 and also screen-break-sm + 1px. I've also tried removing the px part of the original values and doing the add and appending the px afterwards, but that doesn't add either.
In case it is relevant, this is one of the gulp scripts that builds a section where I first ran into this issue:
module.exports = function (build) {
return function () {
var pagesPath = build.options.styles.buildPath + '/pages/';
return build.gulp.src('./resources/assets/less/pages/**/*')
.pipe(build.plugins.less({
paths: [ build.plugins.path.join(__dirname, 'less', 'vendor', 'theme', 'bootstrap') ]
})).on('error', build.errorHandler)
.pipe(build.plugins.minifyCss()).on('error', build.errorHandler)
.pipe(build.plugins.extReplace('.min.css')).on('error', build.errorHandler)
.pipe(build.gulp.dest(pagesPath));
};
};
Any ideas why LESS is concatenating/appending instead of performing addition?
[EDIT]
While the solution is the same as the other question that was identified as a possible duplicate, that question does not discuss the problem that users will encounter directly, and therefore I think this question is much better suited for searching purposes. I never found that solution after an hour of Googling and only after getting the answer and the "strict math" verbiage did that other question show up.
Look at strict math option which default value is OFF. Are you sure that for some reason you don't have it set to ON?
lessc -sm=on
lessc --strict-math=on
I have a couple of SCSS selectors where I use the below code which works fine:
.order-summary{
background-color: #e2f0f3;
padding: $padding-large-horizontal+5;
}
but whenever I change to below code (as negative value) it shows error
.order-summary{
background-color: #e2f0f3;
padding: $padding-large-horizontal-1;
}
$padding-large-horizontal is already defined as base 12px;
Any help would be appreciated. Thanks.
Just use like below
padding: ($padding-large-horizontal - 1);
The problem is only due to the dash. SASS thinks that $padding-large-horizontal-1 is the name of the variable. You have to separate as well:
$padding-large-horizontal -1
I caught this warning under a less file under PHPStorm IDE:
Nonshortand property width has shortthand value
The problem code is below:
#body-width: 1000px;
.block-posts {
width: #body-width*0.5-25px;
}
Well, I see that should be a warning, that #body-width has a dash separator, and it take ambiguity into that sentence, which makes arithmetic operates on it.
Add I checked the style of less on the official site: http://lesscss.org/
It seems using a dash sign in a variable name is widely acceptable.
So how to adapt my code style to fix this warning?
And what do this warning exactly means?
Please help.
I was having trouble with how an image is displaying and so I ran it through the W3C CSS validator and I received this code. I tried to search around for what it might mean but couldn't find much help. I found some people saying that it might be because of special characters in the CSS so I checked that in notepad ++ and didn't find anything.
2840 #whoweare img
Lexical error at line 2838, column 10. Encountered: " " (32), after : "#" post-9 #whoweare { width:100%; }
# post-9 #whoweare {
width:100%;
}
Line 2840 is the last one.
Any ideas what this might be?
Thanks for the help.
Remove the space between # and post-9 you have a descendant combinator between them.
#post-9 #whoweare {
width:100%;
}
I have been searching in Google etc., but I couldnt find what I was looking for (I hope I didnt overlook something).. So I thought my best bet is to ask you guys :)
I am playing around with LESS-JS for the first time and I really like it. However I have a little problem now.
I am using the #arguments variable like this:
.basicBorder(#width:1px, #type:solid, #color:#black){
border:#arguments;
}
Which works as expected. Now when I want the border to be red, I am adding this to the element in my css:
.basicBorder(1px, solid, #red);
Which also works as expected. However I would like to avoid writing 1px, solid,, since these are my default values already, but when I try this:
.basicBorder(#red);
Or this:
.basicBorder(,,#red);
It doesnt work.
So I was wondering if any1 knows how I could "skip" the first 2 variables so that I can just input the color in case I dont want the border-width and type to be changed.
I hope you get what I am trying to say!
Regards!
You actually can name later parameters and skip the first ones. The syntax for your question is:
.basicBorder(#color:#red);
You can also use normal ordered arguments at the beginning and pluck out named arguments from the rest of the parameters:
.basicBorder(2px, #color:#red);
This sets #width to 2px, #type to the default, and #color to #red. Really nice if you have more seldom used arguments.
The parametric mixins in LESS works sorta like javascript functions, you can't skip the first parameters. So if you want to only change the color, you could rewrite the mixin like this:
.basicBorder(#color:#black, #width:1px, #type:solid){
border:#width #type #color;
}
Then you'd be able to call it like this:
.basicBorder(#red);
.basicBorder(#red, 2px, dotted);
edit
Using your original mixin, you could also create these
.basicBorderType(#type) {
.basicBorder(1px, #type, #black);
}
.basicBorderColor(#color) {
.basicBorder(1px, solid, #color);
}
Now you could overwrite any of the styles:
.basicBorderType(dotted); //1px dotted black;
.basicBorderColor(#red); //1px solid red;
.basicBorder(2px); //2px solid black;
A bit of a hack, but it's the only thing I can think of to help you out...