less

Semantic Grid with Bootstrap + LESS Mixins ¿ HOW?

由 被刻印的时光 ゝ 提交于 2019-12-18 10:57:28
问题 Twitter bootstrap documentation talks about three mixins to generate grid systems: .container-fixed(); #grid > .core(); #grid > .fluid(); I know how to setup the page to use bootstrap and less... But I don't know how to use the grid system semantically. The documentation says what mixins to use but not how... ¿ Could anyone ilustrate how to use them in order to create semantic grids ? Just to figure out or to see how it works :S Thank you !! 回答1: In navbar.less of bootstrap you will find the

Using mixins in bootstrap 3 to avoid unsemantic markup for layout structure

由 梦想的初衷 提交于 2019-12-18 10:53:01
问题 I'm relatively new to both bootstrap and less and this is a test run. The goal is to take the bootstrap classes and turn them into simple and semantic classes using less. I keep getting error messages saying that .col-sm-12 and .col-md-8 are undefined. How do I do resolve this issue. /*less styles file*/ @import "bootstrap.min.css"; @boom: #ea7000; @screen-sm: ~"(min-width:768px)"; @screen-md: ~"(min-width:992px)"; @screen-lg: ~"(min-width:1200px)"; .tim { height: 200px; @media screen,

Google Chrome “Failed parsing SourceMap” : css.map (Web Essential)

由 帅比萌擦擦* 提交于 2019-12-18 10:43:21
问题 Visual Studio 2013 UP5 + Web Essential's (v. 2.6.36) generated css.map files are invalid in "Google Chrome", however it is valid in "Firefox". Due to this it became impossible to debug less files in google chrome. Currently, I am using Web Essential 2.6.36 (+ Visual Studio 2013 Up5). I can disable the source map from google chrome's developer's setting. Which will remove those errors, however still we cannot debug less files and change the style. Which is a terrible problem. Any advice will

LESS file does not load (404)

由 可紊 提交于 2019-12-18 10:27:09
问题 I'm using IIS 7.5 and I'm unable to load the less file because it gives a 404 error. HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Less Tutorial</title> <link rel="stylesheet/less" href="style.less" /> <script src="less-1.0.41.min.js"></script> </head> <body> <div id="container"> <a href="#">My Anchor</a> </div> </body> </html> LESS: @primary_color: green; #container { width: 200px; height: 200px; background: @primary_color; } 回答1: When using Asp.Net you can

LESS CSS retina media queries without redundancy

由 懵懂的女人 提交于 2019-12-18 09:47:43
问题 I am using a component-based CSS style, so I have been using mixins to allow me to use media queries without accidentally compiling hundreds of them. This is what I am doing for screen sizes: Main file: .mq-medium() {} @import //other files @media only screen and (min-width: 600px) { .mq-medium; } Another file: .mq-medium() { .banner { width: 50%; } } This can be used several times and results in grouped queries. The Problem I am trying to do the same thing for retina background-image queries

Less inheritance fails with “undefined class”

由 老子叫甜甜 提交于 2019-12-18 09:28:58
问题 I'm using Bootstrap 3.1.1 and adding my own LESS styles with semantic names. Using grunt-customize-bootstrap I've added mystyles.less at the end of bootstrap.less , just before the inclusion of responsive-utilities.less (I don't know why, that's grunt-customize-bootstrap 's default behavior, but even in the last position the issue remains). I defined my own dropdown menu like this: .my-dropdown { .dropdown; > .my-toggle { .dropdown-toggle; } } This is how it is defined in bootstrap's panels

multiple nested selectors with variables in Less

由 不羁岁月 提交于 2019-12-18 07:24:41
问题 I want to build some CSS along these lines: h1,h2,h3,h4,h5,h6 {some rule} h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {color: inherit;} h1 span,h2 span,h3 span,h4 span,h5 span,h6 span {another rule;} It would be useful if I could create a variable like this: @headings: h1,h2,h3,h4,h5,h6; and then maybe do something like this: @{headings} { & a {color: inherit;} } Unfortunately this gives me: h1, h2, h3, h4, h5, h6 a { color: inherit; } Is what I want possible? This is a simple version of what I want to do

SimpLESS won't compile initializr generated Bootstrap

由 烈酒焚心 提交于 2019-12-18 06:56:49
问题 I just downloaded an intializr generated version of Bootstrap. I also installed SimpLESS to keep from having to constantly having to manually recompile my LESS files and to avoid using the in-browser compiler. SimpLESS however, refuses to compile the very basic style.css file in my directory. It spits up: Result of expresiin style.less on 'e.message' [undefined] is not an object. Note: "Expression" is indeed spelled the way it appears above. My style.less file currently looks like this:

Concatenate String in LESS in loop

由 对着背影说爱祢 提交于 2019-12-18 04:50:26
问题 I'm working on converting Unsemantic from SASS to LESS and while I'm building the loop to create my classes: .populateGridClasses (@index, @interval) when (@index > 0) { @num: @index * @interval; (~".eh-grid-@{num}, .eh-mobile-grid-@{num}, .eh-tablet-grid-@{num}") { .grid(); } .populateGridClasses(@index - 1, @interval); } .populateGridClasses (0, @interval) {} // Create the grids in an inverval of 5 .populateGridClasses(20, 5); // Create the grids in thirds .populateGridClasses(3, 33); It

How to set the CSS class name dynamically in LessCSS?

由 爷，独闯天下 提交于 2019-12-18 03:39:44
问题 I need to add a dynamic name to a CSS class to create a more specific decendent selector. Here is my Less code: @scope: name; //line1 .@scope .ui-widget{ color: #fff} //line2 But I am getting a parser error at line2. Is there any way to set the CSS class name dynamically in LessCSS? 回答1: Support was added to less.js and dotless in version 1.3 You have to use brackets and an escaping string.. e.g. (~".@{scope} .another") { color: #fff; } Edit This format is deprecated. less 1.3.1 (currently
订阅 less