css编译less
㈠ 小米官网css转成less
应用程序中转换。LESS是一种动态样式表语言，扩展了CSS的功能，Less是一门CSS预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性。在小米官网中，在应用程序中完成css转less，使CSS更易维护和扩展。
㈡ CSS中的预编译语言less和sass
一个基础的公用的less文件 名称为 base.less 文件 内容如下:
在另一个 index.less文件 中使用
㈢ less样式如何使用cssmole
1.Less
变量：@变量名
混合：在a类中使用b类的所有属性， .a{ .b(); color:#fff}
嵌套：使用嵌套代替原始css的层叠，& 表示当前选择器的父级
运算：+ - * /，可以对任何数字、颜色或变量进行运算
转义：
函数：Less 内置了多种函数用于转换颜色、处理字符串、算术运算等
命名空间和访问符
作用域：首先在本地查找变量和混合（mixins），如果找不到，则从“父”级作用域继承
注释： // 行注释，/.../块注释
导入：@import "library";可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了, .less 扩展名，可以省略掉
2.css moles
CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效。产生局部作用域的唯一方法，就是使用一个独一无二的class的名字，不会与其他选择器重名。 CSS Moles是通过哈希算法将类名编译，保证类名的唯一性。
声明全局规则：
灵活按需导入以便复用代码，避免样式全局污染，但不利于写组件单元测试
3.CSS bem规范
BEM - Block Element Modfier（块，元素，编辑器）
在选择器中用三种符号来表示扩展关系
-中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。
__ 双下划线：双下划线用来连接块和块的子元素
-- 双中划线：用来描述一个块或者块的子元素的一种状态
type-block__element--modifier
Block:不是指html中的块元素，任何独立的页面元素都可以视为一个块，这个独立的块容器有一个唯一的css类名，也就是这个块的名字
Element:属于块的某部分，任何的在Block中的DOM节点，都是一个element。在一个已知的block中，所有的element在语义上都是相等的，Block下的所有Element不考虑层级嵌套关系，扁平化处理都属于Block，即连续的__下划线只能出现一次
Modifier:用于修饰块或元素，体现在外观或行为上的改变，都可作为一个修饰器，如active状态，add/edit的操作
注意事项：
1）保证各个部分只有一级B__E--M，修饰器需要和对应的块或元素一起使用，避免单独使用。不能有 .block__el1__el2 的格式
2）仅以类名作为选择器，不使用ID或标签名来约束选择器
...import'./index.less'...<divclassName="article"><divclassName="article__body"><pclassName="article__title">title</p><buttonclassName="article__button--primary"></button><buttonclassName="article__button--success"></button></div></div>//index.less文件.article{max-width:1200px;&__body{padding:20px;}&__title{font-weight:700;}&__button{padding:5px8px;&--primary{background:blue;}&--success{background:green;}}}
㈣ 有没有将 css 文件反编译成 less 文件的脚本
在less文件中右键跳出的菜单中有一个叫编译的，点一下，就会在less文件的目录下生成一个css文件
㈤ less文件编译css，css文件为什么是空的呢
有些软件有插件可以实时编译，比如sublime。
我用的是gulp，方便前端自动化。你可以网上搜一下，用起来啊很方便。
举个例子：
java">vargulp=require('gulp');
varless=require('gulp-less');
varnotify=require('gulp-notify');
varplumber=require('gulp-plumber');
varconcat=require('gulp-concat');
varminifycss=require('gulp-minify-css');
varrename=require('gulp-rename');
varwatch=require('gulp-watch');
varuglify=require('gulp-uglify');
varautoprefixer=require('gulp-autoprefixer');
varlessPath='./src/less/*.less';
varlessMainPath='./src/less/main.less';
varlessDist='./src/css/';
varcssPath='./src/css/*.css';
varjsSrcPath='./src/js/*.js';
vardistPath='./dist/';
//编译less
gulp.task('lessCompile',function(){
gulp.src([lessMainPath])
.pipe(plumber({errorHandler:notify.onError('Error:<%=error.message%>')}))
.pipe(less())
.pipe(gulp.dest(lessDist));
});
//监控less文件变化
gulp.task('watchLess',function(){
gulp.watch(lessPath,['lessCompile']);
});
//css合并压缩加前缀
gulp.task('handleCss',function(){
returngulp.src(cssPath)
.pipe(plumber({errorHandler:notify.onError('Error:<%=error.message%>')}))
.pipe(concat('app.css'))
.pipe(autoprefixer({
browsers:['last5versions','Android>=4.0'],
cascade:true,
remove:false
}))
.pipe(gulp.dest(distPath))
.pipe(minifycss())
.pipe(rename('app.min.css'))
.pipe(gulp.dest(distPath));
});
//监控css文件变化
gulp.task('watchCss',function(){
gulp.watch(cssPath,['handleCss']);
});
㈥ less混合
混合就是一种或者一系列属性从一种规则集引入（混合）到另一种规则集的方法
1. 普通混合
一个普通的css样式
我们发现 h1,h2的样式中有很多重复的，而解决方式如下，将重复的放在一个类中：
定义一个.font_h类，在HTML文件对应的元素山添加class="font_h"属性
less可以不这么写，less写法如下：
将定义好的类混入css样式中，这样就不用在HTML的元素中写类了
编译后的css，和下面不带输出的混合做对比
2. 不带输出的混合
编译后的css文件，从中发现.font_h不见了
3. 带选择器的混合
编译之后的css文件
其中， .my-hover-mixin():hover == &:hover
4. 带参数的混合
编译后的css文件
5. 带参数并且有默认值
编译后的css文件
调用后如果 .border_have(); 不带参数，就用默认的参数；如果传递了参数，就用传入的参数。而上边带参数但没有默认值时，如果调用时不传入参数就会报错。
6. 带多个参数的混合
编译后的css文件
less文件（定义具有多个相同名称和参数数量的混合）
编译后的css文件
less文件
编译后的css文件
如果使用mixin的时候只带一个参数，比如.mixin(red)，这个属性会导致所有的mixin都会强制使用这个明确的参数
7. 命名参数
编译后的css文件
8. @arguments变量
编译后的css文件
less文件
编译后的css文件
这里的solid是默认值，但也必须写上，否则会报错。
9. 匹配模式
编译后的css文件
注意：中间用逗号分割开
10. 得到混合中变量的返回值
编译后的css文件
㈦ less文件编译自动会转出一个css吗
是的，如果已经指定了编译后文件的位置所在，如果没有css文件，编译后会自动生成一个css文件在该位置，不管是用less.js还是比如koala之类的编译工具都是这样的。
㈧ webstorm | 编译 Less 保存自动生成 wxss/acss/css
因为感觉用 微信开发者工具 开发很不习惯，所以都是用 WebStorm 来开发，再用 微信开发者工具 预览。本文主要记录一下利用webstorm编译less
配置方案
1、配置在当前目录生成.wxss
2、less独立文件夹，生成 .wxss 文件到指定的目录中
1、配置在当前目录生成.wxss
2、less独立文件夹，生成 .wxss 文件到指定的目录中
和微信步骤一样，只是后缀不同
路径 File | Settings | Tools | File Watchers | +
点加号，选择less, 弹出下面的窗口，已经有默认配置了，点ok即可
㈨ css less 怎么用呢怎么让html网页支持less呢
在浏览器中使用less.js开发是很好的，但不推荐用于生产环境中。浏览器端使用是在使用LESS开发时最直观的一种方式。如果是在生产环境中，尤其是对性能要求比较高的场合，建议使用node或者其它第三方工具先编译成CSS再上线使用。
注意：
确保包涵.less样式表在less.js脚本之前
当你引入多个.less样式表时，它们都是独立编译的。所以，在每个文件中定义的变量、混合、命名空间都不会被其它的文件共享。
必须通过服务器环境访问页面，否则报错
浏览器选项：
你可以引入<script
src="less.js"></script>之前通过创建一个全局less对象的方式来指定参数！
㈩ less文件怎么生成css webstorm
webstorm需要配置一下，可以自动编译Less生成css。
进入设置界面
4.完成之后，直接创建less文件会自动生成css.