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 时难以解决的问题: 语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器: ...
随机推荐
- 利用GeoIP数据库及API进行地理定位查询 Java
地理定位查询的的数据库比较多,而且大多都开放一些free的版本 国内的有纯真数据库等,但是他只提供文本的地理位置信息,不提供经纬度数据 当应用到google map时,就不可以了 国外的有MaxMin ...
- Luogu [USACO08OPEN]寻宝之路Clear And Present Danger
题目描述 Farmer John is on a boat seeking fabled treasure on one of the N (1 <= N <= 100) islands ...
- CentOS 6.5安装JDK、Tomcat、Mysql
安装JDK 1.下载JDK7 下载jdk-7u79-linux-x64.tar.gz 百度网盘下载地址:https://pan.baidu.com/s/1c1JZo2k 在Linux上新建/usr/j ...
- Mongodb相关 (Shell命令 / mongoose)
Mongodb相关 1.创建一个文件夹作为数据库存放的目录 2.打开cmd cd到Mongodb/bin目录去 3.执行mongod --dbpath "第一项创建的文件夹(数据库数据存放目 ...
- CentOS6 安装Sendmail + Dovecot + Squirrelmail
本文记录在本地虚拟机CentOS6上搭建Sendmail + Dovecot + Squirrelmail 的Webmail环境的过程,仅仅是本地局域网的环境测试,不配置DNS, 也没有安全认证,Sq ...
- 【转载】跟我一起学习VIM - vim插件
目录 写在前面:Life Changing Editor 什么是VIM 为什么选VIM 为什么选其它 为什么犹豫选择它们 VIM >= SUM(现代编辑器) 如何学习VIM 一秒钟变记事本 VI ...
- php面试题汇总二(基础篇附答案)
介绍一些php常见面试题及答案,都是平时面试的时候经常会遇到的,小伙伴们仔细了解下吧.接着上一篇php面试题汇总一(基础篇附答案) 1.在PHP中,当前脚本的名称(不包括路径和查询字符串)记录在预定义 ...
- PHP魔术方法
魔术方法:两个下划线开头的格式. PHP中的魔术方法总结 :__construct, __destruct , __call, __callStatic,__get, __set, __isset, ...
- git 简易使用说明
背景 代码用git管理,所以需要大家熟悉git工具的一些操作 目前我们自动化在develop分支上进行编写 前言 安装git,https://git-scm.com/ 可视化工具推荐,sourcetr ...
- VMware Workstation 12 Player之安装林耐斯-Linux Deepin -系统
VMware Workstation 12 Player之安装林耐斯-Linux Deepin -系统... ============= ============= ============= === ...