主要整理一些实用的常用语法
1、嵌套
普通人写css
回点less的人写css
.footer{ width:100%;
i{ font-size: 34px; }
.icon{ width: 40px; height: 40px; line-height: 38px; }
.txt{ .flex(1); margin: 0px 6px;
.xh-input{
height:40px; line-height: 40px;
}
}
}
li{
&.xh{ height:88px;}
}
//会生成 li.xh{ height:88px;}我们可以不断的镶嵌，这样我们生成的时候也会按照镶嵌顺序生成！
2、变量
@color:#323333;//定义主文字色
@logos:#d52036;//logo颜色
.txU(@txU:Uppercase){text-transform:@txU;}//字母全大写
.txC(@txC:Capitalize){text-transform:@txC;}// 字母全小写
.pr(@pr:relative){position: @pr;}
.pa(@pa:absolute){position: @pa;}
.fl(@left:left){float:@left;}
.fr(@right:right){float:@right;}
.clear(@clear:both){clear: @clear;}变量的好处是，你若不引入，则不会生成css文件！ 即使你写100M的变量，生成的css你不引入也1条没有！
这样根据我们自身的使用习惯，可以更快的编写代码！
li{ .fl; color:@color;}//得到 li{ float:left; color:#323333;}
ul{ .fl(right);} //得到 ul{ float:right}变量数组：less也引入了js的数组方法
@ys:#f9606d,#ffa557,#b042d0,#7321ed,#0c45df,#628df7,#a91de2,#ce58ff,#fb587b,#f69fa3; //定义一组颜色
li{color:extract(@ys,1)}//得到 li{ color:#f9606d;} 和js不同的是，less 初始为1开始！3、循环
上面既然说到了数组，那么就来个数组的循环
//less循环格式，亦可用于判断，同js的 if()
.a(@n,@i:1) when (@i<n){
}
//判断
.mixin (@a) when (lightness(@a) >= 50%) {
background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
background-color: white;
}
.mixin (@a) {
color: @a;
}
//传入参数比较
.max (@a, @b) when (@a > @b) { width: @a }
.max (@a, @b) when (@a < @b) { width: @b }
//运行
.li1 { .mixin(#ddd) }
.li2 { .mixin(#555) }
————————————————
.li1 { background-color: black; color: #ddd;}
.li2 { background-color: white; color: #555;}
//循环导引中可用的全部比较运算有： > >= = =< <。此外，关键字true只表示布尔真值，除去关键字true以外的值都被视示布尔假
.mixin (@a) when (@a > 10), (@a < -10) { ... }循环应用
//生成li的运动时间
.li-yundong(5);
.li-yundong(@n,@c:.2s, @i: 1) when (@i =< @n) {
li:nth-child(@{i}) {
.transition(.6s @c);
}
.li-yundong(@n,(@c+ .1), (@i + 1));
}
//设置不同背景图
@ljs :"../images/banner_";//固定一个路径
.bjt(@n,@i:1,@c:@ljs) when (@i =< @n) {//增加变量n判断需要生成几个
&:nth-child(@{i}) {
background-image:url('@{c}@{i}.jpg');
}
.bjt(@n,(@i + 1),@c);///i加1
}
@media screen and (max-width: 900px){//兼容1200宽度的边距
@ljss :"../images/sb_";//固定一个路径
}
//设置不同渐变北京，需要引入css3文件 ，文章末尾有放
@ys:#f9606d,#ffa557,#b042d0,#7321ed,#0c45df,#628df7,#a91de2,#ce58ff,#fb587b,#f69fa3;
.jianbian(@n:2,@i:1,@name:jianbian,@ys:@ys) when (@i<=@n){
.@{name}.jianbian-@{i}{
.linear-gradient-left(extract(@ys,@i*2-1),extract(@ys,@i*2-1),0%,extract(@ys,@i*2),100%);
//-webkit-background-clip: text;-webkit-text-fill-color: transparent;//如果文字变色注销此段
&:hover{.rotate(-360deg);}
}
.jianbian(@n,@i + 1)
}4、运算
运算的实际运用
任何数字、颜色或者变量都可以参与运算，less运算能够分辨出颜色和单位
@a:4;
@b:@a+2px; //得到6px
@c:@a+2%;//6%
width: (@a + 5) * 2px;//18px
color:{ #888 / 4};//#222
//混合运算返回值
.average(@x, @y) {
@average: ((@x + @y) / 2);
@he:(@x + @y);
}
div {
.average(16px, 50px);
padding: @average;
margin: @he;
}5、颜色的计算
比如我们上面是一个蓝色，下面需要搭配一个淡一点的蓝色！我们也不需要去ps里面吸取了
直接
lighten(blue, 10%); // 返回一个比蓝色低10％更轻的颜色
其他，具体自行应用 less的颜色搭配
darken(@color, 10%); // 返回一个比@color高10％较暗的颜色 saturate(@color, 10%); // 返回比@color多饱和度10％的颜色 desaturate(@color, 10%); // 返回一个比@color少饱和度10％的颜色 fadein(@color, 10%); // 返回一个比@color少10％透明度的颜色 fadeout(@color, 10%); // 返回一个比@color多10％透明度的颜色 fade(@color, 50%); // 返回一个颜色透明度为50％的颜色 spin(@color, 10); // 返回色调比@color大10度的颜色 spin(@color, -10); // 返回一个比@color小10度色调的颜色 mix(@color1, @color2); // 返回一个混合@ color1和@ color2的颜色
6、函数
less提供了一组方便的数学函数，可以使用它们处理一些数字类型的值，和js一样，只是没这么丰富
round(1.67); // 返回`2` ceil(2.4); // 返回`3` floor(2.6); // 返回`2` percentage(0.5); // 返回`50%`
7、打包
其实这一直是我想实行的一个理念 “css模块化”；
电脑端另说，而手机端我们的排版方式排来排去无非就是那几种，我们把大概的全部样式用less进行封装，需要时直接引入即可！
.anniu {
.home () {
display: block;
border: 1px solid black;
background-color: grey;
&:hover { background-color: white }
}
.go { ... }
.center { ... }
}
//执行
.header a {
color: orange;
.anniu > .home;
}8、作用域
less中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止
比如
@color:#333;
#a{
@color: white;
#header {
color: @color; // white
}
}
#b{
color:@color;// #333
}9、引入
这个就是实现模块化的方法，我们把less文件写完，然后直接引入，在文件内执行所需的模块即可！
@import 'a.less'; @import 'b'; // .less 后缀可带可不带
10、less逗号冒号的区别
1. 两个参数，并且每个参数都是逗号分隔的列表：.name(1,2,3;something.ele)
2. 三个参数，并且每个参数都包含一个数字:.name(1,2,2)
3. 使用伪造的分号创建mixin，调用的时候参数包含一个逗号分割的css列表:.name(1,2,3;)
4. 逗号分隔默认值：.name(@param1:red,blue)
使用同样的名字和同样数量的参数定义多个混合是合法的。在被调用时，LESS会应用到所有可以应用的混合上
如果传参的括号里面全部都是以“，”分割，那么会依次传给各个参数值，如果传参的括号里面既有“，”又有“；”那么，会把“；”前面的看作一个整体，传给一个参数值
引入的css3通用文件
//css3属性
//---------------------------------------------------
// LESS Prefixer
//---------------------------------------------------
//
// All of the CSS3 fun, none of the prefixes!
//
// As a rule, you can use the CSS properties you
// would expect just by adding a ‘.‘:
//
// box-shadow => .box-shadow(@args)
//
// Also, when shorthand is available, arguments are
// not parameterized. Learn CSS, not LESS Prefixer.
//
// -------------------------------------------------
// TABLE OF CONTENTS
// (*) denotes a syntax-sugar helper
// -------------------------------------------------
//
// .keyframes(@name; @args)
// .animation(@args)
// .animation-delay(@delay)
// .animation-direction(@direction)
// .animation-duration(@duration)
// .animation-fill-mode(@mode)
// .animation-iteration-count(@count)
// .animation-name(@name)
// .animation-play-state(@state)
// .animation-timing-function(@function)
// .background-size(@args)
// .border-radius(@args)
// .box-shadow(@args)
// .inner-shadow(@args) *
// .box-sizing(@args)
// .border-box() *
// .content-box() *
// .columns(@args)
// .column-count(@count)
// .column-gap(@gap)
// .column-rule(@args)
// .column-width(@width)
// .gradient(@default,@start,@stop) *
// .linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
// .linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,[@color3,@stop3,@color4,@stop4])*
// .keyframes(@name; @args)
// .opacity(@factor)
// .transform(@args)
// .transform-origin(@args)
// .transform-style(@style)
// .rotate(@deg)
// .scale(@factor)
// .translate(@x,@y)
// .translate3d(@x,@y,@z)
// .translateHardware(@x,@y) *
// .text-shadow(@args)
// .transition(@args)
// .transition-delay(@delay)
// .transition-duration(@duration)
// .transition-property(@property)
// .transition-timing-function(@function)
// Flexbox:
// .flex-block()
// .flex-inline()
// .flex-flow(@direction: row, @wrap: nowrap)
// .flex-direction(@direction: row)
// .flex-wrap(@wrap: nowrap)
// .justify-content(@justification)
// .align-items(@mode)
// .align-content(@alignment)
// .flex(@args: none)
// .flex-grow(@grow: 1)
// .flex-shrink(@shrink: 1)
// .flex-basis(@basis: auto)
// .order(@num: 0)
// .align-self(@align: auto)
//
// Credit to LESS Elements for the motivation and
// to CSS3Please.com for implementation.
//
// Copyright (c) 2012 Joel Sutherland
// MIT Licensed:
// http://www.opensource.org/licenses/mit-license.php
//
//---------------------------------------------------
// Animation
/*
linear 速度稳定
infinite 无限循环
forwards 停在最后一帧
*/
.keyframes(@name; @args) {
@-webkit-keyframes @name { @args(); }
@keyframes @name { @args(); }
}
.animation(@args) {
-webkit-animation: @args;
animation: @args;
}
.animation-delay(@delay) {
-webkit-animation-delay: @delay;
animation-delay: @delay;
}
.animation-direction(@direction) {
-webkit-animation-direction: @direction;
-o-animation-direction: @direction;
}
.animation-duration(@duration) {
-webkit-animation-duration: @duration;
-o-animation-duration: @duration;
}
.animation-fill-mode(@mode) {
-webkit-animation-fill-mode: @mode;
animation-fill-mode: @mode;
}
.animation-iteration-count(@count) {
-webkit-animation-iteration-count: @count;
animation-iteration-count: @count;
}
.animation-name(@name) {
-webkit-animation-name: @name;
animation-name: @name;
}
.animation-play-state(@state) {
-webkit-animation-play-state: @state;
animation-play-state: @state;
}
.animation-timing-function(@function) {
-webkit-animation-timing-function: @function;
animation-timing-function: @function;
}
// Background Size
.background-size(@args) {
background-size: @args;
}
// Border Radius
.border-radius(@args) {
border-radius: @args;
background-clip: padding-box;
}
// Box Shadows
.box-shadow(@args) {
-webkit-box-shadow: @args;
box-shadow: @args;
}
.inner-shadow(@args) {
.box-shadow(inset @args);
}
// Box Sizing
.box-sizing(@args) {
-webkit-box-sizing: @args;
-moz-box-sizing: @args;
box-sizing: @args;
}
.border-box(){
.box-sizing(border-box);
}
.content-box(){
.box-sizing(content-box);
}
// Columns
//.columns(100px 4); 列的宽度和数量
.columns(@args) {
-webkit-columns: @args;
-moz-columns: @args;
columns: @args;
}
//列的数量
.column-count(@count) {
-webkit-column-count: @count;
-moz-column-count: @count;
column-count: @count;
}
//列距离
.column-gap(@gap) {
-webkit-column-gap: @gap;
-moz-column-gap: @gap;
column-gap: @gap;
}
.column-width(@width) {
-webkit-column-width: @width;
-moz-column-width: @width;
column-width: @width;
}
//column-rule:4px outset #ff0000;列距离的 颜色宽度 样式
.column-rule(@args) {
-webkit-column-rule: @args;
-moz-column-rule: @args;
column-rule: @args;
}
// Gradients
// filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=@start ,endColorstr=@end ,grandientType=0);
.gradient(@default: #F5F5F5, @start: #EEE, @stop: #FFF) {
.linear-gradient-top(@default,@start,0%,@stop,100%);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2);
background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2);
background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2);
background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2);
background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3);
}
.linear-gradient-top(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
background-image: -webkit-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -moz-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -ms-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -o-linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: linear-gradient(top, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2));
background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2);
background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2);
background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2);
background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2);
background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3));
background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3);
}
.linear-gradient-left(@default,@color1,@stop1,@color2,@stop2,@color3,@stop3,@color4,@stop4) {
background-color: @default;
background-image: -webkit-gradient(linear, left top, left top, color-stop(@stop1, @color1), color-stop(@stop2 @color2), color-stop(@stop3 @color3), color-stop(@stop4 @color4));
background-image: -webkit-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -moz-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -ms-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: -o-linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
background-image: linear-gradient(left, @color1 @stop1, @color2 @stop2, @color3 @stop3, @color4 @stop4);
}
// Opacity
.opacity(@factor) {
@iefactor: @factor*100;
filter: ~"alpha(opacity=@{iefactor})";
opacity: @factor;
}
.filter(@a:100%){
-webkit-filter: grayscale(@a);
-moz-filter: grayscale(@a);
-ms-filter: grayscale(@a);
-o-filter: grayscale(@a);
filter: grayscale(@a);
filter: gray;
}
// Text Shadow
.text-shadow(@args) {
text-shadow: @args;
}
// Transforms
.transform(@args) {
-webkit-transform: @args;
-ms-transform: @args;
transform: @args;
}
.transform-origin(@args) {
-webkit-transform-origin: @args;
-ms-transform-origin: @args;
transform-origin: @args;
}
.transform-style(@style) {
-webkit-transform-style: @style;
-ms-transform-style: @style;
transform-style: @style;
}
.rotate(@deg:45deg){
.transform(rotate(@deg));
}
/*水平翻转*/
.rotateY(@deg:360deg){ transform: rotateY(@deg); }
/*垂直翻转*/
.rotateX(@deg:360deg){ transform: rotateX(@deg); }
.scale(@factor:.5){
.transform(scale(@factor));
}
.translate(@x,@y){
.transform(translate(@x,@y));
}
.translate3d(@x,@y,@z) {
.transform(translate3d(@x,@y,@z));
}
.translateHardware(@x,@y) {
.translate(@x,@y);
-webkit-transform: translate3d(@x,@y,0);
-o-transform: translate3d(@x,@y,0);
transform: translate3d(@x,@y,0);
}
// Transitions
.transition(@args:200ms) {
transition: @args;
-webkit-transition: @args;
-moz-transition: @args;
-ms-transition: @args;
}
.transition-delay(@delay:0) {
transition-delay: @delay;
}
.transition-duration(@duration:200ms) {
transition-duration: @duration;
}
.transition-property(@property:all) {
transition-property: @property;
}
.transition-timing-function(@function:ease) {
transition-timing-function: @function;
}
// Flexbox
.flex-block() {
display: box; /* OLD - Android 4.4- */
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.flex-inline() {
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
}
.flex-flow(@direction: row, @wrap: nowrap) {//flex-direction属性和flex-wrap属性的简写形式
-moz-flex-flow: @direction @wrap;
-ms-flex-direction: @direction;
-ms-flex-wrap: @wrap;
-webkit-flex-flow: @direction @wrap;
flex-flow: @direction @wrap;
}
.align-content(@alignment) { //多根轴线对齐align-content: flex-start | flex-end | center | space-between | space-around | stretch;
-moz-align-content: @alignment;
-ms-align-content: @alignment;
-webkit-align-content: @alignment;
align-content: @alignment;
}
.flex-direction(@direction: row) { //主轴的方向 row | row-reverse 右 | column 垂直上 | column-reverse; 垂直下
-webkit-flex-direction: @direction;
-moz-flex-direction: @direction;
-ms-flex-direction: @direction;
flex-direction: @direction;
}
.flex-wrap(@wrap: nowrap) {//换行nowrap | wrap | wrap-reverse;换行在最下方开始
-webkit-box-lines: multiple;
-webkit-flex-wrap: @wrap;
-moz-flex-wrap: @wrap;
-ms-flex-wrap: @wrap;
flex-wrap: @wrap;
}
.justify-content(@justification) {//对齐方式flex-start 左边| flex-end 右边 | center | space-between 2边| space-around; 项目间隔相等
-webkit-box-pack: @justification;
-moz-box-pack: @justification;
-ms-flex-pack: replace(@justification, "flex-", "");
-webkit-justify-content: @justification;
justify-content: @justification;
}
.align-items(@mode) {//对齐方式flex-start 上| flex-end 下| center | baseline 第一行文字对齐| stretch; 默认沾满高度
-webkit-box-align: @mode;
-moz-box-align: @mode;
-ms-flex-align: @mode;
-webkit-align-items: @mode;
align-items: @mode;
}
.flex(@args: none) {
-moz-box-flex: @args; /* Firefox */
-webkit-box-flex: @args; /* Safari 和 Chrome */
box-flex: @args;
-webkit-flex: @args;
-moz-flex: @args;
-ms-flex: @args;
-webkit-flex: @args;
flex: @args;
}
.order(@order: 0) {
-webkit-box-ordinal-group: @order;
-moz-box-ordinal-group: @order;
-ms-box-ordinal-group: @order;
-ms-flex-order: @order;
-webkit-order: @order;
-moz-order: @order;
-ms-order: @order;
order: @order;
}
.flex-grow(@grow: 1) {
-webkit-flex-grow: @grow;
-moz-flex-grow: @grow;
-ms-flex-grow: @grow;
-webkit-flex-grow: @grow;
flex-grow: @grow;
}
.flex-shrink(@shrink: 1) {
-webkit-flex-shrink: @shrink;
-moz-flex-shrink: @shrink;
-ms-flex-shrink: @shrink;
-webkit-flex-shrink: @shrink;
flex-shrink: @shrink;
}
.flex-basis(@basis: auto) {
-webkit-flex-basis: @basis;
-moz-flex-basis: @basis;
-ms-flex-basis: @basis;
-webkit-flex-basis: @basis;
flex-basis: @basis;
}
.align-self(@align: auto) {
-webkit-align-self: @align;
-moz-align-self: @align;
-ms-align-self: @align;
-webkit-align-self: @align;
align-self: @align;
}