LESSCSS
- LESSCSS应需求而生
CSS 的语法相对简单,对使用者的要求较低,但同时也带来一些问题:CSS 需要书写大量看似没有逻辑的代码,不方便维护及扩展,不利于复用,尤其对于非前端开发工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码,造成这些困难的很大原因源于 CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。LESS 为 Web 开发者带来了福音,它在 CSS 的语法基础之上,引入了变量,Mixin(混入),运算以及函数等功能,大大简化了 CSS 的编写,并且降低了 CSS 的维护成本,就像它的名称所说的那样,LESS 可以让我们用更少的代码做更多的事情。
- LESSCSS新特征
LESS 包含一套自定义的语法及一个解析器,用户根据这些语法定义自己的样式规则,这些规则最终会通过解析器,编译生成对应的 CSS 文件。LESS 并没有裁剪 CSS 原有的特性,更不是用来取代 CSS 的,而是在现有 CSS 语法的基础上,为 CSS 加入程序式语言的特性。LESSCSS是一种动态样式语言,属于css预处理语言的一种,它的使用类似css的语法,它的重要特点是为css赋予了动态语言的特征,如变量、继承、运算、函数等,更方便css的编写和维护。
- LESSCSS可以在多种语言、环境中使用,包括浏览器端,桌面客户端,服务器端。
- 变量 LESSCSS变量允许单独定义一系列通用的样式,然后再需要的时候去调用。
混合 可以将一个定义好的css类引入到另一个css中,从而实现继承。
- 嵌套 可以在一个选择器中嵌套另一个选择器来实现继承,这样很大程度减少了代码量,并且代码看起来更加的清晰。
- 函数运算 LESSCSS运算提供了加,减,乘,除操作;我们可以做属性值和颜色的运算,这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码,如果你愿意的话可以操作属性值
- 编译LESS 如果使用node.js插件进行编译的话,首先全局安装less,在command命令栏输入:” npm install -g less”,如图
然后再相应的文件目录下编译css如图
如果想直接在浏览器中使用,我们需要使用js脚本插件,下载LESSCSS.js文件,然后再界面上引入lesscss文件,注意rel=“stylesheet/less”,如图
在将LESSCSS引入到界面上即可
LESSCSS的更多相关文章
- 在MVC中使用dotless后台动态解析LESSCSS的学习笔记
通过学习LessCSS,我们知道,Less是需要通过编译才能生成 .css 文件,主要使用三种方式进行编译: 1)使用第三方编译工具,在项目发布前编译好放在项目中. 2)在浏览器端解析执行,需要引用 ...
- LessCss学习笔记
一.入门 1.LESSCSS是什么? LESSCSS是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了动态语言的特性,如变量.继承.运算.函数等,更方便CSS的编 ...
- LESSCSS的几点摘要
字符串插值 变量可以用像 @{name} 这样的结构,以类似 ruby 和 php 的方式嵌入到字符串中: @base-url: "http://assets.fnord.com" ...
- Less-css预处理编译
node编译 第一步:https://nodejs.org/en/ 到node官网下载最新的node 第二步:和普通软件一样把node安装好 第三步:运行-cmd,准备安装less 全局安装(整个电 ...
- less 官网讲解 ( http://www.bootcss.com/p/lesscss/ )
变量 变量允许我们单独定义一系列通用的样式,然后在需要的时候去调用.所以在做全局样式调整的时候我们可能只需要修改几行代码就可以了. // LESS @color: #4D926F; #header { ...
- Less-css扩展指定多层嵌套选择器样式
//扩展Extend Use Method:以在study上扩展指定多层嵌套选择器样式 //Share style .test{ font-size:18px; color:#ffffff; ul{ ...
- Less-css扩展多样式
//扩展Extend Use Method:以在study上扩展多个的样式为例 //Share style 1 .style1{ width:200px; height:15px; color:#ff ...
- Less-css基础扩展
//扩展Extend less的伪类,合并了选择器,放在与它引用匹配的选择器上 Use Method:以在study上扩展test的样式为例 .test{ color:#000000; font-si ...
- Less-css基础之变量学习
一.普通变量 //--普通变量--less @fontColor: #000000; body{ color:@fontColor; } //--输出--css body{ color:#000000 ...
随机推荐
- 解决div里面img的缝隙问题~
解决div里面img的缝隙问题 图片IMG与容器下边界之间有空隙怎么办?这里介绍3中简单的解决方法. 第一,给图片img标签display:block. img{display:block} 第二,定 ...
- for_each 用法!
class MapTest:public CapTest{ private: set <string> MyTestContain; typedef pair <string,int ...
- Scala学习笔记--Actor和并发
感谢博主lyrebing 博文地址:http://blog.csdn.net/lyrebing/article/details/20446061 1. Actor用法 1.1 Actor的基本使用 ...
- Swift 可选类型-备
我们先看看如下代码: var n1: Int = 10 n1 = nil //编译错误 let str: String = nil //编译错误 Int和String类型不能接受 ...
- iOS 第三方 需要 引用的库
================================================== AFNetWorking 是基于 nsurlconnection 所以不需要引入库 === ...
- MongoDB再实测
不用安装,直接解压.. 这些都不是最主要的,,,倒是TOMCAT和NGINX还需要更深入的了解... http://jingyan.baidu.com/article/acf728fd3d398bf8 ...
- spoj1812-Longest Common Substring II(后缀自动机)
Description A string is finite sequence of characters over a non-empty finite set Σ. In this problem ...
- Xcode7中你一定要知道的炸裂调试神技(转)
1.Address Sanitizer: 妈妈再也不用担心 EXC_BAD_ACCESS? EXC_BAD_ACCESS一直是很多开发者的噩梦,因为这个错误很不直观,出现后往往要花很长时间才能定位到错 ...
- Django之CSRF 跨站请求伪造
一.简介 1.点我了解什么是跨站请求伪造 2.django为用户实现防止跨站请求伪造的功能,通过中间件 django.middleware.csrf.CsrfViewMiddleware 来完成.而对 ...
- Fragment的简单使用
最近一直有点忙,刚刚看到一个朋友的留言提到Fragment中加载ListView的问题,这里写了一个非常简单的测试,至于对Fragment的增.删.改实现动态布局构建灵活的UI,以后有时间在讨论: M ...