less入门
2018-09-29 本文已影响0人
vsceo
webstorm 与 less 环境配置
File Watchers配置
External Tools配置
配置完成后可自动生成 css
注释
/ 与 //
变量
- 变量定义：@变量名:变量值
- 变量使用 @变量名
拼合字符串(如选择器、URLs、导入路径、属性名)时 @{变量名}
@charset "UTF-8";
// variables
@my-selector: banner;
//import statements
@import " @{my-selector}/style.css";
//selector
.@{my-selector} {
//property
@{my-selector}: bold;
line-height: 40px;
margin: 0 auto;
//url
background:url("@{my-selector}/css/");
}
变量的变量
@charset "UTF-8";
@primary: green;
@secondary: blue;
.section {
@color: primary;
.element {
color: @@color;
}
}
导入less的变量
// library
@charset "UTF-8";
@base-color: green;
@dark-color: darken(@base-color, 10%);
@charset "UTF-8";
// use of library
@import "library.less";
h1 {
color: @base-color;
}
输出效果
@charset "UTF-8";
h1 {
color: green;
}
混合 类似于函数的调用
普通混合
less源码
@charset "UTF-8";
.hFontFamily{
font-family:"微软雅黑", "Mircsoft YaHei";
}
h1 {
font-size: 28px;
.hFontFamily;
}
h2 {
font-size: 14px;
.hFontFamily;
}
输出
@charset "UTF-8";
.hFontFamily {
font-family: "微软雅黑", "Mircsoft YaHei";
}
h1 {
font-size: 28px;
font-family: "微软雅黑", "Mircsoft YaHei";
}
h2 {
font-size: 14px;
font-family: "微软雅黑", "Mircsoft YaHei";
}
不带输出的普通混合 选择器后加()
其目的不让公共的混合元素进行输出
less源码
@charset "UTF-8";
.hFontFamily{
font-family:"微软雅黑", "Mircsoft YaHei";
}
h1 {
font-size: 28px;
.hFontFamily;
}
h2{
font-size: 14px;
.hFontFamily;
}
输出
@charset "UTF-8";
.hFontFamily {
font-family: "微软雅黑", "Mircsoft YaHei";
}
h1 {
font-size: 28px;
font-family: "微软雅黑", "Mircsoft YaHei";
}
h2 {
font-size: 14px;
font-family: "微软雅黑", "Mircsoft YaHei";
}
带父选择器混合 & 代表父级
less源码
@charset "UTF-8";
.hFontFamily() {
&:hover {
border: solid 1px #000000;
}
font-family: "微软雅黑", "Mircsoft YaHei";
}
h1 {
font-size: 28px;
.hFontFamily;
}
h2 {
font-size: 14px;
.hFontFamily;
}
输出
@charset "UTF-8";
h1 {
font-size: 28px;
font-family: "微软雅黑", "Mircsoft YaHei";
}
h1:hover {
border: solid 1px #000000;
}
h2 {
font-size: 14px;
font-family: "微软雅黑", "Mircsoft YaHei";
}
h2:hover {
border: solid 1px #000000;
}
使用场景二
.button {
&-ok {
background-image: url("ok.png");
}
&-cancel {
background-image: url("cancel.png");
}
&-custom {
background-image: url("custom.png");
}
}
输出
.button-ok {
background-image: url("ok.png");
}
.button-cancel {
background-image: url("cancel.png");
}
.button-custom {
background-image: url("custom.png");
}
&本质就是代表父类选择器 字符串进行拼接
一个&代表一个父选择器 两个&& 即 父选择器父选择器 例 :
@charset "UTF-8";
.link {
& + & {
color: red;
}
& & {
color: green;
}
&& {
color: blue;
}
&, &ish {
color: cyan;
}
}
输出
@charset "UTF-8";
.link + .link {
color: red;
}
.link .link {
color: green;
}
.link.link {
color: blue;
}
.link,
.linkish {
color: cyan;
}
带参数的混合
less源码
@charset "UTF-8";
.hFontFamily(@color) {
&:hover {
border: solid 1px @color;
}
font-family: "微软雅黑", "Mircsoft YaHei";
}
h1 {
font-size: 28px;
.hFontFamily(red);
}
h2 {
font-size: 14px;
.hFontFamily(#000);
}
输出
@charset "UTF-8";
h1 {
font-size: 28px;
font-family: "微软雅黑", "Mircsoft YaHei";
}
h1:hover {
border: solid 1px red;
}
h2 {
font-size: 14px;
font-family: "微软雅黑", "Mircsoft YaHei";
}
h2:hover {
border: solid 1px #000;
}
带参数且有默认值的混合
less源码
@charset "UTF-8";
.hFontFamily(@color:red) {
&:hover {
border: solid 1px @color;
}
font-family: "微软雅黑", "Mircsoft YaHei";
}
h1 {
font-size: 28px;
.hFontFamily(); //读取默认值
}
h2 {
font-size: 14px;
.hFontFamily(#000);
}
输出
@charset "UTF-8";
h1 {
font-size: 28px;
font-family: "微软雅黑", "Mircsoft YaHei";
}
h1:hover {
border: solid 1px red;
}
h2 {
font-size: 14px;
font-family: "微软雅黑", "Mircsoft YaHei";
}
h2:hover {
border: solid 1px #000;
}
带多个参数的混合 使用分号;分隔 （不要使用逗号） 调用时必须按顺序
命名参数的混合 调用时不必按顺序
以上两种情况，调用时也需用分号分隔
以上两种状况，我们按正规的调用来，就要考虑那么多问题。其实程序产生的问题，就是不按规范来做，所以产生很多奇怪的问题。
@arguments 代表所有的参数
less源码
@charset "UTF-8";
.hFontFamily(@color:red;@borderStyle) {
&:hover {
border: 1px @arguments;
}
font-family: "微软雅黑", "Mircsoft YaHei";
}
h1 {
font-size: 28px;
.hFontFamily(@color:red;dashed);
}
h2 {
font-size: 14px;
.hFontFamily(#000,solid);
}
输出
@charset "UTF-8";
h1 {
font-size: 28px;
font-family: "微软雅黑", "Mircsoft YaHei";
}
h1:hover {
border: 1px red dashed;
}
h2 {
font-size: 14px;
font-family: "微软雅黑", "Mircsoft YaHei";
}
h2:hover {
border: 1px #000 solid;
}
匹配模式 类似于同名方法
less源码
@charset "UTF-8";
.border(all,@w: 5px){
border-radius: @w;
}
.border(t_l,@w:5px){
border-top-left-radius: @w;
}
.border(t_r,@w:5px){
border-top-right-radius: @w;
}
.border(b-l,@w:5px){
border-bottom-left-radius: @w;
}
.border(b-r,@w:5px){
border-bottom-right-radius: @w;
}
footer{
.border(t_l,10px);
.border(b-r,10px);
background: #33acfe;
}
输出
@charset "UTF-8";
footer {
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
background: #33acfe;
}
混合的返回值
less源码
@charset "UTF-8";
.average(@x, @y) {
@average: ((@x + @y) / 2);
@he:(@x + @y);
}
div {
.average(16px, 50px);
padding: @average;
margin: @he;
}
输出
@charset "UTF-8";
div {
padding: 33px;
margin: 66px;
}
嵌套规则
- 模拟HTML结构
- 父元素选择器
&:伪类名称
运算
- 数值
- 颜色
命名空间 Namespaces
less源码
@charset "UTF-8";
#bundle() {
.button {
display: block;
border: 1px solid black;
background-color: grey;
&:hover {
background-color: white;
}
}
}
#header a {
color: orange;
#bundle.button();
}
输出
@charset "UTF-8";
#header a {
color: orange;
}
#header a .button {
display: block;
border: 1px solid black;
background-color: grey;
}
#header a .button:hover {
background-color: white;
}
Maps
less源码
@charset "UTF-8";
#colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}
输出
@charset "UTF-8";
.button {
color: blue;
border: 1px solid green;
}
作用域
Less中的作用域与编程语言中的作用域概念非常相似。首先会在局部查找变量和混合，如果没找到，编译器就会在父作用域中查找，依次类推
less源码
@var: red;
#page {
@var: white;
#header {
color: @var; // white
}
}
