less

Using twitter bootstrap with rails assets pipeline and less

由 假装没事ソ 提交于 2019-12-23 15:33:14
问题 How to integrate properly twitter-bootstrap-rails gem with the assets pipeline? I've followed installations steps and currently I have this application.css *= require_self *= require bootstrap_and_overrides And then in bootstrap_and_overrides.css.less I'm importing other controllers stylesheets in order to make them work with my variables defined in the overrides file and to be able to use bootstrap mixins within the controller specific stylesheets in <controller-name>.css.less files.

CSS preserve aspect ratio but fill parent div

由 谁说胖子不能爱 提交于 2019-12-23 15:13:05
问题 Basically, I have an image that I want to mask with a circle. <div class="thumbnail-mask"> <img class="thumbnail-pic" src="/image.jpeg"> </div> The CSS (I'm using LESS) is pretty simple: .thumbnail-mask { width: @circleSize; height: @circleSize; border-radius: @circleSize/2; -webkit-border-radius: @circleSize/2; -moz-border-radius: @circleSize/2; overflow: hidden; } I've figured out how to center the image within the parent both vertically and horizontally .thumbnail-pic { text-align: center;

2、Less-混合

由 ╄→尐↘猪︶ㄣ 提交于 2019-12-23 13:01:42
混合 混合就是将一系列属性从一个规则引入到另一个规则中 1、普通混合 2、不带输出的混合 3、带参数的混合 4、但参数并且有默认值的混合 5、带多个参数的混合 6、命名参数 7、匹配模式 8、arguments变量 1、普通 混合（会将代码变异在css文件中） 此时大的div中嵌套了两个小的div 此时的less文件中会出现重复的代码 将重复的代码提出来再进行引用 此时的代码会编译到css文件中 2、不带输出的混合（不会编译到css文件中） 3、带参数的混合（） 此时再hunhe1()中添加相关的形参 4、但参数并且有默认值的混合 可以使用 @参数：默认值 5、带多个参数的混合 同上 6、命名参数 此时直接传入形参的值 7、匹配模式 类似使用集成的框架 把所有的可以调用的进行抽取成为一个文件 引入文件使用使用相关的方法 如引入jQuery再使用其中的方法 公共类.less .triangle(@_){ width: 0; height: 0; overflow: hidden; } .triangle(L,@w,@c){ border-width: @w; border-style: dashed solid dashed dashed ; border-color: transparent @c transparent transparent; } .triangle(R,@w,

LESS - what is the purpose of “&” AFTER a nested selector [duplicate]

由 随声附和 提交于 2019-12-23 12:58:35
问题 This question already has answers here : Ampersand (parent selector) inside nested selectors [duplicate] (3 answers) Closed 5 years ago . Less .list a{ .landscape&{ height: 100%; } } Outputs .landscape.list a { height: 100%; } Which means "all a tags whose parents have both .landscape and .list" Less .list a{ &.landscape{ height: 100%; } } Outputs .list a.landscape { height: 100%; } Which means "all a tags which have class 'landscape' and whose parents have .list" And that makes sense. But if

How do I get a 16 column responsive layout with Twitter Bootstrap 2?

由 好久不见. 提交于 2019-12-23 11:05:08
问题 I'm getting mixed signals from various forum posts. Does it exist natively by changing: // Default 940px grid // ------------------------- @gridColumns: 12; @gridColumnWidth: 60px; @gridGutterWidth: 20px; @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); to // Default 940px grid // ------------------------- @gridColumns: 16; @gridColumnWidth: 40px; @gridGutterWidth: 10px; @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (

CSS Preprocessor or PHP?

由 笑着哭i 提交于 2019-12-23 10:04:32
问题 If I'm writing code in PHP is there a reason why I would use a CSS Preprocessor instead of PHP? For example, I could use PHP in my CSS file by having this in my header: <link rel="stylesheet" type="text/css" media="all" href="style.php" /> That way I could pass it variables like style.php?color=#000 Or I could use something like LESS to preprocess my CSS. If I use less.js, I'm not sure how I would be able to pass variables like in the previous example. Now, I've heard that PHP CSS files can't

Is dotless the same exact syntax as the less css language?

由 末鹿安然 提交于 2019-12-23 09:29:31
问题 The .less library calls itself a port of ruby LESS library. Can I take away from that that they both are compilers for the same LESS file format or do they expect subtly different less code? Asked another way, am I locking myself in to the dotless library or can use dotless and the less javascript lib on the less files? 回答1: Dotlesscss is a straight (almost 1:1 port) of the JavaScript project less.js (a JavaScript implementation of LessCSS by Cloudhead the original author of LessCss for Ruby)

Bootstrap mobile first and media query grouping

由 旧街凉风 提交于 2019-12-23 09:20:03
问题 I am using latest bootstrap for a project. I am confused about the bootstraps mobile first approch and the less file structure my file structurte is ---css ---js ---less ---mixins -----.. -----... ----Custom_files ---------main.less --------- component1.less --------- component2.less All my custom less files live in Custom files folder. I am trying to generate a different stylesheet for custom css without touching the bootstrap.min.css at all In main.less file i have imported all the

VS Web Essentials 2012 compile master LESS on imported save

由 末鹿安然 提交于 2019-12-23 07:40:07
问题 I am trying to maintain a global .less file which @imports the rest of the application .less files. I am currently developing this project in Visual Studio 2012 using the Web Essentials extension which automatically generates css files on save. However it only compiles the .less file which has just been saved and it's children and I want upstream "master" .less files which @import the current file to be compiled. Anyone know how to do this? 回答1: In the latest nightly build, you now have an

grunt-contrib-less cannot find source files even though path is correct

由 ﹥＞﹥吖頭↗ 提交于 2019-12-23 06:54:19
问题 I'm trying to get grunt-contrib-less to compile a less file for me. I have the following gruntfile: less: { files: { "httpdocs/static/assets/css/result.css": "httpdocs/static/assets/css/dashboard.less" } }, The paths are definitely correct, I've triple checked that those files exist, yet, when I run grunt I get the following message: Running "less:files" (less) task >> Destination not written because no source files were provided. What am I missing from my gruntfile to make it properly
订阅 less