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

开发者社区> sp42> 正文

LESS 语法备忘

简介: 解决多版本的动画函数 在新版本下 .vendor(@property, @value) { -webkit-@{property}: @value; -khtml-@{property}: @value; -moz-@{property}: @value; @{property}: @value; } // 重载函数 .
+关注继续查看

解决多版本的动画函数

在新版本下

.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;
		}
	}
}


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
10095 0
使用SSH远程登录阿里云ECS服务器
远程连接服务器以及配置环境
2511 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
13893 0
windows server 2008阿里云ECS服务器安全设置
最近我们Sinesafe安全公司在为客户使用阿里云ecs服务器做安全的过程中,发现服务器基础安全性都没有做。为了为站长们提供更加有效的安全基础解决方案,我们Sinesafe将对阿里云服务器win2008 系统进行基础安全部署实战过程! 比较重要的几部分 1.
9161 0
阿里云服务器ECS登录用户名是什么?系统不同默认账号也不同
阿里云服务器Windows系统默认用户名administrator,Linux镜像服务器用户名root
4510 0
阿里云ECS云服务器初始化设置教程方法
阿里云ECS云服务器初始化是指将云服务器系统恢复到最初状态的过程,阿里云的服务器初始化是通过更换系统盘来实现的,是免费的,阿里云百科网分享服务器初始化教程: 服务器初始化教程方法 本文的服务器初始化是指将ECS云服务器系统恢复到最初状态,服务器中的数据也会被清空,所以初始化之前一定要先备份好。
7365 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,云吞铺子总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系统盘、创建快照、配置安全组等操作如何登录ECS云服务器控制台? 1、先登录到阿里云ECS服务器控制台 2、点击顶部的“控制台” 3、通过左侧栏,切换到“云服务器ECS”即可,如下图所示 通过ECS控制台的远程连接来登录到云服务器 阿里云ECS云服务器自带远程连接功能,使用该功能可以登录到云服务器,简单且方便,如下图:点击“远程连接”,第一次连接会自动生成6位数字密码,输入密码即可登录到云服务器上。
22412 0
+关注
sp42
移动项目技术负责人。多年全栈经验,熟悉 Java 和 JS,CSDN 博客技术专家,著有《ExtJS 详解与实践》等书。
294
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载