LESS 学习记录(简单入门)
什么是 LESS
LESS是一种动态样式语言,属于 CSS 预处理语言的一种。它使用类似 CSS 的语法,但是 赋予了动态语言的特性,比如变量、继承、运算、函数等,方便 CSS 的编写和维护。
使用 LESS
在开发环境下的时候,推荐直接使用浏览器使用 LESS。
- 下载 LESS.js 文件。
- 页面中引入 styles.less 文件所有 .less 必须在 LESS.js 前引入。(服务器必须设置 .less 文件的 MIME 为 text/css)
- 引入 JS 文件
开发完毕后,推荐使用 node.js 进行预编译,将 .less 编译成 .css
- 通过 npm 安装
npm install -g less
- 安装完毕后,将 .less 编译成 .css
lessc style.less > style.css
- 引入该 style.css 文件
以下是自己尝试的玩意.
.less 文件
@red:red; // 设置变量
@blue:blue; // 变量放顶部,以后调整的时候直接调整变量
@size:22px;
@darkblue:darken(@blue,10%); // 执行函数,返回加深后的颜色
@url:"http://static.cnblogs.com/images/adminlogo.gif";
@name:active; #div{
h3{ // 嵌套
@size:32px;
color:@red; // 调用变量
font-size:@size;
&.@{name} { // 选择器插值
font-size:@size+10;
background:url("@{url}") no-repeat; // 字符串插值
}
}
h4 {
color:@blue;
font-size:@size+10; // 运算
&:hover { // 调用变量
.h4-hover(#333); // 调用属性集合 将参数传进去
}
&:before{
@var: ~`"hello".toUpperCase() + ','`;
content:"@{var}";
}
}
}
.h4-hover(@color){ // 属性集合,可接受一个参数
border:1px solid @color;
color:@darkblue;
}
/* 当 .less 文件被编译成 .css 的时候这条注释还在 */
// 当 .less 文件被编译成 .css 的时候这条注释不见了
编译后的 css
#div h3 {
color: red;
font-size: 32px;
}
#div h3.active {
font-size: 42px;
background: url("http://static.cnblogs.com/images/adminlogo.gif") no-repeat;
}
#div h4 {
color: blue;
font-size: 32px;
}
#div h4:hover {
border: 1px solid #333;
color: #0000cc;
}
#div h4:before {
content: "HELLO,";
}
/* 当 .less 文件被编译成 .css 的时候这条注释还在 */
LESS 学习记录(简单入门)的更多相关文章
- mybais学习记录一——入门程序
一.传统连接数据库和执行sql的不足 1.数据库连接,使用时就创建,不使用立即释放,对数据库进行频繁连接开启和关闭,造成数据库资源浪费,影响 数据库性能. 设想:使用数据库连接池管理数据库连接. 2. ...
- Quartz学习——Quartz简单入门Demo(二)
要学习Quartz框架,首先大概了解了Quartz的基本知识后,在通过简单的例子入门,一步一个脚印的走下去. 下面介绍Quartz入门的示例,由于Quartz的存储方式分为RAM和JDBC,分别对这两 ...
- Java设计模式学习记录-简单工厂模式、工厂方法模式
前言 之前介绍了设计模式的原则和分类等概述.今天开启设计模式的学习,首先要介绍的就是工厂模式,在介绍工厂模式前会先介绍一下简单工厂模式,这样由浅入深来介绍. 简单工厂模式 做法:创建一个工厂(方法或类 ...
- 学习记录----简单的原生js路由
在以前的web程序中,路由字眼只出现在后台中.但是随着SPA单页面程序的发展,便出现了前端路由一说.单页面顾名思义就是一个网站只有一个html页面,但是点击不同的导航显示不同的内容,对应的url也会发 ...
- SpringMVC学习记录一——入门介绍和入门程序
1 springmvc框架 1.1 什么是springmvc springmvc是spring框架的一个模块,springmvc和spring无需通过中间整合层进行整合. spr ...
- 安卓学习-- RecyclerView简单入门
一.加入JAR包 第一感觉这个东东,好复杂,没ListView来的快,方便 在项目中加入android-support-v7-recyclerview.jar包 这个包在extras\android\ ...
- gulp学习笔记--简单入门
一.准备工作 1.gulp是基于nodeJS的前端构建工具,所以全局安装nodeJS 2.利用npm全局安装gulp. npm install -g gulp 3.在项目根目录下新建文件package ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- springboot 学习之路 1(简单入门)
目录:[持续更新.....] spring 部分常用注解 spring boot 学习之路1(简单入门) spring boot 学习之路2(注解介绍) spring boot 学习之路3( 集成my ...
随机推荐
- 1、webservice的简单使用
1.新建一个web端项目 2.点击添加项,选择web服务 3.在已经建好的项目中写一个方法 4.发布(发布方法选文件系统,web需要管理员权限) 生成文件夹: 5.配置IIS(略) 6.调用webse ...
- 纯CSS3实现轮播切换效果
使用纯css3实现与轮播器一样的功能. HTML代码: <div class="slide-container"> <input type="radio ...
- F - To the Max
Given a two-dimensional array of positive and negative integers, a sub-rectangle is any contiguous s ...
- Linux压缩那些事儿
tar简介 Linux的压缩命令的源文件只能有一个,这意味在压缩之前不得不先将要压缩的所有文件打包成一个包,然后再压缩包,这样来完成对多个文件的压缩.所以在了解解压缩之前就必须先了解打包命令. Lin ...
- document的一点点
var str = "hello world" document.write(str.length)输出字符串长度 12 给string 添加样式 <p>Big: ...
- Equal
package com; public class StringEquals { public static void main(String[] args) { String s1=new Stri ...
- yii去除index.php的入口脚本显示为seo友好的url
1.去除入口脚本需要在重写url,如果你的webserver软件时Apache的话,必须配置httpd.conf,搜索“LoadModule rewrite_module modules/mod_re ...
- word转pdf字体格式变乱的问题
完成word转pdf的功能之后,本地测试没问题,然后发布到服务器上,就遇到了字体变乱的问题,如下: 由于我本地发布后导出没有出现同样情况,而服务器和本地的最大区别在于字体库,于是,把服务器上关于需要用 ...
- C#项目实例中读取并修改App.config文件
C#项目是指一系列独特的.复杂的并相互关联的活动,这些活动有着一个明确的目标或目的,必须在特定的时间.预算.资源限定内,依据规范完成.项目参数包括项目范围.质量.成本.时间.资源. 1. 向C#项目实 ...
- Windows 10 解决 0x80070021 错误
Windows 10 已经不支持 aspnet_regiis -i. 启动和关闭Windows功能中安装 ".NET Framework 4.6 高级服务" 即可解决. 以下是借鉴 ...