体验LESS CSS 框架

    LESS基于NODE.JS的一种框架性语言,它可以更好更快捷的来搭建网站框架结构;

   而后LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承,运算, 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox),也可以借助Node.js或者Rhino在服务端运行,

  但是对于我来理解中如果说他方便的话,我并不是十分认同虽然Less 的设计思路偏向原生,这个如果运用的话也比较容易上手,所以我总结了以下几个优点:

  1. 需要编写的代码量明显减少了。(重用度高的话)。
  2. CSS管理更加容易了,在需要更换网站样式风格时尤其如此,此时如果直接重写这些样式,工作量将会非常大,但是使用LESS就很简单,改个全局配置局可以了。
  3. LESS的学习成本不是很高,与CSS规则完全融合,如果熟悉CSS,那么你也将会很快驾驭LESS。
  4. 使用LESS实现配色将变得非常容易。
  5. 兼容CSS3。
  6. 与CSS能够很好地融合使用。在LESS代码中可以融入CSS代码,在CSS代码中也可以插入LESS语法
  7. 可以配合NODE.JS来结合项目。

     然而不管什么东西一般都是有利有弊的:

  1. 需要编写变量。
  2. 嵌套太长会让可读性变得很

    然后是我写的代码:

@base: #f938ab;.box-shadow(@style, @c) when (iscolor(@c)) {box-shadow:         @style @c;-webkit-box-shadow: @style @c;-moz-box-shadow:    @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {.box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box { color: saturate(@base, 5%);border-color: lighten(@base, 30%);div { .box-shadow(0 0 5px, 30%) }
}

 

 LESS来说虽然相对要容易掌握,但是还是需要不断的更新和了解,这样才能更好的掌握一门框架,虽然开始来说有点抵触,觉得并没有CSS好用和直观,但是这个LESS的代码重用率还是非常高的,但是前提要想到并且编译他,这个需要事先的理解和规划。

  

转载于:https://www.cnblogs.com/wangjunjunjiayuan/p/4658757.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/459139.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java添加按钮点击事件_如何为odoo 10中的按钮点击事件添加一个java脚本处理程序?...

我想使用java脚本为header中的按钮创建一个处理程序。下面我视图模型给出:如何为odoo 10中的按钮点击事件添加一个java脚本处理程序?inherit_id"web.assets_backend">rel"stylesheet">my_pet_store_formpetstore.messageformc…

LeetCode(53):Maximum Subarray

Maximum Subarray: Find the contiguous subarray within an array (containing at least one number) which has the largest sum.For example, given the array [−2,1,−3,4,−1,2,1,−5,4],the contiguous subarray [4,−1,2,1] has the largest sum 6. 题意:找…

孩子教育

看了一圈学区房,基本上把浦东各个一流二流学校全看一遍了,大体下来觉得未必非要到一流学校附近买学区房,主要是家庭经济条件不允许,再者我和老公希望孩子在小学培养读书的习惯,而不是天天做试卷。所以一流学校和二流学…

python 程序打包 vscode_使用VScode编写python程序并打包成.exe文件

听说Visual Studio Code(VS Code)的诸多好处,了解了一下果真很喜欢,我喜欢它的缘由主要有3个,一是VS Code开源且跨平台,二是由于其界面很是酷,三是能够知足个人大所属代码需求,除此以外固然还有强大的好奇心…

使用命名空间、头文件和实现文件

*************************************************** 更多精彩,欢迎进入:http://shop115376623.taobao.com *************************************************** 2.3 使用命名空间、头文件和实现文件 使新的throttle类满足程序的需求将是非常…

Permissions for id_rsa are too open

为什么80%的码农都做不了架构师?>>> Last week I was lucky enough to have my laptop upgraded (yay SSD) which meant I needed to configure a new install of OSX Lion. Most of my files are stored online (email, documents, code, etc) but I m…

java看图_看图吧,Java

package salary;import java.awt.*;import javax.swing.*;import java.awt.event.*;import java.text.NumberFormat;public class Salary extends JFrame{//声明标签private JLabel numl;private JLabel basel;private JLabel salel;//声明文本框private JTextField numf;priva…

解决端口占用

tomcat启动时报错: 这说明8080端口已被其他程序占用,先用命令提示符 "netstat -ano" 显示端口,再在结果中找到端口,然后根据其PID再输入"tasklist"命令,在结果中查找其对应程序,就可知…

Python笔记-第一天

1。Python的输出print函数要把输出的字符串用单引号或者双引号括起来,但是不能混用。比如print(hello,world)和print("hello,world")是相同的。2.大小写敏感。3.由于缩进使用空格,复制代码不再那么方便。4.我在notepad中设置了Tab自动转化为4个…

Saltstack 报错 python-crypto randomPool_DeprecationWarning:

执行saltstack 报错一下信息根据报错信息修改python文件#若遇报错1#Starting salt-master daemon: /usr/lib64/python2.6/site-packages/Crypto/Util/number.py:57: PowmInsecureWarning: Not using mpz_powm_sec. You should rebuild using libgmp > 5 to avoid timing at…

java接口源码_java collection接口源码

package java.util;/** 1.Collection接口是集合继承关系中的根接口(root interface),有些集合允许重复元素,* 有些集合有序,JDK不提供本接口的实现,只提供子接口的实现(例如Set,List)* 2.所有实现Collection(或者其子接口)的类都必须包含两个…

结构体的嵌套问题

*************************************************** 更多精彩,欢迎进入:http://shop115376623.taobao.com *************************************************** 结构体的自引用(self reference),就是在结构体内部,包含指向自…

cocos2dx 3.x Value、Vector和Map意识

1. Value cocos2d::Value 这包括一个非常大的数字原生类型&#xff08;int,float,double,bool,unsigned char,char* 和 std::string&#xff09;外 加std::vector<Value>, std::unordered_map<std::string,Value> 和 std::unordered_map<int,Value> 的类。 你…

【MPI学习3】MPI并行程序设计模式:不同通信模式MPI并行程序的设计

学习了MPI四种通信模式 及其函数用法&#xff1a; &#xff08;1&#xff09;标准通信模式&#xff1a;MPI_SEND &#xff08;2&#xff09;缓存通信模式&#xff1a;MPI_BSEND &#xff08;3&#xff09;同步通信模式&#xff1a;MPI_SSEND &#xff08;4&#xff09;就绪通信…

java 日期 年数_java 日期加减天数、月数、年数的计算方式

因为某个项目需要统计 近1周、近1个月、近6个月 等数据&#xff0c;所以在时间的加减上面想了很多方式&#xff0c;最后决定用java.util.Calendarjava.util.Calendar &#xff0c;提供了计算时间的方式&#xff0c;Calendar.DATE : 代表天数Calendar.WEDNESDAY: 代表周数Calend…

学习笔记——C语言实现单链表的基本操作:创建、输出、插入结点、删除结点、逆序链表

*************************************************** 更多精彩&#xff0c;欢迎进入&#xff1a;http://shop115376623.taobao.com *************************************************** 链表是最简单的一种数据结构&#xff0c;是每个软件开发者必须掌握的&#xff0c;也是…

HTML中放置CSS的三种方式和CSS选择器

(一)在HTML中使用CSS样式的方式一般有三种&#xff1a;1 内联引用2 内部引用3 外部引用。第一种&#xff1a;内联引用&#xff08;也叫行内引用&#xff09;就是把CSS样式直接作用在HTML标签中。<p style"font-size: 10px; color: #FFFFFF;"> 使用CSS内联引用表…

shiro使用jdbc_realm登录验证

2019独角兽企业重金招聘Python工程师标准>>> pom.xml <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation"http://maven.apache.org/POM/4.0.0 http://maven…

java 公因数_Java程序(最大公因数与最小公倍数)

package 求两个数的公约数和公倍数;import java.util.Scanner;public class MN{public static void swap(int a,int b)//交换位置{int k;if(a{ka;ab;bk;}}static int shu(int a,int b)//循环寻找最大公约数{int k,y;swap(a,b);while(a%b!0){ya%b;ab;by;}return b;}static int s…

vs2010中MEX文件建立与调试

*************************************************** 更多精彩&#xff0c;欢迎进入&#xff1a;http://shop115376623.taobao.com *************************************************** http://item.taobao.com/item.htm?spma1z10.5-c.w4002-9510581626.24.ZO6sko&id4…