• LESS笔记/注意手册(更新中)


    众所周知,写CSS是一个无聊加无聊的事情,各种重复的代码,代码臃肿。这时Less诞生了,Less是一个CSS编译器,方便前端人员更高效的写CSS(当然还有Sass,这个以后说)。

    很多人被Less环境搞的死去活来,其实不需要,下载koala软件就行了(http://koala-app.com/index-zh.html),他会实时监控CSS文件,当你ctrl+s保存的时候,他会检测有没有错误,比命令行下方便很多。

    一:Less写变量函数时,需要注意后面要带括号,不然变量函数会输出,如下

     1 .icon(){
     2     padding:0 10px 0 10px;
     3     position: relative;
     4     top: 1px;
     5     display: inline-block;
     6     font-family: 'Glyphicons Halflings';
     7     font-style: normal;
     8     font-weight: 400;
     9     line-height: 1;
    10     -webkit-font-smoothing: antialiased;
    11     -moz-osx-font-smoothing: grayscale;
    12 } 

    带上括号之后Less并不会输出,只有你调用的时候才会输出,原因很简单,不带括号less会认为这是一个CSS代码,而不是less专有的代码语法。

    二:当使用LESS写box-shadow函数时,很多人会这样写

    1 .box-shadow(@shadow){
    2   -webkit-box-shadow:@shadow;
    3   -moz-box-shadow:@shadow;
    4   -ms-box-shadow:@shadow;
    5   box-shadow:@shadow;
    6 } 

    如果这样写就错了,我们有时会用box-shadow来完成多个外阴影和多个内阴影。如果用这个方法写多个阴影时,应该是这样
    .box-shadow(0 0 10px @color1,inset 0 0 10px @color1);  那么你会发现,绝对会错。这时该怎么办呢,你可以再写一个box-shadow(不用担心会占用输出CSS的文件的大小,函数本身是不会输出的,只有当你调用的时候才会输出),那么该怎么写呢,你可以这样

    1  .box-shadow2(@shadow,@shadow2){
    2 
    3   -webkit-box-shadow:@shadow,@shadow2;
    4   -moz-box-shadow:@shadow,@shadow2;
    5   -ms-box-shadow:@shadow,@shadow2;
    6   box-shadow:@shadow,@shadow2;
    7 }
    写的时候,你可以这样写 .box-shadow2(0 0 10px @color1,inset 0 0 10px @color1);  就可以解决这个问题了。

    三:有时在Less里会用到!important (在函数里),比如下面这段代码
    函数时这样的
    1  .box-shadow(@shadow){
    2   -webkit-box-shadow:@shadow;
    3   -moz-box-shadow:@shadow;
    4   -ms-box-shadow:@shadow;
    5   box-shadow:@shadow;
    6 } 
    调用的时候是这样的 
     1 .box-shadow(none !important);  
    那你放心吧,绝对会出错,Less遇到!时,并不会原样输出,这时可以用Less自带的函数e或则~来解决(e函数已经被~取代)。可以像下面这样
     1 .box-shadow(~"none !important");  
    注意要带""。就可以了 
  • 相关阅读:
    C:\Windows\Microsoft.NET\Framework\v4.0.30319\Temporary ASP.NET Files/编译错误
    连接数据库配置 System.Data.Common.DbProviderFactory
    c# socket 发送邮件
    code first 数据迁移
    adb shell monkey
    汇编语言学习小总结
    zookeeper快速安装配置
    编译自己的Hadoop Eclipse插件
    在Windos上使用Eclipse进行Hadoop开发的环境搭建
    Hive安装配置以及整合HBase和hadoop
  • 原文地址:https://www.cnblogs.com/Black-Hole/p/4296977.html
Copyright © 2020-2023  润新知