浅谈css3中calc在less编译程序时被测算的处理方法

日期:2021-03-02 类型:科技新闻 

关键词:抠图换背景,免费的抠图软件,美图抠图,手机抠图软件哪个好,p图软件哪个好用

针对前端开发er来讲,Less或Sass早已是1项必备的基础专业技能,有了这个利器,能够省下前端开发开发设计者的许多编号時间,让你写CSS如行云流水1般,随后近期我在Less里添加calc时确发现了有点难题,我在Less中这么写:

div {width : calc(100% - 30px);}  

結果Less把这个当做运算式去实行了,結果给我分析成这样:

div {width: calc(70%);} 

那时候我就烦闷了,如何会造成这样的状况呢?后来各种各样查,是因为less的测算方法跟calc方式有重合,二者在1起有矛盾,因而,我在Less中把calc的写法改变成下面这样:

div {width : calc(~"100% - 30px");}

OK,分析結果一切正常: 

div {width: calc(100% - 30px);}

但是,把30px更换为1个自变量,如何写呢?

  div {
  @diff : 30px;
  width : calc(~"100% - " + @diff);
  }

这么写Webstorm沒有出错,但grunt-less出错了:

C:\Users\zhong\WebstormProjects\test>grunt less

Running "less:development" (less) task

>> ParseError: Unrecognised input in style.less on line 4, column 2:

>> 3    @diff : 30px;

>> 4    width : calc(~"100% - " + @diff);

>> 5 }

Warning: Error compiling style.less Use --force to continue.

Aborted due to warnings.

因而这么写:

  div {
  @diff : 30px;
  width : calc(~"100% - " @diff);
  }

圆满编译程序以往,但Webstorm却总是提醒英语的语法不正确,尽管也能编译程序但看着文档有1个不正确提醒内心老

觉得不爽,找半天也没发现Webstorm怎样调节英语的语法提醒不正确设定

因而,改为以下写法:

  div {
  @diff : 30px;
  width : calc(~"100% - @{diff}");
  }

这类写法又能编译程序,Webstorm里又不出错,因此我较为喜爱用这类写法,这般,便不容易再有任何难题了。

PS:在这里出示1个专用工具网站,https://www.jb51.net/tools/cssyasuo.shtml,能出示各种各样CSS和别的語言的文件格式化,常常less编译程序后的css文档的文件格式其实不是大家所必须的,如今能够试1下前面我说的网站地址里边的净化 ,哈哈,谁用谁了解!

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。