less | 易学教程

在vue 中使用 less

阅读更多关于在vue 中使用 less

在vue 中使用 less ，就可以使用rem了如果项目已经开发的差不多了，没有用到rem 又要使用rem，您用这招。 postcss-pxtorem：转换px为rem的插件 postcss-pxtorem npm install postcss-pxtorem --save 新建 rem.js文件 const baseSize = 32 // 设置 rem 函数 function setRem () { // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。 const scale = document.documentElement.clientWidth / 750 // 设置页面根节点字体大小 document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px' } // 初始化 setRem() // 改变窗口大小时重新设置 rem window.onresize = function () { setRem() } 并引用进main.js文件内 import './rem' .postcssrc.js 在 px "postcss-pxtorem": { "rootValue": 32, "propList": ["*"] } helloworld.vue

less学习三---父选择器

阅读更多关于 less学习三---父选择器

引用父选择器需要用到“&”符号＆运算符表示嵌套规则的父选择器，并且在修改类或伪类选择器的应用中非常普遍 ul{ li{ &:nth-child(2) a { color: red; &:hover { color: yellow; } } } } //编译为 ul li:nth-child(2) a { color: red; } ul li:nth-child(2) a:hover { color: yellow; } &也可以用在其他场景，例如产生重复的类名 .button{ &-submit{ color:blue; } &-click{ color:yellow; } &-btn{ color:red; } } //编译成 .button-submit { color: blue; } .button-click { color: yellow; } .button-btn { color: red; } .item{ &1{ color:green; } &2{ color:red; }}//编译成 .item1 { color: green;}.item2 { color: red;} .header{ &>p{ color:red; } &+.content{ color:yellow; } & div{ color:red; } &~p{ color:green

Bootstrap, making responsive changes to layout

阅读更多关于 Bootstrap, making responsive changes to layout

I'm using a fluid Twitter Bootstrap layout for my design and am about to make it responsive. Consider a grid such as this: <div class="row-fluid"> <div class="span4"></div> <div class="span8"></div> </div> What is the best way to hide span4 and let span8 take up the entire width, to be used when the screen gets smaller? Using a media query with whatever min/max width set .span4 to display: none; Then, add .span8 to the rule for .span12 for everything below whatever width you hide .span4 as all that work is already done for you by bootstrap, so no need to duplicate. It will look something like

LESS variables: Is this possible

阅读更多关于 LESS variables: Is this possible

问题 So my code is having a major issue with types and I can't seem to solve it. Whenever I subtract 1 from line 8 there are issues. How can I resolve this? @max-columns: 2; @column-1-width-min: 30; @column-2-width-min: 40; .loop-column(@index) when (@index > 0) { @max-minus-1a: "@{column-@{index}-width-min}"; @max-minus-1b: @max-minus-1a - 1; // problem child @min: ~"min-width: @{column-@{index}-width-min}"; @max: ~"max-width: @{max-minus-1b}"; @media (@min) and (@max) { [data-deckgrid="card"]:

How to compile less/sass files in Visual Studio 2017

阅读更多关于 How to compile less/sass files in Visual Studio 2017

In VS <= 2015 we can use WebEssentials extension that takes care for compiling the less/sass files for us, but currently it does not support VS 2017. Are you aware of similar extension that can compile less/sass on build? WebEssentials is being split up into multiple extensions. I believe the functionality you want is now in the Web Compiler extension. If you want to do it without extensions, you could use a task runner like Gulp. See here for a walkthrough of how to integrate Gulp tasks into VS. UPDATE - PLEASE READ DOWN THIS PAGE, AS I HAVE ADDED AN ADDITIONAL ANSWER (THIS ONE NO LONGER

Node.js - express - jade - compile SASS/LESS

阅读更多关于 Node.js - express - jade - compile SASS/LESS

Anyone have a really newbie guide to nodejs - express - SASS/LESS? I have not been able to get this working. The example I have now is a bareboned as possible.. var express = require('express'), less = require('less'), app = express.createServer(); var pub_dir = __dirname + '/public'; app.configure(function(){ app.use(express.compiler({ src: pub_dir, enable: ['less'] })); app.use(express.staticProvider( pub_dir )); }; app.configure('development', function(){ app.use(express.errorHandler({ dumpExceptions: true, showStack: true })); }); The file style.css.less is located in pub_dir , I can

webpack4 处理less文件

阅读更多关于 webpack4 处理less文件

1.安装依赖 npm i style-loader css-loader less-loader less -D 2.新建html页面 <html> <head> <meta charset="UTF-8"> <title>index</title> </head> <body> </body> </html> 3.新建index.less文件 html{ background-color: blue; } 4.在main.js中引用index.less import './css/index.less' 5.配置webpack.config.js文件 module: { rules: [ { test:/\.less$/, use:['style-loader','css-loader','less-loader'] } ] } 来源： https://www.cnblogs.com/lemonzwt/p/11756178.html

How to automatically compile LESS into CSS on the server?

阅读更多关于 How to automatically compile LESS into CSS on the server?

Friend designer of mine was compiling his LESS file manually and uploading it with Coda (Remote Site) spending lots of precious time. He asked me: Is it possible to automatically detect file change on the Linux server and compile without delay at all? I have made a script and I publish the details: Easy to use for designers Executes LESS compiler immediately after file is saved, without consuming server resources Any editor capable of remote editing will work with this solution - Code, Sublime Text, Textmate First, you need to install "npm" on the server by typing this into the console: sudo

Less Filewatcher compiler in PHPStorm

阅读更多关于 Less Filewatcher compiler in PHPStorm

what I'am doing wrong when trying to compile the .less files into .css with PHPStorm File watcher ? Here is the screenshot, (pls open THIS LINK to see the full size of the image): I installed npm install -g less , after getting installed NodeJS . It works fine the compiler lessc when using cmd.exe - Command Line Tool in Windows OS with this command: lessc custom.less custom.css , but it wont do anything inside PHPStorm in Filewatcher. Any clue what I should correct, pls ? For those who want to configure LESS auto compiler inside their IDE PHPStorm, you can do it in that way: Download and

LESScss converting rgba to hex? how to nest color variables into a mixin?

阅读更多关于 LESScss converting rgba to hex? how to nest color variables into a mixin?

Does LESScss convert all rgba colors to hex values? I am trying to create a mixin, say, .color, that allows you to pass in a color variable previously defined, and I want it to be in rgba. this doesn't work, but here's the idea: .bgcolor(@colorvariable,@alpha) { background-color: @colorvariable + rgba(0, 0, 0, @alpha); } Where @colorvariable would be, @blue: rgb(17,55,76); or @green: rgb(125,188,83); etc. I want to define a bunch of these variables, and then be able to pass them in to .bgcolor or .color mixin and change the alpha transparency on the fly. I feel like this should be possible,