了解知识
一、声明变量
[css] view plaincopy在CODE上查看代码片派生到我的代码片
@baseColor: red;  
  
div{  
   color:@color;  
}  
为了生成互补色,我们使用 spin 将颜色旋转 180 度:
 
[css] view plaincopy在CODE上查看代码片派生到我的代码片
/* 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 内置函数可以嵌套的。
[css] view plaincopy在CODE上查看代码片派生到我的代码片
/* 颜色微调 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}" 的使用字符变量的方式。注意两侧的双引号 "" 不能缺少。如下的使用是合法的。
 
[css] view plaincopy在CODE上查看代码片派生到我的代码片
@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
[css] view plaincopy在CODE上查看代码片派生到我的代码片
/* 边角 */  
.border-radius (@radius: 5px) {  
    -webkit-border-radius: @radius;  
    -moz-border-radius: @radius;  
    border-radius: @radius;  
}  
    
/* Implementation */  
#somediv {  
    .border-radius(20px);  
}  
[css] view plaincopy在CODE上查看代码片派生到我的代码片
/* 阴影 */  
.box-shadow (@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) {  
    -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);  
    -moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);  
    box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);  
}  
    
/* Implementation */  
#somediv {  
    .box-shadow(5px, 5px, 6px, 0.3);  
}  
[css] view plaincopy在CODE上查看代码片派生到我的代码片
/* 过渡 */  
.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;  
}  
 
[css] view plaincopy在CODE上查看代码片派生到我的代码片
/* 旋转 */  
.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++ 插件
[html] view plaincopy
<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>  
 
 
标签: less
扩展知识
举一反三
“LESS语法备忘”相关的知识点和问题有: