lesshat
Smart LESS CSS mixins library.
LESS Hat. A kick-ass LESS Mixin Library for Everyone.
We are using dotless in .NET websites, so we can just include .less files directly in the Views.
We are now trying to use LESS Hat. But apparently dotless failed to compile it?
Unexpected '}' on line 513 in file 'lesshat/build/lesshat.less':
[512]:
[513]: }
^
[514]:
Has anyone experienced this issue? Or know any workaround?
Source: (StackOverflow)
I just download and include the lesshat.less file. then i get error in frontend:
0 - parse error: failed at `var r="@{arguments}";return r=r.replace(/^\[|\]$/g,"")})())`;` /templates/km/less/lesshat-prefixed.less on line 101
any idea?
Source: (StackOverflow)
In grunt-contrib-stylus there is a import option:
import
Type: Array
Import given stylus packages into every compiled .styl file, as if you wrote '@import '...' in every single one of said files.
options: {
compress: false,
use: [ require('kouto-swiss') ],
import: [ 'kouto-swiss' ]
},
How can I do the same thing with lesshat in grunt-contrib-less ?
Thanks
Source: (StackOverflow)
The following example is using the LESS HAT Mixin Lib 3.0.2:
.a {
color: blue;
}
.b {
color: green;
}
.keyframes(~'myanimation,0%{ .a() } 100%{ .b() }');
I'm not quite sure if the answer here is the best possible solution:
CSS Less mixins for keyframes
I'm looking for a way to have several mixins fit in keyframes.
Source: (StackOverflow)
I'd like to make the popular LESS library LessHat available to my Brunch template but I want it done in a way that I can:
- Take advantage of the Bower integration so I always have the latest
- Rather than having the library transpiled to CSS I want the LESS to be made available to my own custom LESS files
Is this possible? A step too far? Obviously, it's not hard to put the static LESS file into my app/stylesheets directory but this makes the linking static and I don't get the Bower integration which would be pretty slick.
Source: (StackOverflow)
I have a strange problem: the site I build is using flexbox and LESSHAT. The strange thing I encounter is that it doesn't render correctly i.e. flexbox things seems to be omitted.
However, if I hit F12 and reload the page it is rendered is it should.
What is wrong?
UPDATE - This is the code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=0, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />
<link rel="stylesheet" rel='nofollow' href="css/style.css">
</head>
<body>
<div class="c header">
<div class="box">Title</div>
</div>
<div class="box content">
<div class="cv flex page">
<div class="cl item">
<div class="cvl flex item-title">
<div class="cl">Item 1</div>
<div class="cl">
<div class="c button">1</div>
<div class="c button">2</div>
<div class="c button">3</div>
</div>
</div>
<div class="cl item-more">
>>
</div>
</div>
<div class="cl item">
<div class="cl flex item-title">
Item 2
</div>
<div class="cl item-more">
>>
</div>
</div>
<div class="cl item">
<div class="cl flex item-title">
Item 3
</div>
<div class="cl item-more">
>>
</div>
</div>
</div>
</div>
<footer>
</footer>
</body>
</html>
Style CSS is compiled from this LESS file:
@import "lesshat";
* {
margin: 0;
padding: 0;
}
.header {
width:100%;
height: 48px;
background: #0000ff;
color: #fff;
}
.content {
width:100%;
background: #00ff00;
}
.page {
width:100%;
background: #00ffff;
}
.item {
background: #ffff00;
margin: 5px;
}
.button {
width: 30px;
border: 1px solid #efefef;
}
.box {
.display(flex);
}
.c {
.display(flex);
.justify-content(center);
.align-items(center);
}
.cl {
.display(flex);
.align-items(center);
}
.cv {
.display(flex);
.flex-direction(column);
}
.flex {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
Source: (StackOverflow)
I'm relatively new to LESS. It's impressive, and I'm really enjoying working with it thus far, but I'm curious to know: Can I use results produced by mixin functions and concatenate them with strings. I'm including an example with LESShat, which offers a number of Mixin Functions, including a function that generates keyframe animations. The issue being that the Keyframe function needs to be passed a string including properties, and I'm wanting to use other mixins from the LESShat library instead of css properties to generate such keyframe animations.
Original .less File:
@import "css/lesshat.less";
.keyframes(~'myskew, from {.skew(0)} to {.skew(90)}');
.myskewclass {
.animation(myskew 3s linear alternate)
}
Resulting .css File:
lesshat-selector{-lh-property:0}
@-webkit-keyframes myskew{from{.skew(0)}to{.skew(90)}}
@-moz-keyframes myskew{from{.skew(0)}to{.skew(90)}}
@-o-keyframes myskew{from{.skew(0)}to{.skew(90)}}
@keyframes myskew{from{.skew(0)}to{.skew(90)}}
.myskewclass{
-webkit-animation:myskew 3s linear alternate;
-moz-animation:myskew 3s linear alternate;
-o-animation:myskew 3s linear alternate;
animation:myskew 3s linear alternate
}
Obviously not quite what I was going for as the keyframe animations still contain the skew functions and not the values returned by the skew functions. I believe the problem may be that I'm trying to pass other mixins from LESShat inside of the string. So, is there some manner of concatenating strings and mixin functions in LESS? Keep in mind, I'm a total NEWB to LESS. I would simply rather not have to write my own cross-browser transforms. It'd me cool if it could all be automated using LESS. I'm obviously doing it wrong.
The following link describes the .keyframes and .skew functions from LESShat, but I see nothing regarding the mixing of the two mentioned. Maybe I somehow missed that part.
https://github.com/madebysource/lesshat/blob/master/README.md
Source: (StackOverflow)
i have tried to work with lesshat. I have uploaded lesshat.less mixins libruary to my project root folder. And created 1 .less file - lesshat-tests.less with only one selector and mixin call.
@import "lesshat";
div {
.background-image(linear-gradient(to bottom, #fb83fa 0%,#e93cec 100%));
}
I have tried to compile that file with Webstorm less css compiler plugin, and using node.js module less command lessc. Lessc makes empty file, webstorm plugin generate error that tells that plugin can't evaluate JS function.
I saw this mixin using some functions. But i can't get any information about using JS inside less.
Help me please.
Source: (StackOverflow)