变量:@变量名
混合:在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}}}
如:在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 。