小米官网css转成less

html-css016

小米官网css转成less,第1张

应用程序中转换。LESS是一种动态样式表语言,扩展了CSS的功能,Less是一门CSS预处理语言,它扩展了CSS语言,增加了变量、Mixin、函数等特性。在小米官网中,在应用程序中完成css转less,使CSS更易维护和扩展。

如:在D盘建立一个SASS文件夹,文件夹下有一个style.scss文件(scss,sass都行。sass文件对代码的排版有着非常严格的要求,而且没有大括号,没有分号。scss对代码的要求没那么高。)用下面的方法可以将sass或者scss转换为css文件。

首先输出 D: 代表找到D盘 ;

然后输出cd sass 代表找到sass文件夹,其中cd是一定要的;

最后输出 sass>sass --watch style.scss:style.css 在sass文件夹下将style.scss转换为style.css 。sass --watch代表一直监听着style.scss 只要在编辑器上更新了scss就会自动更新style.css 。

1.Less

变量:@变量名

混合:在a类中使用b类的所有属性, .a{ .b()color:#fff}

嵌套:使用嵌套代替原始css的层叠,&表示当前选择器的父级

运算:+ - * /,可以对任何数字、颜色或变量进行运算

转义:

函数:Less 内置了多种函数用于转换颜色、处理字符串、算术运算等

命名空间和访问符

作用域:首先在本地查找变量和混合(mixins),如果找不到,则从“父”级作用域继承

注释: // 行注释,/.../块注释

导入:@import "library"可以导入一个 .less 文件,此文件中的所有变量就可以全部使用了, .less 扩展名,可以省略掉

2.css modules

CSS的规则都是全局的,任何一个组件的样式规则,都对整个页面有效。产生局部作用域的唯一方法,就是使用一个独一无二的class的名字,不会与其他选择器重名。 CSS Modules是通过哈希算法将类名编译,保证类名的唯一性。

声明全局规则:

灵活按需导入以便复用代码,避免样式全局污染,但不利于写组件单元测试

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}}}