webstorm 與 less 環(huán)境配置
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;
}
混合 類似于函數(shù)的調(diào)用
普通混合
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");
}
&本質(zhì)就是代表父類選擇器 字符串進行拼接
一個&代表一個父選擇器 兩個&& 即 父選擇器父選擇器 例 :
@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;
}
帶參數(shù)的混合
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;
}
帶參數(shù)且有默認值的混合
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;
}
帶多個參數(shù)的混合 使用分號;分隔 （不要使用逗號） 調(diào)用時必須按順序
命名參數(shù)的混合 調(diào)用時不必按順序
以上兩種情況，調(diào)用時也需用分號分隔
以上兩種狀況习绢，我們按正規(guī)的調(diào)用來伯复，就要考慮那么多問題。其實程序產(chǎn)生的問題息罗，就是不按規(guī)范來做，所以產(chǎn)生很多奇怪的問題才沧。
@arguments 代表所有的參數(shù)
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;
}
嵌套規(guī)則
- 模擬HTML結(jié)構(gòu)
- 父元素選擇器
&:偽類名稱
運算
- 數(shù)值
- 顏色
命名空間 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
}
}
