less

问题 I have updated a gem in the Gemfile and started facing the Grease::Adapter error after running "bundle" command. The problem seems with the css of my application. The error is given below: NoMethodError: undefined method `new' for #<Grease::Adapter(Less::Rails::ImportProcessor):0x0000000205dfc0> I am using rails version "4.1.8". Can anyone help me how to resolve this? 回答1: The issue was resolved and it was due to the "grease" gem dependency for updated "less-rails" gem (v3.0.0). "Grease"

问题 I was interested whether can I pass value to the css class from the html? Like this Example: <div class="mt(5)"> Some text </div> style { .mt(@mpx) { margin-top: @mpx px; } } I've heard that such way was possible in Less 回答1: No, the way you want it is impossible in either CSS or any of its supersets (like Less and others). It's always HTML that uses values from CSS and not in opposite. Thus you'll need some scripting for what you need. You can however pass values from HTML to CSS via Custom

问题 I'm trying to get the maps function to work in the following scenario: @state-colors: { @light: { hover: blue; focus: red; active: green; } } .mdc-states-on(@state; @tone) { &:@{state}::after { background-color: @state-colors[@@tone][@@state]; } } .mdc-button-state-on(@tone) { .mdc-states-on(hover; @tone); } As you can see, I call mdc-button-state-on , which then creates the property I need via mdc-states-on . The above doesn't currently compile. The issue is with the @@state value. As a

问题 I have a function written in jQuery that automates the margin-bottom or padding-bottom (conditionally) of a table. Basically it negates the effect of the table cells' borders pushing down the page, keeping the vertical rhythm intact. Instead of using JS to do this, I believe I should be able to with Less and CSS instead. The condition (if-statement) is based on the number of rows (and thus borders, plus one more) in the table. Since my "magic number" is 24 (24px is the vertical rhythm unit),

问题 When I hover over a mixin it shows me the properties, which is awesome! However, I have many referenced files and it does not show those. It says, "Undeclared mixin". Seems this would be a standard feature considering that many break up styles into like sections (reset, grid, fonts, etc.). thanks. 回答1: If I understand you correctly, you have imported less files and you would like to get intelliSense on things like mixins and variables when you hover over them. This can be done by referencing

问题 I've recently installed less in Ubuntu 14.04 but it doesn't work at all. I've installed npm and node via sudo apt-get install node npm and then I've installed less with npm -g install less Problem is that every time I try to run lessc bootstrap.less > theme.css the output is an empty css file. 回答1: I've found a solution to this problem. I wrongly installed the node package instead of nodejs . After removing node and installing nodejs I got this error /usr/bin/env: node: No such file or

问题 This question already has answers here : How do CSS triangles work? (18 answers) CSS triangle with background image [duplicate] (3 answers) Closed 5 years ago . I am trying to make the following with CSS Making a triangle with CSS is straightforward but I don't know how to give it a non-solid background. Any suggestions? edit: The background pattern is a PNG image. 回答1: .triangle { width: 160px; height: 160px; position: absolute; top: 30%; left: 45%; clip: rect(auto, 180px, auto, 100px);

问题 I have: @gutter-xs-width: 20; and @class: 'xs'; I'd like to have something like: padding-left: @gutter-(@class)-width; How can I do it? 回答1: That is very much possible in Less and the below is how it is done: (tested in Less v2.5.1) @gutter-xs-width: 20; @class: 'xs'; a{ padding-left: ~"@{gutter-@{class}-width}"; } For concatenating the value of a variable with a static string, the format that is generally used in Less is "string1-@{string2}" . @{string2} evaluates the value contained within

问题 Sorry for the horrible question wording, let me explain. For a project I'm working on, I'd like to manage various dependencies for my LESS files on the server. Because of the way the project is structured (different components symlinked in different ways), it's much more limiting to just use @import to build dependencies etc. Ideally I'd like to just spit out a list of required LESS files in the section, e.g.: <link rel='stylesheet/less' href='/path/to/some/file.less' type='text/css' media=

问题 I have the following less mixin: @myColor = #123456; .mixin(@a) when (@a = @myColor){ // do something } This however throws this error: Unable to perform comparison Why is that? 回答1: It would appear (as of lesscss 1.2.2) that guards only support comparing Dimensions and Keywords. (search the source for "compare:") So, sadly, comparing two colors or strings just won't work. 回答2: UPDATE : Four thoughts (again, I don't have experience with LESS itself, I'm just looking at documentation). Is the