大连市住房和城乡建设部网站,无锡有人代做淘宝网站吗,莱芜环保网站,查找使用wordpress的网站less中的凝视#xff1a; /**/和//#xff1b;注意#xff1a;css中是不支持//凝视的#xff0c;所以也不会被编译成css#xff1b;变量#xff1a; 综述#xff1a;变量同意我们单独定义一系列通用的样式#xff0c;然后在须要的时候去调用。所以在做全局样式调整的时… less中的凝视 /**/和//注意css中是不支持//凝视的所以也不会被编译成css变量 综述变量同意我们单独定义一系列通用的样式然后在须要的时候去调用。所以在做全局样式调整的时候我们可能仅仅须要改动几行代码就能够了使用方法变量名变量值混合 混合能够将一个定义好的class A轻松的引入到还有一个class B中从而简单实现class B继承class A中的全部属性。我们还能够带參数地调用就像使用函数一样。eg // LESS .rounded-corners (radius: 5px) { border-radius: radius; -webkit-border-radius: radius; -moz-border-radius: radius;}#header { .rounded-corners;//不带參数引用则使用默认值}#footer { .rounded-corners(10px);//传递參数} /* 生成的 CSS */ #header { border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;}#footer { border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;} 匹配模式 综述相当于if-依据你传入的不同值而找到相相应的代码来运行最后要跟上一个带_的模式来写匹配随意參数的即公共的部分eg .mixin (dark, color) { color: darken(color, 10%);}.mixin (light, color) { color: lighten(color, 10%);}.mixin (_, color) {//通配变量_ 写公共的部分代码 display: block;} //如今假设执行:switch: light; .class { .mixin(switch, #888);}//就会得到下列CSS:.class { color: #a2a2a2;--匹配了light display: block;} 运算 运算提供了加减乘除操作我们能够做属性值和颜色的运算这样就能够实现属性值之间的复杂关系。 多用宽高的运算而颜色直接取值eg: // LESS the-border: 1px;base-color: #111;red: #842210; #header { color: base-color * 3; border-left: the-border; border-right: the-border * 2;}#footer { color: base-color #003300; border-color: desaturate(red, 10%);}/* 生成的 CSS */ #header { color: #333; border-left: 1px; border-right: 2px;}#footer { color: #114411; border-color: #7d2717;} 嵌套规则 我们能够在一个选择器中嵌套还有一个选择器来实现继承这样非常大程度降低了代码量而且代码看起来更加的清晰。 eg: // LESS #header { h1 { font-size: 26px; font-weight: bold; } p { font-size: 12px; a { text-decoration: none; :hover { border-width: 1px } } }} /* 生成的 CSS */ #header h1 { font-size: 26px; font-weight: bold;}#header p { font-size: 12px;}#header p a { text-decoration: none;}#header p a:hover { border-width: 1px;} 向写html结构嵌套一样明晰样式之间的关系能够方便的写hover在a标签中 a{ //代表它的上一层选择器 :hover{ color:red }} arguments变量 arguments包括了全部传递进来的參数. 假设你不想单独处理每个參数的话就能够像这样写: .box-shadow (x: 0, y: 0, blur: 1px, color: #000) { box-shadow: arguments; -moz-box-shadow: arguments; -webkit-box-shadow: arguments;}.box-shadow(2px, 5px);将会输出:box-shadow: 2px 5px 1px #000;-moz-box-shadow: 2px 5px 1px #000;-webkit-box-shadow: 2px 5px 1px #000; 避免编译、important以及总结 避免编译使用方法~输出内容!importantkeyword自己主动给编译后的css样式都加上!improtant命名空间 有时候你可能为了更好组织CSS或者单纯是为了更好的封装将一些变量或者混合模块打包起来, 你能够像以下这样在#bundle中定义一些属性集之后能够反复使用: #bundle { .button () { display: block; border: 1px solid black; background-color: grey; :hover { background-color: white } } .tab { ... } .citation { ... } }//你仅仅须要在 #header a中像这样引入 .button:#header a { color: orange; #bundle .button; } 附less中文文档http://www.bootcss.com/p/lesscss/
