less.js | 易学教程

less.modifyVars not updating LESS variable

阅读更多关于 less.modifyVars not updating LESS variable

问题 My project has a requirement to have a user-editable theme. Meaning the users should have the ability to change the different colors used in the application. I've imported less.js (version 1.7.0) into my project and I've successfully called the less.modifyVars() function from my javascript but for some reason my less file isn't getting updated. My stylesheet is dynamically compiled by grunt. This is the code in head of the HTML: <link rel="stylesheet/less" type="text/css" href="/static/<%=

less.modifyVars not updating LESS variable

阅读更多关于 less.modifyVars not updating LESS variable

rem适配方案

阅读更多关于 rem适配方案

一、概念 ①em大小是基于父元素的字体大小 ②rem是相对单位，r是root的意思，在html页面上就是html标签，所以rem的大小是基于html元素的字体大小 < div class ="em" > hello world </ div > < div class ="rem" > hello world </ div > html { font-size : 50px ; } body { margin : 0 ; padding : 0 ; font-size : 50px ; } .em { font-size : 2em ; } .rem { font-size : 2rem ; } 二、rem适配 ①使用flex的伸缩布局、使用百分比的流式布局、使用媒体查询的响应式布局，共同点就是元素只能做宽度的适配（图片除外) ②rem适配可以实现宽度和高度都能做到适配，相当于等比缩放 ③适配基本思路：通过控制HTML上的字体大小去控制页面上所有以rem为单位的基准值控制的尺寸 ④ 换算公式：当前rem基准值 = 预设的基准值 / 设计稿宽度 * 当前设备的宽度三、rem适配实现 ①使用媒体查询实现适配 < header > hello world </ header > /* 假设的设备320px 640px */ @media(min-width:320px) { html{

普歌-码上鸿鹄团队复习总结H5+CSS3+Less

阅读更多关于普歌-码上鸿鹄团队复习总结H5+CSS3+Less

普歌-码上鸿鹄团队H5+C3+Less重点总结一、HTML 1.常用基本标签 1.1、文档结构标签 1.2、文本/字符格式标签 1.3、列表标签 1.4、排版标签 1.5、链接标签 1.6、多媒体标签 1.7 、表单标签 2.HTML5新增 2.1、语义化标签 2.2、多媒体标签 2.3新增input类型和属性二、CSS3新增 1.选择器 1.1基本选择器 1.2基本选择器扩展 1.3属性选择器 1.4伪类与伪元素选择器 1.5其他选择器 2.背景background 2.1 background-origin：规定背景图片的定位区域。 2.2 background-clip：规定背景的绘制区域。 2.3 background-size：规定背景图片的尺寸。 3.渐变(基于background-image上实现) 3.1线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向 3.2径向渐变（Radial Gradients）- 由它们的中心定义 4.转换2D(Transform) 4.1 位移translate() 4.2 旋转rotate() 4.3 缩放scale() 4.4 倾斜 skew() 5.转换3D(Transform) 5.1 位移 5.2 旋转 5.3 缩放 5.4 倾斜 5.5 将平面图形转换为立体图形 3D

Less 安装

阅读更多关于 Less 安装

本节我们学习 Less 的安装，Less 的官方地址为：< http://lesscss.org/ 。在官网首页，有告诉我们 Less 的两种安装方式，如下所示：直接引用通过 NPM 安装直接引用我们先来看直接引用，这个很简单，就是直接在 HTML 页面引入创建好的 Less 文件即可。在引入之前，我们需要创建一个 Less 文件，Less 文件的后缀名为 .less ，所以我们可以将文件命名为 index.less 。然后我们就可以通过 <link> 标签向 HTML 页面中引入 index.less 文件，和引入 CSS 文件类似，但是需要将 rel 属性的值修改为 stylesheet/less ： <link rel="stylesheet/less" type="text/css" href="index.less" /> 然后下载使用官方提供的 CDN 进行脚本引入： <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script> 或者也可以下载 Less.js 保存到本地，然后再引入： <script type="text/javascript" src="less.js" ></script> 通过 NPM 安装如果要通过 NPM 来安装

Is it possible to call a javascript function with less variable from less css?

阅读更多关于 Is it possible to call a javascript function with less variable from less css?

问题 I have to call a javascript function from the less css for customization purpose. The function needs to pass the less variable from less file to js. is it possible to do it? using backtick can get js variable in less file but I don't know how to call a js function from less? demo.js function getGradient(colorlist, dark, light){ // some large customization } demo.less @color: #ffffff,#000000,#cccccc; @light: 20%; @dark: 50%; @gradient : ~`getGradient(@{color}, @{light}, @{dark})`; The above

My LESS math operations aren't working in my media query definitions

阅读更多关于 My LESS math operations aren't working in my media query definitions

问题 I'm trying to make the breakpoints of a layout a less-variable so I could easily check out multiple ideas but this: @breakpoint: 500px; @media all and (min-width: @breakpoint){ #someid{ height: 4321px; } } @media all and (min-width: @breakpoint + 1){ #someid{ height: 1234px; } } #someid{ height: @breakpoint + 1; } compiles to this: @media all and (min-width: 500px) { #someid { height: 4321px; } } @media all and (min-width: 500px + 1) { /*THE PROBLEM*/ #someid { height: 1234px; } } #someid {

How to detect and print changing variables LESS

阅读更多关于 How to detect and print changing variables LESS

问题 I want to create a simple script that changes LESS variables and print the CSS output in a div. this is my HTML <input type="text" id="choose-color" onchange="ModifyColorsInLess()"> <button onclick="writeCSS()">aggiorna</button> <div id="lesscode"></div> This is my js function writeCSS(){ var lessCode = ''; var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function(){ if(xmlhttp.status === 200 && xmlhttp.readyState === 4){ lessCode = xmlhttp.responseText; new(less.Parser)()

How to create list output in less?

阅读更多关于 How to create list output in less?

问题 I am trying to create a list which is calculated from another list. For example, if I have a list like 1,2,3,4... then the output has to be 10,20,30,40... Is there any other way to create a list from another in less? Please refer the below codes. @input: 1,2,3,4; .for(@array) when (default()) {.for-impl_(length(@array))} .for-impl_(@i) when (@i > 1) {.for-impl_((@i - 1))} .for-impl_(@i) when (@i > 0) {.-each(extract(@array, @i), @i)} .create-list(@input){ .for(@input); .-each(@value, @a) {

How to apply less functions to gradient colors?

阅读更多关于 How to apply less functions to gradient colors?

问题 I am new in less. I want to apply less functions to the gradient colors. I have tried best of my knowledge but I couldn't get the output. Can any one please suggest me the correct way to get the less function derived colors. I tried the below codes. @input: #fff , #aaa 25%, #ccc 50%, #000 100%; @light: 10%; @dark: 20%; div{ .custom-grad(@input, @light, @dark); } .for(@array) when (default()) {.for-impl_(length(@array))} .for-impl_(@i) when (@i > 1) {.for-impl_((@i - 1))} .for-impl_(@i) when (

订阅 less.js