less

Twitter's Bootstrap 3 grid, changing breakpoint and removing padding

由 ￡可爱￡侵袭症＋ 提交于 2019-11-27 00:52:15
I m trying to move to the new boostrap 3 grid and I m facing some difficulties. How to have the grid to stack below 480px but not between 480px and 768px? above 768px the padding left of the first and the padding right of the last are outside the container, but below 768px the padding is inside the container so the look is different because the content is no more aligned with a container that could be above. when the grid stack the padding remain but to me it should be at 0. Any help would be welcome I m using the code below with bootstrap 3 RC1 <div class="container" style="background-color:

Compile a referenced LESS file into CSS with PHP automatically

由 亡梦爱人 提交于 2019-11-27 00:52:12
I want the following things to occur: Have the process automated server side. Simply be able to reference the LESS file as I would a CSS file in my code. The user is returned minified CSS instead of the LESS file - cached so the compiler doesn't need to run unless the LESS file has been updated. For this to work with any LESS file that is referenced anywhere within my domain. I spotted Lessphp , but the documentation isn't very clear, nor does it explain how to dynamically get any LESS file to it. I thought I would post up how I got it all working as I haven't seen a run through on how to

Bootstrap 3: adding a new set of columns

由 核能气质少年 提交于 2019-11-27 00:29:09
问题 I've been using Bootstrap 3 for a while and now I need to make a new set of extra small columns for horizontal mobiles (e.g. 384px screen width) and after this use it as follows: col-xxs-1 , col-xxs-2 , col-xxs-offset-5 , hidden-xxs , etc. Are there some Bootstrap Less mixins for this purpose? I'm not sure how to use them edit: There is a Bootstrap mixin called .make-grid() , but I can't make it work. 回答1: Code for col-xxs-x , col-xxs-offset , col-xxs-push , col-xxs-pull : Add this code: .col

CSS3 Keyframe Animations: End and stay on the last frame

由 谁说胖子不能爱 提交于 2019-11-27 00:21:20
问题 I've run into some difficulty trying to play a CSS3 keyframe animation and have the relevant element stick at the last frame after the animation has completed. To my understanding, the property that I have to set for this to work should be animation-fill-mode, which should have the value of forwards; this doesn't do anything. .animatedSprite { .animation-name: sprite; .animation-duration: .5s; .animation-iteration-count: 1; .animation-direction: normal; .animation-timing-function: steps(3);

How do I convert a hexadecimal color to rgba with the Less compiler?

由 泄露秘密 提交于 2019-11-26 23:58:48
问题 I have the following code: @color : #d14836; .stripes span { -webkit-background-size: 30px 30px; -moz-background-size: 30px 30px; background-size: 30px 30px; background-image: -webkit-gradient(linear, left top, right bottom, color-stop(.25, rgba(209, 72, 54, 1)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(209, 72, 54, 1)), color-stop(.75, rgba(209, 72, 54, 1)), color-stop(.75, transparent), to(transparent)); I need to convert @color to rgba(209, 72, 54, 1)

Fancy Media Queries with some LESS Magic

由 放肆的年华 提交于 2019-11-26 23:47:36
问题 It would be nice to wrap css-styles for different resolutions within some css-classes using less. I'd like to do something like: footer { width: 100%; } .tablet { footer { width: 768px; } } .desktop { footer { width: 940px; } } At the end something like this should be the result: footer { width: 100%; } @media screen and (min-width: 768px) { footer { width: 768px; } } @media screen and (min-width: 992px) { footer { width: 940px; } } .tablet could look somehow like this: @media screen and (min

LESS transition mixin with prefixes

由 岁酱吖の 提交于 2019-11-26 23:40:42
问题 I was wondering if it's possible to create a LESS mixin that I could use like this: .transform(transition, .5s, ease-out); and has this CSS as output: -webkit-transition: -webkit-transform .5s ease-out; -moz-transition: -moz-transform .5s ease-out; transition: transform .5s ease-out; but I would also be able to use the same mixin for other properties (i.e. .transition(opacity, .5s) should output to -webkit-transition:opacity .5s; -moz-transition:opacity .5s; transition:opacity .5s; Thanks!

How to keep duplicate properties in compiled CSS file when use LESS?

由 两盒软妹~` 提交于 2019-11-26 23:39:54
问题 LESS code .foo { background-size: 200px; //for old browsers background-size: cover; } CSS expected .foo { background-size: 200px; background-size: cover; } but less.js remove the first background-size property in compiled CSS file. 回答1: AS already pointed out by @seven-phases-max clean-css removes these properties. Notice that the --advanced has been set by default. You should use the --skip-advanced option to prevent your double properties from being removed. According to https://github.com

Less js: Mixin property as an argument of another mixin?

由 怎甘沉沦 提交于 2019-11-26 23:26:01
问题 How could I create a mixin that uses as an argument a nested mixin property? I explain myself with the next example. I have a 'transition-property' mixin: .transition-property (@props){ -webkit-transition-property: @props; -moz-transition-property: @props; -o-transition-property: @props; transition-property: @props; } From this mixin I want to use a 'transform' mixin property, so I tried to call this like: .transition-property(~"opacity, .transform"); The '.transform' mixin should return one

Build list of selectors with LESS

由 喜你入骨 提交于 2019-11-26 23:06:50
General problem I have media queries, where I change certain text elements like so: body.single .entry-content p, body.single .entry-content ul, body.single .entry-content ol, body.single .entry-content table { line-height: 1.8; } How can I use LESS to build just the list of selectors, not the corresponding CSS values? My attempt I'm not looking for this answer or this answer , which include the CSS in the function. Instead, I imagine it used like this: /* .selector-list() { ... } */ @text-elements: p, ul, ol, table; .selector-list("body.single .entry-content", @text-elements); @selector-list
订阅 less