less | 易学教程

Add prefixes to CSS class names using LESS or SASS

阅读更多关于 Add prefixes to CSS class names using LESS or SASS

问题 I am trying to use Bootstrap on a project that encompasses 400+ sites and uses the previous CSS class names (which I have no control over). I've been running into some CSS name clashing and the solution for me is to add a prefix to Bootstrap (.row to .tb-row for example). I am familiar with the method of adding a namespace using LESS, where an additional class is wrapped around the classes. Unfortunately, this doesn't look like it will solve my issues. Is there a method via LESS, SASS, or any

Tilde in front of .box-shadow value

阅读更多关于 Tilde in front of .box-shadow value

I was looking at bootsrap mixins.less and noticed a tilde in front of box-shadow value. What purpose does it serve? If my website supports IE9 and higher should I be using it? .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}"); Hashem Qolami That is the tilde-quote CSS escaping . In LESS, a tilde ~ before a string "" literal outputs the string as-is, because it may be a syntax error in pure LESS. In this particular instance , it's used in order to escape the comma , character at the string which belongs to the multiple values of box-shadow property. Because the comma is

Using LESS with node.js

阅读更多关于 Using LESS with node.js

问题 Less is amazing and I want to use to node.js because using less.js is not a good performance. I testing purpos i'm using xamp on windows and I install node.js but where and what i should write.. I install express.js npm install -g express and less npm install -g less 回答1: If you're using expressjs you can install npm install less-middleware and then in your application (app.js) var lessMiddleware = require('less-middleware'); then you have to tell expressjs to use less-middleware by doing app

Read hex data into less

阅读更多关于 Read hex data into less

I want to give a big data file to less -s -M +Gg such that read current given data in less -s -M +Gg . While-loop example (see ntc2's answer) Less command explained here . Replacing the yes by a binary file which is converted to binary ascii and hex: while read -u 10 p || [[ -n $p ]]; do hexdump -e '/4 "%08x\n"' {$p} \ \ | less -s -M +Gg done 10</Users/masi/Dropbox/7-8\:2015/r3.raw where the looping is based on this thread here . How can you read such data into less? I don't understand the details of the example, but I think you want to put the less outside of the loop, like this: while read

multiple nested selectors with variables in Less

阅读更多关于 multiple nested selectors with variables in Less

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 but I would also find useful for working with HTML input types and other instances of multiple

Returning generated CSS from an MVC5 or Web API 2 controller action

阅读更多关于 Returning generated CSS from an MVC5 or Web API 2 controller action

In our multi-tenant application we have a need to customize the styles used per-tenant. We currently plan to do so using LESS and variables in the following way on the client : Download dependent LESS files from server Call web service to get configuration object Form string of valid LESS with variables defined Use less.js compiler to compile LESS based on these variables and the fixed LESS files from step 1 This approach has a number of downsides: Clients can behave badly Some browsers have problems with less.js Compilation takes time We would instead like to take care of this work on the

How to update variables in .less file dynamically using AngularJS

阅读更多关于 How to update variables in .less file dynamically using AngularJS

I am very much new to AngularJS. I want to update the .less files variable dynamically. But didn't get how to access this .less file using AngularJS. My code: style.less @bg-color: #484848; .header{ background: @bg-color; } I want to update @bg-color: #484848; present in the style.less file to some value input by user. How can I get this using AngularJS. You should run Less in browser to do this. If you load less.js in your HTML, the global less object come available, so you can use less.modifyVars() and less.refreshStyles() inside your angularJS code: <!doctype html> <html lang="en"> <head>

LESS combine ruleset into two with different variables

阅读更多关于 LESS combine ruleset into two with different variables

I'm trying to combine one ruleset into two different rulesets with variable values swapped. Main purpose is LTR/RTL internationalization. Usage: h1 { margin-top: 10px; .directions({ margin-@{left}: 5px; }); } Expected output: h1 { margin-top: 10px; } .ltr h1 { margin-left: 5px; } .rtl h1 { margin-right: 5px; } I was able to get some results with the Passing Rulesets to Mixins function available in Less 1.7 .directions(@rules) { @left: left; .ltr & { @rules(); } @left: right; .rtl & { @rules(); } } The problem is that the @left variable is always set to the last value used in .directions()

构建工具-Gulp 相关知识

阅读更多关于构建工具-Gulp 相关知识

layout: layout title: 『构建工具-Gulp』相关内容整理 date: 2017-04-26 22:15:46 tags: Gulp categories: Tools --- Gulp- 简介 Automate and enhance your workflow | 用自动化构建工具增强你的工作流程 Gulp 是什么？ gulp是前端开发过程中一种基于流的代码构建工具，是自动化项目的构建利器；它不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用它，不仅可以很愉快的编写代码，而且大大提高我们的工作效率。 gulp是基于Nodejs的自动任务运行器，它能自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。通过本文，我们将学习如何使用Gulp来改变开发流程，从而使开发更加快速高效。 gulp 和 grunt 非常类似，但相比于 grunt 的频繁 IO 操作，gulp 的流操作，能更快地更便捷地完成构建工作。 Gulp的核心概念？流

apply color function on evaluated string color

阅读更多关于 apply color function on evaluated string color

I have loop in less which is iterating throw numbered variables with colors. It's working fine when I need just evaluate color but not when I want also change color with function. @cat-1:#c40009; .... .gen-cats-filter (@index,@prefix) when (@index > 0) { .@{prefix}@{index}{ background-color: ~"@{cat-@{index}}"; &:hover{ background-color: darken(~"@{cat-@{index}}", 20%); } } .gen-cats-filter(@index - 1,@prefix); } .gen-cats(14,cat); but this throws error. is there way how to make it work and on hover make color darker?? Recommended Solution: Actually, I made the above a lot more complicated