LESS 语法备忘-阿里云开发者社区

解决多版本的动画函数

在新版本下

.vendor(@property, @value) {
    -webkit-@{property}: @value;
     -khtml-@{property}: @value;
       -moz-@{property}: @value;
            @{property}: @value;
}
// 重载函数
.vendor(@property, @value, @value2) {
    -webkit-@{property}: @value, @value2;
     -khtml-@{property}: @value, @value2;
       -moz-@{property}: @value, @value2;
            @{property}: @value, @value2;
}

.keyframes (@name, @frames) {
	@-webkit-keyframes @name { @frames(); }
       @-moz-keyframes @name { @frames(); }
        @-ms-keyframes @name { @frames();}
         @-o-keyframes @name { @frames(); }
            @keyframes @name { @frames(); }
}

// 例子
.keyframes (line, {
    0%{background-size:0% 2px;}
    100%{background-size:100% 2px;}
});

声明变量

@baseColor: red;

div{
   color:@color;
}

为了生成互补色，我们使用 spin 将颜色旋转 180 度：

/* Mixin */
@base: #663333;
@complement1: spin(@base, 180);
@complement2: darken(spin(@base, 180), 5%);
@lighten1: lighten(@base, 15%);
@lighten2: lighten(@base, 30%);
 
/* Implementation */
.one   {color: @base;}
.two   {color: @complement1;}
.three {color: @complement2;}
.four  {color: @lighten1;}
.five  {color: @lighten2;}

注意 LESS 内置函数可以嵌套的。

/* 颜色微调 Subtle Color Scheme */
@base: #663333;
@lighter1: lighten(spin(@base, 5), 10%);
@lighter2: lighten(spin(@base, 10), 20%);
@darker1: darken(spin(@base, -5), 10%);
@darker2: darken(spin(@base, -10), 20%);
 
/* Implementation */
.one   {color: @base;}
.two   {color: @lighter1;}
.three {color: @lighter2;}
.four  {color: @darker1;}
.five  {color: @darker2;}

虽然 LESS 很早就支持字符类型的变量，如 @assetFilePath: "http://127.0.0.1/yueyun/asset/images"; 但使用却是一个问题，比如设置背景色的时候 url(@assetFilePath/bg.gif) 将不能正常解析。于是，在 LESS 的新版本中，提出了 "@{assetFilePath}" 的使用字符变量的方式。注意两侧的双引号 "" 不能缺少。如下的使用是合法的。

@assetFilePath: "http://127.0.0.1/yueyun/asset/images";
#logo {
    background: url("@{assetFilePath}/default_4.gif") no-repeat;
    height: 39px;
    width: 260px;
    margin-top: 22px;
    margin-left: 12px;
}

HEX 颜色转换为 RGB 用于背景颜色：background-color: rgba(red(@mainColor), green(@mainColor), blue(@mainColor), 0.5);

radius/shadow/transition/transform

/* 边角 */
.border-radius (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}
  
/* Implementation */
#somediv {
    .border-radius(20px);
}

.backgroundSize(@size:contain){
    -webkit-background-size: @size; // 某些android 例如 Ophone 要加上 -webkit 的前缀
       -moz-background-size: @size;
          -ms-background-size: @size;
           -o-background-size: @size;
            background-size: @size;
}
/*
    盒子阴影
    @right_left 右边阴影为正数 左边负数
    @bottom_top 下边阴影为正数 上边负数
    @box 阴影大小
    @box_color 阴影颜色
*/
.boxshadow(@right_left:5px, @bottom_top:5px, @box:5px, @box_color:gray){
   -webkit-box-shadow: @arguments;
      -moz-box-shadow: @arguments;
       -ms-box-shadow: @arguments;
        -o-box-shadow: @arguments;
           box-shadow: @arguments;
}

/*
    文字阴影,可以指定多组阴影
    @right_left1 右边阴影为正数 左边负数
    @bottom_top1 下边阴影为正数 上边负数
    @text 阴影大小
    @text_color 阴影颜色
*/
.textshadow(@right_left1:5px, @bottom_top1:5px, @text:5px, @tetx_color:#b6ebf7){
    text-shadow:@arguments;
}

.transition(@t){    
    -webkit-transition: @t;
      -moz-transition: @t;
       -ms-transition: @t;
       -o-transition: @t;
         transition: @t;
}
/* 过渡 */
.transition (@prop: all, @time: 1s, @ease: linear) {
    -webkit-transition: @prop @time @ease;
    -moz-transition: @prop @time @ease;
    -o-transition: @prop @time @ease;
    -ms-transition: @prop @time @ease;
    transition: @prop @time @ease;
}
  
/* Implementation */
#somediv {
    .transition(all, 0.5s, ease-in);
} 
  
#somediv:hover {
    opacity: 0;
}

/* 旋转 */
.transform (@rotate: 90deg, @scale: 1, @skew: 1deg, @translate: 10px) {
    -webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
    -moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
    -o-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
    -ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
    transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
}
  
/* Implementation */
#someDiv {
    .transform(5deg, 0.5, 1deg, 0px);
}

Eclipse 下安装 LESS 插件：http://www.normalesup.org/~simonet/soft/ow/eclipse-less.fr.html

动态 LESS 样式：

URL 如：http://192.168.1.92/lessService/?isdebug=true&ns=C:/work/eclipse/.metadata/.plugins/org.eclipse.wst.server.core/tmp0/wtpwebapps/yuetv_wap/asset/less&lessFile=C:/work/eclipse/.metadata/.plugins/org.eclipse.wst.server.core/tmp0/wtpwebapps/yuetv_wap/asset/less/yuetv_wap.less&picPath=http://localhost:8080/yuetv_wap/asset/images/1/&MainDomain=http://192.168.1.92:8080/yuetv_wap

其中

参数 isDebug = true 为调试阶段，不压缩 CSS 输出；当 isDebug = false 时候，压缩 CSS 输出。
参数 ns 为命名空间之目录名，LESS 会在此目录下自动加入 LESS 而无须加上目录前缀。通常为项目的 LESS 总目录，该目录下游多个 LESS 文件
参数 lessFile 就是要解析的 LESS 文件名全称
参数 picPath 是背景图的所在目录。开发阶段和线上的部署阶段的目录会有所不同。

Notepad++ 插件

<NotepadPlus>
    <UserLang name="LESS" ext="less" udlVersion="2.1">
        <Settings>
            <Global caseIgnored="no" allowFoldOfComments="no" foldCompact="no" forcePureLC="0" decimalSeparator="0" />
            <Prefix Keywords1="no" Keywords2="no" Keywords3="yes" Keywords4="no" Keywords5="yes" Keywords6="no" Keywords7="yes" Keywords8="yes" />
        </Settings>
        <KeywordLists>
            <Keywords name="Comments">00// 01 02 03/* 04*/</Keywords>
            <Keywords name="Numbers, prefix1"></Keywords>
            <Keywords name="Numbers, prefix2">#</Keywords>
            <Keywords name="Numbers, extras1">A B C D E F a b c d e f</Keywords>
            <Keywords name="Numbers, extras2"></Keywords>
            <Keywords name="Numbers, suffix1"></Keywords>
            <Keywords name="Numbers, suffix2">% px em ex ch rem vw vh vmin vmax cm mm in pt pc</Keywords>
            <Keywords name="Numbers, range"></Keywords>
            <Keywords name="Operators1">' [ ] = ( ) , : ; { } + / * > ! ~</Keywords>
            <Keywords name="Operators2">-</Keywords>
            <Keywords name="Folders in code1, open"></Keywords>
            <Keywords name="Folders in code1, middle"></Keywords>
            <Keywords name="Folders in code1, close"></Keywords>
            <Keywords name="Folders in code2, open"></Keywords>
            <Keywords name="Folders in code2, middle"></Keywords>
            <Keywords name="Folders in code2, close"></Keywords>
            <Keywords name="Folders in comment, open"></Keywords>
            <Keywords name="Folders in comment, middle"></Keywords>
            <Keywords name="Folders in comment, close"></Keywords>
            <Keywords name="Keywords1">align align-content align-items align-self animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function attr azimuth backface-visibility background background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-decoration-break box-shadow box-sizing break-after break-before break-inside calc caption-side clear clip clip-path color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cross-fade cubic-bezier cue cue-after cue-before cursor cycle direction display element elevation empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font font-family font-feature-settings font-kerning font-language-override font-size font-size-adjust font-stretch font-style font-variant font-variant-ligatures font-weight height hsl hsla hyphens icon image image-orientation image-rendering image-resolution ime-mode inherit initial justify-content left letter-spacing line-height linear-gradient list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top marker-offset marks mask matrix matrix3d max-height max-width min-height min-width nav-down nav-index nav-left nav-right nav-up  object-fit object-position opacity order orphans outline outline-color outline-offset outline-style outline-width overflow overflow-wrap overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page page-break-after page-break-before page-break-inside pause pause-after pause-before perspective perspective-origin pitch pitch-range play-during pointer-events position quotes radial-gradient rect repeating-linear-gradient repeating-radial-gradient resize rgb rgba richness right rotate rotate3d rotateX rotateY rotateZ scale scale3d scaleX scaleY scaleZ size skew skewX skewY speak speak-header speak-numeral speak-punctuation speech-rate steps stress tab-size table-layout text-align text-align-last text-combine-horizontal text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-orientation text-overflow text-rendering text-shadow text-transform text-underline-position top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function translate translate3d translateX translateY translateZ unicode-bidi url var vertical-align visibility voice-family volume white-space widows width word-break word-spacing word-wrap writing-mode z-index

-epub-caption-side -epub-hyphens -epub-text-combine -epub-text-emphasis -epub-text-emphasis-color -epub-text-emphasis-style -epub-text-orientation -epub-text-transform -epub-word-break -epub-writing-mode -wap-accesskey -wap-input-format -wap-input-required -wap-marquee-dir -wap-marquee-loop -wap-marquee-speed -wap-marquee-style -xv-interpret-as -xv-phonemes -xv-voice-balance -xv-voice-duration -xv-voice-pitch -xv-voice-pitch-range -xv-voice-rate -xv-voice-stress -xv-voice-volume align-items align-self animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function backface-visibility background-clip background-origin background-position-x background-position-y background-size border-bottom-left-radius border-bottom-right-radius border-image border-radius border-top-left-radius border-top-right-radius box-decoration-break box-shadow box-sizing caption-side clip-path column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns filter flex flex-basis flex-direction flex-grow flex-shrink font-feature-settings ime-mode justify-content line-break mask opacity order overflow-x overflow-y perspective perspective-origin ruby-position scrollbar-arrow-color scrollbar-base-color scrollbar-darkshadow-color scrollbar-face-color scrollbar-highlight-color scrollbar-shadow-color scrollbar-track-color tab-size text-overflow text-transform transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function word-break word-wrap writing-mode zoom</Keywords>
            <Keywords name="Keywords2">active after before checked choices  dir disabled empty enabled first first-child first-letter first-line first-of-type focus fullscreen hover indeterminate in-range invalid lang last-child last-of-type left link not nth-child nth-last-child nth-last-of-type nth-of-type only-child only-of-type optional out-of-range read-only read-write repeat-index repeat-item required right root scope selection target valid value visited</Keywords>
            <Keywords name="Keywords3"># .</Keywords>
            <Keywords name="Keywords4">@charset @document @font-face @import @keyframes @media @namespace @page @supports @viewport</Keywords>
            <Keywords name="Keywords5">@</Keywords>
            <Keywords name="Keywords6">& a abbr acronym address applet area article aside audio b base basefont bdi bdo bgsound big blink blockquote body br button canvas caption center cite code col colgroup command data datalist dd del details dfn dir div dl dt em embed fieldset figcaption figure font footer form frame frameset h1 h2 h3 h4 h5 h6 head header hgroup hr html i iframe img input ins isindex kbd keygen label legend li link listing main map mark marquee menu meta meter nav nobr noframes noscript object ol optgroup option output p param plaintext pre progress q rp rt ruby s samp script section select small source spacer span strike strong style sub summary sup table tbody td textarea tfoot th thead time title tr track tt u ul var video wbr xmp</Keywords>
            <Keywords name="Keywords7">&. a. abbr. acronym. address. applet. area. article. aside. audio. b. base. basefont. bdi. bdo. bgsound. big. blink. blockquote. body. br. button. canvas. caption. center. cite. code. col. colgroup. command. data. datalist. dd. del. details. dfn. dir. div. dl. dt. em. embed. fieldset. figcaption. figure. font. footer. form. frame. frameset. h1. h2. h3. h4. h5. h6. head. header. hgroup. hr. html. i. iframe. img. input. ins. isindex. kbd. keygen. label. legend. li. link. listing. main. map. mark. marquee. menu. meta. meter. nav. nobr. noframes. noscript. object. ol. optgroup. option. output. p. param. plaintext. pre. progress. q. rp. rt. ruby. s. samp. script. section. select. small. source. spacer. span. strike. strong. style. sub. summary. sup. table. tbody. td. textarea. tfoot. th. thead. time. title. tr. track. tt. u. ul. var. video. wbr. xmp.

&# a# abbr# acronym# address# applet# area# article# aside# audio# b# base# basefont# bdi# bdo# bgsound# big# blink# blockquote# body# br# button# canvas# caption# center# cite# code# col# colgroup# command# data# datalist# dd# del# details# dfn# dir# div# dl# dt# em# embed# fieldset# figcaption# figure# font# footer# form# frame# frameset# h1# h2# h3# h4# h5# h6# head# header# hgroup# hr# html# i# iframe# img# input# ins# isindex# kbd# keygen# label# legend# li# link# listing# main# map# mark# marquee# menu# meta# meter# nav# nobr# noframes# noscript# object# ol# optgroup# option# output# p# param# plaintext# pre# progress# q# rp# rt# ruby# s# samp# script# section# select# small# source# spacer# span# strike# strong# style# sub# summary# sup# table# tbody# td# textarea# tfoot# th# thead# time# title# tr# track# tt# u# ul# var# video# wbr# xmp#
</Keywords>
            <Keywords name="Keywords8">-moz- -ms- -o- -webkit- -apple- -khtml-</Keywords>
            <Keywords name="Delimiters">00' 01 02' 03" 04 05" 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23</Keywords>
        </KeywordLists>
        <Styles>
            <WordsStyle name="DEFAULT" fgColor="DCCDCD" bgColor="2A211C" fontName="" fontStyle="0" nesting="0" />
            <WordsStyle name="COMMENTS" fgColor="6A6A6A" bgColor="2A211C" fontName="" fontStyle="0" nesting="0" />
            <WordsStyle name="LINE COMMENTS" fgColor="6A6A6A" bgColor="2A211C" fontName="" fontStyle="0" nesting="0" />
            <WordsStyle name="NUMBERS" fgColor="88F788" bgColor="2A211C" fontName="" fontStyle="0" nesting="0" />
            <WordsStyle name="KEYWORDS1" fgColor="C1BB71" bgColor="2A211C" fontName="" fontStyle="0" nesting="0" />
            <WordsStyle name="KEYWORDS2" fgColor="FCE383" bgColor="2A211C" colorStyle="1" fontName="" fontStyle="4" nesting="0" />
            <WordsStyle name="KEYWORDS3" fgColor="CA7473" bgColor="008000" colorStyle="1" fontName="" fontStyle="0" nesting="0" />
            <WordsStyle name="KEYWORDS4" fgColor="E6E6E6" bgColor="2A211C" colorStyle="2" fontName="" fontStyle="1" nesting="0" />
            <WordsStyle name="KEYWORDS5" fgColor="68A9EA" bgColor="FFFFFF" colorStyle="1" fontName="" fontStyle="0" nesting="0" />
            <WordsStyle name="KEYWORDS6" fgColor="FF8080" bgColor="FFFFFF" colorStyle="1" fontName="" fontStyle="0" nesting="0" />
            <WordsStyle name="KEYWORDS7" fgColor="FF8080" bgColor="FFFFFF" colorStyle="1" fontName="" fontStyle="0" nesting="0" />
            <WordsStyle name="KEYWORDS8" fgColor="C1BB71" bgColor="FFFFFF" colorStyle="1" fontName="" fontStyle="0" nesting="0" />
            <WordsStyle name="OPERATORS" fgColor="E9E9E9" bgColor="2A211C" fontName="" fontStyle="1" nesting="0" />
            <WordsStyle name="FOLDER IN CODE1" fgColor="C1BB71" bgColor="2A211C" colorStyle="1" fontName="" fontStyle="0" nesting="0" />
            <WordsStyle name="FOLDER IN CODE2" fgColor="000000" bgColor="FFFFFF" colorStyle="0" fontName="" fontStyle="0" nesting="0" />
            <WordsStyle name="FOLDER IN COMMENT" fgColor="000000" bgColor="FFFFFF" colorStyle="0" fontName="" fontStyle="0" nesting="0" />
            <WordsStyle name="DELIMITERS1" fgColor="D4A23B" bgColor="2A211C" fontName="" fontStyle="0" nesting="0" />
            <WordsStyle name="DELIMITERS2" fgColor="D4A23B" bgColor="2A211C" fontName="" fontStyle="0" nesting="0" />
            <WordsStyle name="DELIMITERS3" fgColor="FFFFFF" bgColor="FFFFFF" colorStyle="1" fontName="" fontStyle="0" nesting="50339852" />
            <WordsStyle name="DELIMITERS4" fgColor="FF0080" bgColor="FFFFFF" colorStyle="1" fontName="" fontStyle="0" nesting="50592900" />
            <WordsStyle name="DELIMITERS5" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
            <WordsStyle name="DELIMITERS6" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
            <WordsStyle name="DELIMITERS7" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
            <WordsStyle name="DELIMITERS8" fgColor="000000" bgColor="FFFFFF" fontName="" fontStyle="0" nesting="0" />
        </Styles>
    </UserLang>
</NotepadPlus>

if 语句

没有直接的 if 语句，而是 when(xxx){}

/*
	区域内局部滚动
	控制元素在移动设备上是否使用滚动回弹效果.
	看上去和原生app的效率都有得一拼，要实现这个效果很简单，只需要加一行css代码即可：-webkit-overflow-scrolling : touch;
	结构如下，必须三层
	div.areaScroll > ul > li
*/
.areaScroll(@direct: hoz){
	-webkit-overflow-scrolling : touch;
	overflow : hidden;
	
	/* overflow-x|y : auto;  */
	& when (@direct = hoz) {
		overflow-x : auto;
		white-space:nowrap;
	}
	& when (@direct = v) {
		overflow-y : auto;
	}
	&>ul{
		&>li{
			float: none; /* 不能 float:left */
			display:inline-block;
		}
	}
}

LESS 语法备忘

解决多版本的动画函数

声明变量

radius/shadow/transition/transform

动态 LESS 样式：

Notepad++ 插件

if 语句

热门文章

最新文章

相关课程

相关电子书