css预处理器less和scss之less介绍(一)

@color : #ff0000;
@length : 100px;
#div1{
width: @length;
height: @length;
background-color: @color;
}

变量使用规则
多次频繁出现的值,后期需要统一修改的值,牵扯到数值运算的值,推荐使用变量。
.boderradius{
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.boderradius1(@radius){
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
}

.boderradius2(@radius:10px){
border-radius: @radius;
-webkit-border-radius: @radius;
-moz-border-radius: @radius
.class{
width: 10px;
height: 10px;
.boderradius2();
}


.piPei(lefts,@width:10px){
margin-left: @width;
}
.piPei(rights,@width:10px){
margin-right: @width;
} .piPei(tops,@width:10px){
margin-top: @width;
} .piPei(bottoms,@width:10px){
margin-bottom: @width;
}
.piPei(@_,@width:10px){
margin-bottom: @width;
}
@position:lefts;
.class1{
.piPei(@position,10px);
}


.argu(@width,@style,@color){
//border:@width @style @color;
border: @arguments;//跟上面boder效果一样
}
.class2{
.argu(10px,solid,#ff0000)
}


#section{
width: 800px;
height: 200px;
background-color: #ccc;
p{
color: red;
}
ul{
list-style: none;
>li{
float: left;
width: 200px;
height: 50px;
&:hover{
background-color: yellow;
}
} } }

以上就是我简单整理的less的基本语法,可能不是太好看,但是希望能对看到这篇文章的人有所帮助,谢谢了
고마워요~~
css预处理器less和scss之less介绍(一)的更多相关文章
- css预处理器less和scss之sass介绍(二)
本来打算整理jQuery Mobile来着,但是没有研究明白,所以接着上个周的继续介绍... [scss中的基础语法] 1.scss中的变量 ①声明变量:$变量名:变量值 $width:100px ...
- CSS预处理器 Less Sass,Scss 编译 Sourcemap调试
sass.less和stylus的安装使用和入门实践 SASS用法指南 Sass Basics CSS预处理器 css preprocessor 预处理器即preprocessor,预处 ...
- CSS预处理器Sass(Scss)、Less、Stylus
CSS 预处理编译器能让我成程序化其的方式编写CSS代码,可以引入CSS中没有的变量.条件.函数等特性,从而让代码更简单易维护,但一般按预处理器语法编写的代码无法直接在浏览器中运行,需用通过工具比如g ...
- 前端CSS预处理器Sass
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- css预处理器sass使用教程(多图预警)
css预处理器赋予了css动态语言的特性,如变量.函数.运算.继承.嵌套等,有助于更好地组织管理样式文件,以及更高效地开发项目.css预处理器可以更方便的维护和管理css代码,让整个网页变得更加灵活可 ...
- 关于前端CSS预处理器Sass的小知识!
前面的话 "CSS预处理器"(css preprocessor)的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件.SASS是一种CSS的开发工 ...
- CSS预处理器Sass、LESS 和 Stylus
CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...
- 为您详细比较三个 CSS 预处理器(框架):Sass、LESS 和 Stylus
CSS 预处理器技术已经非常的成熟,而且也涌现出了越来越多的 CSS 的预处理器框架.本文向你介绍使用最为普遍的三款 CSS 预处理器框架,分别是 Sass.Less CSS.Stylus. 首先我们 ...
- 160907、CSS 预处理器-Less
CSS 预处理器是什么?一般来说,它们基于 CSS 扩展了一套属于自己的 DSL,来解决我们书写 CSS 时难以解决的问题: 语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器: ...
随机推荐
- 配置AIX系统互信关系
解释: 信任关系指一台远程服务器的用户以相同的用户名接入到另外一台服务器,而无需提供口令. 双机之间建立信任关系后,可以使用“rcp”和“rlogin”等命令. 操作步骤: 1.以root用户登录双机 ...
- connect by prior 递归算法
http://blog.163.com/xxciof/blog/static/7978132720095193113752/ oracle中 connect by prior 递归算法 Oracle中 ...
- 扩展Python模块系列(一)----开发环境配置
本系列将介绍如何用C/C++扩展Python模块,使用C语言编写Python模块,添加到Python中作为一个built-in模块.Python与C之间的交互目前有几种方案: 1. 原生的Python ...
- 【机器学习笔记之四】Adaboost 算法
本文结构: 什么是集成学习? 为什么集成的效果就会好于单个学习器? 如何生成个体学习器? 什么是 Boosting? Adaboost 算法? 什么是集成学习 集成学习就是将多个弱的学习器结合起来组成 ...
- 有关XSS的一个系列教程
在乌云发现了一个有关XSS的教程,目前有21篇,够我慢慢儿学的了. 这个系列教程的地址:http://www.wooyun.org/whitehats/心伤的瘦子/page/1 几个常见的语句 < ...
- Maven干货
好处: 1. 依赖管理:对jar包统一管理 2. 项目构建: 项目编码完成后,对项目进行编译.测试.打包.部署.之前项目构建通过eclipse工具实现.今天学习新的工具也可以实现这些过程.比如:通过m ...
- 开源社群系统ThinkSNS+安装部署演示视频!
社群系统TS+一期版本发布之后,很多小伙伴们反馈安装部署有些困难,那么今天由我们的颜值与技术实力担当乔斌大佬通过录制视频的形式,给大家演示一下部署的整个过程,录制过程中有些杂音,请各位尽情谅解,后续我 ...
- js版贪吃蛇
之前没有写博客的习惯,这是我的第一个博客,有些的不好的地方,希望大家多多提意见 js版的贪吃蛇相对比较简单,废话不多说直接上代码,有需要注意的地方我会标红,github源码地址https://gith ...
- 程序员的Epic Fail [0]
作为程序员,我们经常会被客户问的一个问题一定是不是说很容易么,为什么花了这么长时间.不得不说,程序员可能是最糟糕的计划者,按时按点按计划完成的软件项目永远是下一个项目.一个项目的延期,有很多这样那样的 ...
- thinkphp 中英文网站详解
thinkphp 制作中英文网站的两种方法 一,在网站程序里增加语言脚本,设置整站自动翻译. 二,在原有的页面制作新的模板,在新的页面编辑网站, 优缺点: 一:优点.........就是不用多次添加内 ...