less

Convert CSS to LESS selector

做~自己de王妃 提交于 2020-01-16 18:23:28
问题 I have a CSS like this: .button-navigation-container button { /*some properties*/ } .button-navigation-container button.back-button, .button-navigation-container button.cancel-button { text-align: right; padding-right: 2%; } But now I want to convert to LESS but I'm not sure which kind of selector should I use to get the back-button and cancel-button with the same style. Something like this: .button-navigation-container button { /*some properties*/ /*Selector for cancel-button and back-button

Gulp only compiles LESS the first time I run it. It still sees my changes but doesn't update the compiled CSS file

夙愿已清 提交于 2020-01-16 13:23:39
问题 I'm a little new with gulp. I have an old Wordpress theme which I'm trying to use gulp with to compile the LESS files. My structure is like this: -theme --library ---less ----style.less (all the imports all of the less files) ----brew (all the less files are in this folder) ---css ----style.css (this is the compiled css file) -gulp-dev --node_modules --gulpfile.js --package.json And here is my gulpfile: var gulp = require('gulp'); var less = require('gulp-less'); var browserSync = require(

JQuery小技巧

孤街浪徒 提交于 2020-01-16 09:59:12
1.取得BaseUrl 一般在common.js定义,其他画面引用common.js,就可以直接使用了。 $.getBaseURL = function() { var protocol = window.location.protocol; var hostname = window.location.hostname; var port = window.location.port && (":" + window.location.port); var contextPath = window.location.pathname.split('/')[1]; return protocol + "//" + hostname + port + "/" + contextPath; } 来源: CSDN 作者: Hate_Less 链接: https://blog.csdn.net/Hate_Less/article/details/103999294

02.less语法

帅比萌擦擦* 提交于 2020-01-16 08:52:59
less Less(Leaner Style Sheets的缩写) 是一门css扩展语言,也成为Css预处理器。它扩展了css的动态特性。 引入变量 Mixin(混入) 运算 函数 less安装 1.安装node node -v 2.sudo npm install -g less lessc -v less 变量 变量是指没有固定的值,可以改变的,因为css中的一些颜色和树枝等经常使用。 @变量名:值; //定义一个粉色的变量 @color:pink; //定义一个字体为14px的变量 @font14:14px; body{ background-color:@color; } div{ color:@color; font-size:@font14; } less 编译 本质上,less包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的css文件。 so,需要把less文件,编译生成css文件,html页面才能使用。 vscode 插件 easy less less 嵌套 1.子元素的样式直接写到父元素里面就好了 #header{ .logo{ width:300px; } } 2.伪类,交集,伪元素选择器(前面加 &) a{ color:red; &:hover{ color:pink; } } less 运算

Disable auto compilation of LESS

断了今生、忘了曾经 提交于 2020-01-15 18:50:42
问题 I am in Eclipse environment. I want LESS to compile only when explicitly invoked via mvn package. At the moment, as soon as I make any changes in my less file it propagates the change to CSS. What should I do to avoid this behaviour? <plugin> <groupId>org.lesscss</groupId> <artifactId>lesscss-maven-plugin</artifactId> <version>1.7.0.1.1</version> <configuration> <watch>false</watch> <sourceDirectory>src/main/webapp/css</sourceDirectory> <outputDirectory>src/main/webapp/css</outputDirectory>

Changing default chart axis thickness in Billboard.js / D3.js

纵然是瞬间 提交于 2020-01-15 06:32:08
问题 I've created a chart with Billboard.js (an interface chart library based on D3 v4+) . The problem I have is with the thickness of the axis which are made by default pretty thick, I couldn't find any method to make them slimmer. This is how my chart looks like: I managed to change their thickness when I right-clicked on them and opened in inspect, the element for the vertical axis is: <path class="domain" d="M-6,1H0V446H-6"></path> and for the horizontal axis it is: <path class="domain" d="M0

Configure LESS compiler in IntelliJ IDEA Ultimate edition 14?

谁说我不能喝 提交于 2020-01-15 05:46:14
问题 These are my settings. Here is the error i am facing while compiling .less file. 回答1: Step 1: Install npm less module npm install -g less Step 2: Install the less plugins in Intellij Idea File > Settings > Plugins Step 3: Setup Less Profile File > Settings > LESS Profiles It'll auto-generate the CSS file as soon as any change is noticed in LESS if " Compile Automatically on Save " is used. 回答2: You are incorrectly looking in Project Strucutre . The Project Settings is the icon to the left

less.css change theme variable in case of id

拟墨画扇 提交于 2020-01-15 05:09:42
问题 In my less file I define a variable theme colour as: @primaryColour: red; But when the id of my body changes, I want to change the overall theme colour to '@primaryColour: blue; How do I re-define this theme colour? This doesn't work: @primaryColour: red; body#secondTheme { @primaryColour: yellow; } 回答1: You cannot overwrite variables in LESS (within the same scope). The documentation specifically says: Note that variables in LESS are actually ‘constants’ in that they can only be defined once

sass-resources-loader 全局注册 Sass/Less 变量

纵饮孤独 提交于 2020-01-14 18:01:59
首先,安装 less 和 less-loader ,在项目目录下运行如下命令 npm install less less-loader --save npm i sass-resources-loader // 修改utils.js if ( loader ) { if ( loader == 'less' ) { loaders . push ( { loader : 'less-loader' , options : Object . assign ( { } , loaderOptions , { sourceMap : options . sourceMap } ) } , { loader : 'sass-resources-loader' , options : { // common.less 自己的公共变量路径 resources : [ path . resolve ( __dirname , '../src/common/css/common.less' ) ] } } ) ; } else { loaders . push ( { loader : loader + '-loader' , options : Object . assign ( { } , loaderOptions , { sourceMap : options . sourceMap }

Run Grunt tasks recursively over array

一个人想着一个人 提交于 2020-01-14 04:33:11
问题 I have to build a number of css files for different locations and browsers all delineated by a flag in the file name. For instance: styles-en.css styles-jp.css styles-ie.css The content differences are handled by LESS boolean variables @isIE, @isEN, @isJA, @isDE etc. that match the file naming pattern. I would love to automate building these different versions by passing Grunt an array of flags then for each: set the variable for LESS run LESS compiler for all files in a folder (same for all